@geode/opengeodeweb-front 10.33.4-rc.2 → 10.34.0-rc.1

package/app/assets/css/main.css

@@ -0,0 +1,24 @@
+.v-card-title.text-caption {
+  font-size: 0.75rem !important;
+  line-height: 1.25rem !important;
+}
+
+.v-card-title.text-subtitle-2 {
+  font-size: 0.875rem !important;
+  line-height: 1.375rem !important;
+}
+
+.v-card-title.text-subtitle-1 {
+  font-size: 1rem !important;
+  line-height: 1.5rem !important;
+}
+
+.v-card-title.text-body-2 {
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
+
+.v-card-title.text-body-1 {
+  font-size: 1rem !important;
+  line-height: 1.5rem !important;
+}

package/app/components/ClippingPlanes.vue

@@ -39,7 +39,7 @@ const {
   selectedDatasetIds,
   allItems,
   hybridViewerStore,
-  debouncedApply: () => debouncedApply(),
+  debouncedApply: (...args) => debouncedApply?.(...args),
 });
 
 async function applyClippingPlanes() {

package/app/components/Viewer/Generic/Model/ModelStyleCard.vue

@@ -90,33 +90,33 @@ const modelVisibility = computed({
   },
 });
 
-const modelComponentsActiveColoring = computed({
-  get: () => dataStyleStore.getModelActiveColoring(modelId.value),
-  set: async (coloringType) => {
+const modelComponentsColor = computed({
+  get: () => dataStyleStore.getModelColor(modelId.value),
+  set: async (color) => {
     await dataStyleStore.mutateStyle(modelId.value, {
-      coloring: { active: coloringType },
+      coloring: { constant: color },
     });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      dataStyleStore.getModelColor(modelId.value),
-      coloringType,
+      color,
+      dataStyleStore.getModelActiveColoring(modelId.value),
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const modelComponentsColor = computed({
-  get: () => dataStyleStore.getModelColor(modelId.value),
-  set: async (color) => {
+const modelComponentsActiveColoring = computed({
+  get: () => dataStyleStore.getModelActiveColoring(modelId.value),
+  set: async (coloringType) => {
     await dataStyleStore.mutateStyle(modelId.value, {
-      coloring: { constant: color },
+      coloring: { active: coloringType },
     });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      color,
-      dataStyleStore.getModelActiveColoring(modelId.value),
+      dataStyleStore.getModelColor(modelId.value),
+      coloringType,
     );
     hybridViewerStore.remoteRender();
   },

package/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue

@@ -54,8 +54,8 @@ const { virtualScrollRef, stickyHeader, handleScroll, scrollToIndex, getScrollIn
     actualItemProps,
   );
 
-const lastActiveIndex = ref(-1);
 const focusedIndex = ref(-1);
+const lastActiveIndex = ref(-1);
 
 function handleItemClick(item, index, event) {
   if (index !== undefined) {
@@ -110,6 +110,8 @@ const { handleKeyDown } = useTreeKeyboardNav(
   scrollToIndex,
   toggleOpen,
   handleItemClick,
+  getScrollInfo,
+  focusedIndex,
 );
 </script>
 

package/app/components/Viewer/ObjectTree/Box.vue

@@ -177,5 +177,7 @@ watch(
   background-color: rgba(255, 255, 255, 0.05);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   flex-shrink: 0;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
 }
 </style>

package/app/composables/clipping_planes_widget.js

@@ -210,11 +210,10 @@ function useClippingPlanesWidget({
       maxDistance = localRenderWindow.getRenderer().getActiveCamera().getDistance();
     }
   }
+
   function initLocalWidget(container) {
     cleanupLocalWidget();
-    container.addEventListener("wheel", (event) => event.stopPropagation(), {
-      passive: true,
-    });
+    container.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
     localRenderWindow = vtkGenericRenderWindow({
       background: [0, 0, 0, 0],
       listenWindowResize: false,
@@ -223,16 +222,13 @@ function useClippingPlanesWidget({
     const camera = localRenderWindow.getRenderer().getActiveCamera();
     camera.onModified(() => limitCameraZoomOut(camera));
     const canvas = localRenderWindow.getApiSpecificRenderWindow().getCanvas();
-    Object.assign(canvas.style, {
-      width: "100%",
-      height: "100%",
-      background: "transparent",
-    });
+    Object.assign(canvas.style, { width: "100%", height: "100%", background: "transparent" });
     localRenderWindow.resize();
     widgetManager = vtkWidgetManager();
     widgetManager.setRenderer(localRenderWindow.getRenderer());
     updateWidgetPlacement();
   }
+
   function isFromWidget() {
     return fromWidget;
   }

package/app/composables/tree_keyboard_nav.js

@@ -23,8 +23,9 @@ export function useTreeKeyboardNav(
   toggleOpen,
   handleItemClick,
   getScrollInfo,
+  externalFocusedIndex,
 ) {
-  const focusedIndex = ref(-1);
+  const focusedIndex = externalFocusedIndex || ref(-1);
 
   function findParentIndex(item, currentIndex) {
     for (let index = currentIndex - 1; index >= 0; index -= 1) {

package/app/stores/data.js

@@ -196,13 +196,16 @@ export const useDataStore = defineStore("data", () => {
     await model_components_db.where("id").equals(modelId).delete();
     await database.model_components_relation.where("id").equals(modelId).delete();
   }
+
   async function deleteItem(id) {
     await data_db.delete(id);
     await deleteModelComponents(id);
   }
+
   async function updateItem(id, changes) {
     await data_db.update(id, changes);
   }
+
   async function getAllModelComponentsViewerIds(modelId) {
     const components = await model_components_db.where("id").equals(modelId).toArray();
     return components.map((component) => Math.trunc(Number(component.viewer_id)));
@@ -224,11 +227,13 @@ export const useDataStore = defineStore("data", () => {
       modelComponentsRelations,
     };
   }
+
   async function clear() {
     await data_db.clear();
     await model_components_db.clear();
     await model_components_relation_db.clear();
   }
+
   async function importStores(snapshot) {
     await clear();
     await model_components_db.bulkPut(snapshot.modelComponents);

package/app/utils/extension.js

@@ -13,6 +13,7 @@ async function uploadExtension(file) {
   const appStore = useAppStore();
   await appStore.upload(file);
 }
+
 function runExtensions() {
   const appStore = useAppStore();
   const { projectFolderPath } = appStore;
@@ -29,6 +30,22 @@ function runExtensions() {
     params,
   });
 }
+
+function downloadExtension({ url, extensionFileName }) {
+  const appStore = useAppStore();
+  const { PROJECT: projectName } = useRuntimeConfig().public;
+  const schema = opengeodeweb_front_schemas.api.microservice.extensions.download;
+  const params = {
+    projectName,
+    url,
+    extensionFileName,
+  };
+  return appStore.request({
+    schema,
+    params,
+  });
+}
+
 async function registerRunningExtensions() {
   const appStore = useAppStore();
   const infraStore = useInfraStore();
@@ -55,28 +72,17 @@ async function registerRunningExtensions() {
     }),
   );
 }
+
 async function importExtensionFile(file) {
   await uploadExtension(file);
   return registerRunningExtensions();
 }
-function downloadExtension({ url, extensionFileName }) {
-  const appStore = useAppStore();
-  const { PROJECT: projectName } = useRuntimeConfig().public;
-  const schema = opengeodeweb_front_schemas.api.microservice.extensions.download;
-  const params = {
-    projectName,
-    url,
-    extensionFileName,
-  };
-  return appStore.request({
-    schema,
-    params,
-  });
-}
+
 async function importExtensionURL(url) {
   await downloadExtension(url);
   return registerRunningExtensions();
 }
+
 async function unloadExtension(extensionId) {
   const appStore = useAppStore();
   console.log("[ExtensionManager] Unloading extension:", extensionId);
@@ -101,6 +107,7 @@ async function unloadExtension(extensionId) {
   console.log("[ExtensionManager] Extension unloaded:", extensionId);
   return true;
 }
+
 function killExtension(extensionId) {
   const appStore = useAppStore();
   const { projectFolderPath } = appStore;

package/app/utils/import_workflow.js

@@ -69,12 +69,14 @@ async function importFile(filename, geode_object_type) {
   });
   return importItem(response);
 }
+
 async function importWorkflow(files) {
   const chunk_size = 5;
   const chunks = [];
   for (let i = 0; i < files.length; i += chunk_size) {
     chunks.push(files.slice(i, i + chunk_size));
   }
+
   const results = [];
   async function processChunk(chunkIndex) {
     if (chunkIndex >= chunks.length) {
@@ -92,10 +94,9 @@ async function importWorkflow(files) {
   hybridViewerStore.remoteRender();
   return results;
 }
+
 async function importWorkflowFromSnapshot(items) {
-  console.log("[importWorkflowFromSnapshot] start", {
-    count: items?.length,
-  });
+  console.log("[importWorkflowFromSnapshot] start", { count: items?.length });
   const hybridViewerStore = useHybridViewerStore();
   const chunk_size = 5;
   const chunks = [];

package/internal/database/database.js

@@ -58,6 +58,7 @@ class Database extends BaseDatabase {
     }
   }
 }
+
 // oxlint-disable-next-line no-top-level-await
 await Dexie.delete("Database");
 databaseContainer.instance = new Database();

package/internal/stores/hybrid_viewer/camera.js

@@ -99,9 +99,10 @@ function applyCameraOptions(camera, options) {
     });
   }
 }
+
 function performSetCamera(targetCameraOptions) {
   const hybridViewerStore = useHybridViewerStore();
-  const { genericRenderWindow, syncRemoteCamera } = hybridViewerStore;
+  const { genericRenderWindow } = hybridViewerStore;
   const { is_moving } = storeToRefs(hybridViewerStore);
   const imageStyle = getImageStyle();
   const renderer = genericRenderWindow.value.getRenderer();
@@ -128,7 +129,7 @@ function performSetCamera(targetCameraOptions) {
       const renderWindow = genericRenderWindow.value.getRenderWindow();
       renderWindow.render();
       is_moving.value = false;
-      syncRemoteCamera();
+      performSyncRemoteCamera();
     },
   });
 }
@@ -162,7 +163,7 @@ async function performFocusCameraOnObject(id, block_ids = []) {
 }
 function performCameraOrientation(orientation) {
   const hybridViewerStore = useHybridViewerStore();
-  const { genericRenderWindow, syncRemoteCamera } = hybridViewerStore;
+  const { genericRenderWindow } = hybridViewerStore;
   const { is_moving } = storeToRefs(hybridViewerStore);
   const imageStyle = getImageStyle();
   const config = ORIENTATIONS[orientation.toLowerCase()];
@@ -196,7 +197,7 @@ function performCameraOrientation(orientation) {
     },
     onEnd: () => {
       is_moving.value = false;
-      syncRemoteCamera();
+      performSyncRemoteCamera();
     },
   });
 }

package/internal/stores/hybrid_viewer/highlight.js

@@ -14,6 +14,7 @@ function createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId) {
     currentHoverId.value = undefined;
   };
 }
+
 function performHoverHighlight(event, onResponse) {
   const hybridViewerStore = useHybridViewerStore();
   const { genericRenderWindow, hybridDb } = hybridViewerStore;
@@ -127,6 +128,7 @@ function performClearHoverHighlight() {
     params,
   });
 }
+
 function useHybridViewerHighlight() {
   const is_hover_highlight = ref(false);
   const hover_highlight_field_type = ref("CELL");
@@ -143,10 +145,12 @@ function useHybridViewerHighlight() {
     currentHoverId,
     clearHoverData,
   });
+
   function clearHoverHighlight() {
     clearHoverData();
     performClearHoverHighlight();
   }
+
   return {
     is_hover_highlight,
     hover_highlight_field_type,
@@ -156,6 +160,7 @@ function useHybridViewerHighlight() {
     hoverHighlight,
   };
 }
+
 export {
   createClearHoverData,
   createHoverHighlight,

package/internal/stores/hybrid_viewer/viewport.js

@@ -26,6 +26,7 @@ async function performResize(width, height) {
   renderWindow.render();
   await remoteRender();
 }
+
 function performClickPicking(event, containerElement) {
   const { genericRenderWindow, syncRemoteCamera } = useHybridViewerStore();
   const viewerStore = useViewerStore();
@@ -55,6 +56,7 @@ function performClickPicking(event, containerElement) {
     },
   );
 }
+
 function performSetContainer(container) {
   if (!container || !container.value) {
     return;

package/nuxt.config.js

@@ -17,7 +17,11 @@ export default defineNuxtConfig({
     },
   },
 
-  modules: [["@pinia/nuxt", { autoImports: ["defineStore", "storeToRefs"] }], "@vueuse/nuxt"],
+  modules: [
+    "vuetify-nuxt-module",
+    ["@pinia/nuxt", { autoImports: ["defineStore", "storeToRefs"] }],
+    "@vueuse/nuxt",
+  ],
   imports: {
     scan: false,
   },
@@ -33,7 +37,7 @@ export default defineNuxtConfig({
   },
 
   // ** Global CSS
-  css: ["vuetify/lib/styles/main.sass"],
+  css: ["vuetify/lib/styles/main.sass", path.resolve(__dirname, "app/assets/css/main.css")],
 
   // ** Build configuration
   build: {
@@ -43,6 +47,10 @@ export default defineNuxtConfig({
   vuetify: {
     moduleOptions: {
       prefixComposables: true,
+      enableRules: false,
+      rulesConfiguration: {
+        fromLabs: false,
+      },
     },
     vuetifyOptions: {
       defaults: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.33.4-rc.2",
+  "version": "10.34.0-rc.1",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -69,8 +69,8 @@
     "semver": "7.7.1",
     "tar": "7.5.22",
     "uuid": "11.1.0",
-    "vuetify": "3.12.5",
-    "vuetify-nuxt-module": "0.18.7",
+    "vuetify": "4.2.0",
+    "vuetify-nuxt-module": "1.0.0-rc.5",
     "ws": "8.21.2",
     "wslink": "1.12.4"
   },

package/server/utils/app_config.js

@@ -39,10 +39,12 @@ function addExtensionToConf(projectName, { extensionId, extensionPath }) {
   const projectConfig = projectConf(projectName);
   projectConfig.set(`extensions.${extensionId}.path`, extensionPath);
 }
+
 function extensionPathFromConf(projectName, extensionId) {
   const projectConfig = projectConf(projectName);
   return projectConfig.get(`extensions.${extensionId}.path`);
 }
+
 async function removeExtensionFromConf(projectName, extensionId) {
   const projectConfig = projectConf(projectName);
   const extensionArchivePath = extensionPathFromConf(projectName, extensionId);
@@ -55,6 +57,7 @@ async function removeExtensionFromConf(projectName, extensionId) {
   projectConfig.delete(`extensions.${extensionId}`);
   console.log(`${extensionId} was deleted from ${projectName} config`);
 }
+
 async function registerExtensionFile(projectName, file) {
   const StreamZipAsync = StreamZip.async;
   const zip = new StreamZipAsync({

package/server/utils/cleanup.js

@@ -134,6 +134,7 @@ async function killMicroservices(microservices) {
 function microservicesMetadatasPath(projectFolderPath) {
   return path.join(projectFolderPath, "microservices.json");
 }
+
 function projectMicroservices(projectFolderPath) {
   console.log("projectMicroservices", {
     projectFolderPath,
@@ -160,6 +161,7 @@ async function cleanupBackend(projectFolderPath) {
 function getMicroserviceByName(microservices, name) {
   return microservices.find((microservice) => microservice.name === name);
 }
+
 export {
   cleanupBackend,
   deleteFolderRecursive,

package/server/utils/microservices.js

@@ -49,6 +49,7 @@ async function runScript(
 function isPortInUseError(errorMessage) {
   return /EADDRINUSE|address already in use|port already in use/iu.test(errorMessage);
 }
+
 function backArgs(args, port) {
   const { projectFolderPath } = args;
   if (!projectFolderPath) {
@@ -72,6 +73,7 @@ function backArgs(args, port) {
   }
   return executableArgs;
 }
+
 async function runBack(execName, execPath, args = {}, attempts = 0) {
   let port = undefined;
   try {
@@ -92,6 +94,7 @@ async function runBack(execName, execPath, args = {}, attempts = 0) {
     }
   }
 }
+
 async function runViewer(execName, execPath, args = {}, attempts = 0) {
   const { projectFolderPath } = args;
   if (!projectFolderPath) {
@@ -123,6 +126,7 @@ async function runViewer(execName, execPath, args = {}, attempts = 0) {
     }
   }
 }
+
 async function runExtension(extensionId, execName, execPath, args = {}, attempts = 0) {
   let port = undefined;
   try {

package/server/utils/path.js

@@ -11,6 +11,13 @@ import { v4 as uuidv4 } from "uuid";
 import { appMode } from "@geode/opengeodeweb-front/shared/app_mode.js";
 import { commandExistsSync } from "./scripts.js";
 
+function executableName(execName) {
+  if (process.platform === "win32") {
+    return `${execName}.exe`;
+  }
+  return execName;
+}
+
 function findExecutableInDir(baseDir, execName, osExecutableName) {
   const oneFilePath = path.join(baseDir, osExecutableName);
   if (fs.existsSync(oneFilePath) && fs.statSync(oneFilePath).isFile()) {
@@ -27,12 +34,7 @@ function findExecutableInDir(baseDir, execName, osExecutableName) {
   );
   return undefined;
 }
-function executableName(execName) {
-  if (process.platform === "win32") {
-    return `${execName}.exe`;
-  }
-  return execName;
-}
+
 function executablePath(execPath, execName) {
   const osExecutableName = executableName(execName);
   const resourcesPath = process.env.RESOURCES_PATH;
@@ -62,6 +64,7 @@ function executablePath(execPath, execName) {
 
   throw new Error(`Executable not found: ${osExecutableName}`);
 }
+
 function createPath(dirPath) {
   if (!fs.existsSync(dirPath)) {
     fs.mkdirSync(dirPath, {

package/tests/unit/components/Step.nuxt.test.js

@@ -31,12 +31,21 @@ describe("step", () => {
       ],
       { geode_object_type },
     );
-    const wrapper = mount(Step, {
-      global: {
-        plugins: [vuetify],
+    const wrapper = mount(
+      {
+        components: { Step },
+        template:
+          '<v-stepper-vertical><Step :stepIndex="0" :stepperTree="stepperTree" /></v-stepper-vertical>',
+        setup() {
+          return { stepperTree: stepper_tree };
+        },
+      },
+      {
+        global: {
+          plugins: [vuetify],
+        },
       },
-      props: { stepIndex: 0, stepperTree: stepper_tree },
-    });
+    );
     expect(wrapper.exists()).toBe(true);
   });
 });