Dynamfit & Parameterized Query Migration

.gitignore

@@ -53,6 +53,7 @@ mockDB/es/
 
 #Min.io
 mockDB/minio/
+mockDB/data/
 
 #Whyis && Managed Services
 **/**/__pycache__/
@@ -73,3 +74,5 @@ __pycache__/
 sparqlqueries.html
 
 trash
+
+resfulservice/schemas/

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach to API",
+      "address": "localhost",
+      "port": 9229,
+      "localRoot": "${workspaceFolder}/resfulservice",
+      "remoteRoot": "/app"
+    }
+  ]
+}

app/.eslintignore

@@ -0,0 +1,30 @@
+# Dependencies
+node_modules/
+.pnpm-store/
+
+# Build outputs
+dist/
+build/
+.cache/
+
+# Config files
+*.config.js
+*.config.ts
+
+# Logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+
+# Other
+coverage/
+.nyc_output/

app/.eslintrc.js

@@ -3,6 +3,12 @@ module.exports = {
   env: {
     node: true,
   },
+  ignorePatterns: [
+    'node_modules/',
+    'dist/',
+    '*.config.js',
+    '.eslintrc.js',
+  ],
   parser: 'vue-eslint-parser',
   parserOptions: {
     parser: '@typescript-eslint/parser',
@@ -25,6 +31,10 @@ module.exports = {
     'vue/multi-word-component-names': 'off',
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'import/named': 'off',
+    'import/default': 'off',
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
   },
   overrides: [
     {

app/package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.0",
-    "@duke-matsci/vue-materials": "^0.0.401",
+    "@duke-matsci/vue-materials": "^0.0.840",
     "@rdfjs/data-model": "^1.3.4",
     "@triply/yasgui": "^4.2.21",
     "@vue/apollo-composable": "^4.0.0-alpha.15",
@@ -54,6 +54,7 @@
     "vega-lite5": "npm:vega-lite@^5.1.1",
     "vue": "^3.2.13",
     "vue-advanced-cropper": "^1.10.1",
+    "vue-i18n": "^11.1.12",
     "vue-json-csv": "^1.2.12",
     "vue-mathjax": "^0.0.11",
     "vue-router": "^4.0.3",
@@ -63,6 +64,7 @@
   "devDependencies": {
     "@types/d3": "^7.4.3",
     "@types/jest": "^27.5.2",
+    "@types/jsoneditor": "^9.9.6",
     "@types/n3": "^1.26.0",
     "@types/prismjs": "^1.26.5",
     "@types/uuid": "^10.0.0",

app/src/assets/css/modules/_navigation.scss

@@ -87,15 +87,14 @@
     &--siblings-mm {
       padding: 0.3rem 0;
       position: absolute;
-      top: 4.3rem !important;
+      top: 3.5rem !important;
       left: 0;
       line-height: 2.5;
       min-width: 20rem;
       background-color: #ffffff;
       border-bottom-left-radius: 0.5rem !important;
       border-bottom-right-radius: 0.5rem !important;
-      box-shadow: 0 2px 4px -1px rgb($primary-black, 20%),
-        0 4px 5px 0 rgb($primary-black, 14%);
+      box-shadow: 0 2px 4px -1px rgb($primary-black, 20%), 0 4px 5px 0 rgb($primary-black, 14%);
       display: none;
       visibility: hidden;
       z-index: 10;

app/src/assets/css/modules/_tools.scss

@@ -106,12 +106,7 @@
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(
-    0,
-    0,
-    0,
-    0.3
-  ); /* dims the entire screen to make the modal stand out */
+  background-color: rgba(0, 0, 0, 0.3); /* dims the entire screen to make the modal stand out */
   // display: flex; //Added with a utility class on element
   flex-direction: column;
   justify-content: center;
@@ -344,22 +339,50 @@
   }
 }
 
-.dynamfit-note {
-  position: absolute !important;
-  bottom: 1rem;
-  right: 1rem;
-  border: $primary-black 0.1rem solid;
-  padding: 0.2rem 0.4rem;
-  font-size: 1rem;
-  z-index: 1000;
-  color: $primary;
-  max-width: 20rem;
+.dynamfit {
+  &-note {
+    position: absolute !important;
+    bottom: 1rem;
+    right: 1rem;
+    border: $primary-black 0.1rem solid;
+    padding: 0.2rem 0.4rem;
+    font-size: 1rem;
+    z-index: 1000;
+    color: $primary;
+    max-width: 20rem;
+
+    @include respond(tab-land) {
+      max-width: 14rem;
+    }
 
-  @include respond(tab-land) {
-    max-width: 14rem;
+    @include respond(tab-port) {
+      max-width: calc(100% - 2rem);
+    }
   }
 
-  @include respond(tab-port) {
-    max-width: calc(100% - 2rem);
+  &-file-uploader {
+    border: 5px dashed #777777;
+    min-height: 58.5vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    @include respond(laptop) {
+      min-height: 55.5vh;
+    }
+
+    @include respond(tab-land) {
+      min-height: 66vh;
+    }
+
+    @include respond(tab-port) {
+      min-height: 40vh;
+    }
+
+    @include respond(phone) {
+      min-height: 20vh;
+    }
   }
 }

app/src/components/ChartGallery.vue

@@ -101,7 +101,7 @@
         </div>
       </template>
       <template #actions>
-        <MdButton v-if="dialog.type == 'delete'" @click="deleteChart">Delete</MdButton>
+        <MdButton v-if="dialog.type == 'delete'" @click="deleteChart(dialog.chart)">Delete</MdButton>
         <MdButton @click="closeDialog">Cancel</MdButton>
       </template>
     </Dialog>
@@ -141,7 +141,16 @@ const router = useRouter();
 
 // Composables
 const { reduceDescription } = useReduce();
-const { loadParams, loadPrevNextImage } = useExplorerQueryParams();
+
+// Local search method for query params composable
+const localSearchMethod = async (): Promise<void> => {
+  await loadItems(pageNumber.value);
+};
+
+const { pageNumber, pageSize, loadParams, loadPrevNextImage } = useExplorerQueryParams({
+  localSearchMethod,
+  hasPageSize: true
+});
 
 // Reactive data
 const loading = ref(false);
@@ -199,6 +208,10 @@ const toggleDialogBox = () => {
   store.commit('setDialogBox');
 };
 
+const closeDialog = () => {
+  toggleDialogBox();
+};
+
 const deleteChart = async (chart: any, retry = false) => {
   try {
     if (!isAdmin.value) return; // temporary safeguard

app/src/components/Dialog.vue

@@ -1,34 +1,33 @@
 <template>
   <div>
-    <MdDialog
+    <md-dialog
       :class="['dialog-box', dialogSizeClass]"
-      :md-active="active"
+      v-model:md-active="isActive"
       :md-click-outside-to-close="false"
-      @update:md-active="$emit('update:active', $event)"
     >
       <div class="dialog-box_header">
-        <MdDialogTitle>
-          <slot name="title"></slot>
-        </MdDialogTitle>
-        <MdButton
+        <md-dialog-title>
+          <slot name="title"> </slot>
+        </md-dialog-title>
+        <md-button
           v-if="!disableClose"
           class="md-icon-button dialog-box_close facet-content_container u_margin-right-small"
           @click="toggleDialogBox()"
         >
-          <MdIcon class="utility-navfonticon u--font-emph-xl">close</MdIcon>
-        </MdButton>
+          <md-icon class="utility-navfonticon u--font-emph-xl">close</md-icon>
+        </md-button>
       </div>
       <div class="dialog-box_content">
-        <MdDialogContent>
-          <slot name="content"></slot>
-        </MdDialogContent>
+        <md-dialog-content>
+          <slot name="content"> </slot>
+        </md-dialog-content>
       </div>
       <div class="dialog-box_actions md-button-lightbg">
-        <MdDialogActions>
-          <slot name="actions"></slot>
-        </MdDialogActions>
+        <md-dialog-actions>
+          <slot name="actions"> </slot>
+        </md-dialog-actions>
       </div>
-    </MdDialog>
+    </md-dialog>
   </div>
 </template>
 
@@ -38,12 +37,12 @@ import { useStore } from 'vuex';
 
 // Component name for debugging
 defineOptions({
-  name: 'AppDialog',
+  name: 'DialogBox',
 });
 
 // Props
 interface Props {
-  active: boolean;
+  active?: boolean;
   minWidth?: number;
   disableClose?: boolean;
 }
@@ -56,13 +55,18 @@ const props = withDefaults(defineProps<Props>(), {
 
 // Emits
 const emit = defineEmits<{
-  'update:active': [value: boolean];
+  (e: 'update:active', value: boolean): void;
 }>();
 
 // Store
 const store = useStore();
 
 // Computed properties
+const isActive = computed({
+  get: () => props.active,
+  set: (value: boolean) => emit('update:active', value),
+});
+
 const dialogSizeClass = computed(() => {
   const sizeMap: Record<number, string> = {
     40: 'dialog-box_size-sm',

app/src/components/Drawer.vue

@@ -2,7 +2,7 @@
   <div
     class="md-app-internal-drawer u--layout-flex u--layout-flex-column u--layout-flex-justify-sb"
   >
-    <md-list md-expand-single="true" class="utility-transparentbg">
+    <md-list :md-expand-single="true" class="utility-transparentbg">
       <md-toolbar class="md-transparent u--font-emph-l u_toggle-display-off" md-elevation="0"
         ><small>App Navigation</small></md-toolbar
       >
@@ -186,7 +186,7 @@
       </md-list-item>
     </md-list>
   </div>
-  </template>
+</template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
@@ -213,4 +213,3 @@ defineOptions({
   name: 'Drawers',
 });
 </script>
-