@geode/opengeodeweb-front 10.8.0-rc.1 → 10.8.0-rc.3

package/app/components/Launcher.vue

@@ -4,6 +4,13 @@ import Recaptcha from "@ogw_front/components/Recaptcha";
 import { Status } from "@ogw_front/utils/status";
 import { useInfraStore } from "@ogw_front/stores/infra";
 
+const { logo } = defineProps({
+  logo: {
+    type: String,
+    required: true,
+  },
+});
+
 const infraStore = useInfraStore();
 
 watch(
@@ -29,7 +36,7 @@ watch(
         <Recaptcha :button_color="'secondary'" />
       </v-col>
       <v-col v-else-if="infraStore.status == Status.CREATING">
-        <Loading />
+        <Loading :logo="logo" />
       </v-col>
     </v-row>
   </v-container>

package/app/components/Loading/EcoMessages.vue

@@ -0,0 +1,77 @@
+<script setup>
+const ecoMessages = [
+  {
+    icon: "mdi-leaf",
+    title: "Why the wait?",
+    message: "Your workspace starts on demand, no idle servers running 24/7.",
+  },
+  {
+    icon: "mdi-lightning-bolt-outline",
+    title: "Lower carbon footprint",
+    message: "On-demand computing uses up to 70% less energy than always-on servers.",
+  },
+  {
+    icon: "mdi-earth",
+    title: "Your choice matters",
+    message: "By using Vease, you're part of a more sustainable way to work with data.",
+  },
+];
+
+const MESSAGE_INTERVAL_MS = 3000;
+const currentMessage = ref(0);
+let interval = undefined;
+
+onMounted(() => {
+  interval = setInterval(() => {
+    currentMessage.value = (currentMessage.value + 1) % ecoMessages.length;
+  }, MESSAGE_INTERVAL_MS);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+
+<template>
+  <v-sheet color="transparent" height="160" class="position-relative overflow-visible mb-4">
+    <v-scroll-y-reverse-transition mode="out-in">
+      <v-card
+        :key="currentMessage"
+        rounded="lg"
+        class="pa-6 border mx-auto"
+        color="rgba(255, 255, 255, 0.05)"
+        elevation="0"
+        style="border-color: rgba(255, 255, 255, 0.1) !important"
+      >
+        <v-card-title
+          class="d-flex align-center ga-3 pa-0 mb-3 text-subtitle-1 font-weight-bold text-white text-wrap"
+        >
+          <v-icon
+            :icon="ecoMessages[currentMessage].icon"
+            color="white"
+            size="22"
+            style="filter: drop-shadow(0 0 6px rgba(var(--v-theme-primary), 0.6))"
+          />
+          {{ ecoMessages[currentMessage].title }}
+        </v-card-title>
+        <v-card-text
+          class="pa-0 text-body-2 text-white text-left"
+          style="opacity: 0.85; line-height: 1.7"
+        >
+          {{ ecoMessages[currentMessage].message }}
+        </v-card-text>
+      </v-card>
+    </v-scroll-y-reverse-transition>
+
+    <v-row justify="center" class="ga-3 mt-6">
+      <v-icon
+        v-for="(_, index) in ecoMessages"
+        :key="index"
+        size="10"
+        :color="index <= currentMessage ? 'white' : 'white'"
+        :icon="index === currentMessage ? 'mdi-circle' : 'mdi-circle-outline'"
+        :style="{ opacity: index <= currentMessage ? 1 : 0.25 }"
+      />
+    </v-row>
+  </v-sheet>
+</template>

package/app/components/Loading/Footer.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-card
+    color="transparent"
+    elevation="0"
+    class="mt-8 d-flex align-center justify-center ga-2 text-white"
+    style="opacity: 0.6; letter-spacing: 0.08em"
+  >
+    <v-icon icon="mdi-leaf" size="14" />
+    <v-card-text class="pa-0 text-caption font-weight-medium" style="flex: none">
+      On-demand infrastructure greener by design
+    </v-card-text>
+  </v-card>
+</template>

package/app/components/Loading/Header.vue

@@ -0,0 +1,41 @@
+<script setup>
+const { logo } = defineProps({
+  logo: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <v-row justify="center" class="mb-8">
+    <v-img
+      :src="logo"
+      height="180"
+      width="180"
+      style="filter: drop-shadow(0 0 20px rgba(var(--v-theme-primary), 0.4))"
+    />
+  </v-row>
+
+  <v-card color="transparent" elevation="0" class="mb-8 overflow-visible">
+    <v-card-title
+      class="text-h2 font-weight-black text-white text-wrap pa-0 d-block"
+      style="text-shadow: 0 0 20px rgba(255, 255, 255, 0.3)"
+    >
+      STARTING UP
+    </v-card-title>
+    <v-divider thickness="3" class="border-opacity-100 mx-auto my-4" color="primary" width="60" />
+    <v-card-subtitle
+      class="text-subtitle-2 font-weight-bold text-white ls-widest pa-0 text-wrap"
+      style="opacity: 0.9"
+    >
+      YOUR WORKSPACE IS WAKING UP...
+    </v-card-subtitle>
+  </v-card>
+</template>
+
+<style scoped>
+.ls-widest {
+  letter-spacing: 0.6em !important;
+}
+</style>

package/app/components/Loading/Progress.vue

@@ -0,0 +1,26 @@
+<script setup>
+const { progress } = defineProps({
+  progress: {
+    type: Number,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <v-progress-linear
+    color="white"
+    height="10"
+    indeterminate
+    rounded
+    bg-color="white"
+    bg-opacity="0.15"
+    class="custom-progress-glow mt-8"
+  />
+</template>
+
+<style scoped>
+.custom-progress-glow :deep(.v-progress-linear__indeterminate) {
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
+}
+</style>

package/app/components/Loading.vue

@@ -1,82 +1,78 @@
 <script setup>
-import chemin from "@ogw_front/assets/img/energy_sobriety/chemin.png";
-import collegue from "@ogw_front/assets/img/energy_sobriety/collegue.png";
-import derniere from "@ogw_front/assets/img/energy_sobriety/derniere.png";
-import etincelle from "@ogw_front/assets/img/energy_sobriety/etincelle.png";
-import geste from "@ogw_front/assets/img/energy_sobriety/geste.png";
-import lampadaire from "@ogw_front/assets/img/energy_sobriety/lampadaire.png";
-import salon from "@ogw_front/assets/img/energy_sobriety/salon.png";
-import sobene from "@ogw_front/assets/img/energy_sobriety/sobene.png";
-import socle from "@ogw_front/assets/img/energy_sobriety/socle.png";
-import vert from "@ogw_front/assets/img/energy_sobriety/vert.png";
-import ying_yang from "@ogw_front/assets/img/energy_sobriety/ying_yang.png";
+const { logo } = defineProps({
+  logo: {
+    type: String,
+    default: "",
+  },
+});
 
-import Carousel from "@ogw_front/components/Carousel";
+const show = ref(false);
+const progress = ref(0);
 
-const users_list = [
-  {
-    name: "YING YANG",
-    logo: ying_yang,
-  },
-  {
-    name: "CHEMIN",
-    logo: chemin,
-  },
-  {
-    name: "SOBRIETE ENERGETIQUE",
-    logo: sobene,
-  },
-  {
-    name: "VERT",
-    logo: vert,
-  },
-  {
-    name: "LAMPADAIRE",
-    logo: lampadaire,
-  },
-  {
-    name: "COLLEGUE",
-    logo: collegue,
-  },
-  {
-    name: "ETINCELLE",
-    logo: etincelle,
-  },
-  {
-    name: "GESTE",
-    logo: geste,
-  },
-  {
-    name: "SOCLE",
-    logo: socle,
-  },
-  {
-    name: "DERNIERE",
-    logo: derniere,
-  },
-  {
-    name: "SALON",
-    logo: salon,
-  },
-];
+let progressInterval = undefined;
+
+const PROGRESS_THRESHOLD = 90;
+const MAX_PROGRESS = 99;
+const PROGRESS_INCREMENT_SCALE = 5;
+const UPDATE_INTERVAL_MS = 500;
+const SLOW_INCREMENT = 0.5;
+
+onMounted(() => {
+  show.value = true;
+  progressInterval = setInterval(() => {
+    if (progress.value < PROGRESS_THRESHOLD) {
+      progress.value += Math.random() * PROGRESS_INCREMENT_SCALE;
+    } else if (progress.value < MAX_PROGRESS) {
+      progress.value += SLOW_INCREMENT;
+    }
+  }, UPDATE_INTERVAL_MS);
+});
+
+onUnmounted(() => {
+  if (progressInterval) {
+    clearInterval(progressInterval);
+  }
+});
 </script>
 
 <template>
-  <v-row justify="center">
-    <v-col cols="12" class="ma-3">
-      <v-card loading>
-        <v-card-title class="text-center"> Microservices are starting... </v-card-title>
-        <v-card-subtitle class="text-center"> Why do you have to wait? </v-card-subtitle>
-        <v-card-text class="text-center">
-          We start our microservices only on demand... and this takes a few minutes before you can
-          use our free app.
-          <br />
-          This is aligned with our energy sobriety policy. So be patient
-          <v-icon color="primary" size="20"> mdi-emoticon-excited-outline </v-icon>
-          <br />
-          <Carousel :items="users_list" />
-        </v-card-text>
-      </v-card>
-    </v-col>
-  </v-row>
+  <div v-bind="$attrs">
+    <Teleport to="body">
+      <div
+        v-if="show"
+        class="d-flex align-center justify-center transition-swing"
+        style="
+          position: fixed;
+          inset: 0;
+          width: 100vw;
+          height: 100vh;
+          background: rgba(0, 0, 0, 0.45);
+          backdrop-filter: blur(10px);
+          z-index: 2400;
+          pointer-events: auto;
+        "
+      >
+        <div
+          style="
+            position: absolute;
+            inset: 0;
+            background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0);
+            background-size: 40px 40px;
+            background-position: center;
+            pointer-events: none;
+          "
+        />
+
+        <div
+          class="d-flex flex-column align-center text-center"
+          style="max-width: 650px; width: 100%; padding: 0 24px; gap: 1.5rem"
+        >
+          <LoadingHeader :logo="logo" />
+          <LoadingEcoMessages />
+          <LoadingProgress :progress="progress" />
+          <LoadingFooter />
+        </div>
+      </div>
+    </Teleport>
+  </div>
 </template>

package/app/components/ObjectSelector.vue

@@ -7,7 +7,6 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 const schema = schemas.opengeodeweb_back.allowed_objects;
 
 const emit = defineEmits(["update_values", "increment_step"]);
-console.log("ObjectSelector");
 
 const { filenames } = defineProps({
   filenames: { type: Array, required: true },
@@ -78,7 +77,6 @@ async function get_allowed_objects() {
 }
 
 function set_geode_object(geode_object_type) {
-  console.log("set_geode_object", { geode_object_type });
   if (geode_object_type) {
     emit("update_values", { geode_object_type });
     emit("increment_step");

package/app/components/Viewer/BreadCrumb.vue

@@ -13,7 +13,12 @@ function goBackToFileTree() {
 
 const model_id = computed(() => treeviewStore.model_id);
 
-const metaDatas = dataStore.refItem(model_id.value);
+const metaDatas = computed(() => {
+  if (!model_id.value) {
+    return {};
+  }
+  return dataStore.refItem(model_id.value).value || {};
+});
 </script>
 
 <template>

package/app/components/Viewer/TreeComponent.vue

@@ -1,24 +1,18 @@
 <script setup>
+import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-import { compareSelections } from "@ogw_front/utils/treeview";
-
 const dataStyleStore = useDataStyleStore();
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
 
 const { id } = defineProps({ id: { type: String, required: true } });
-
 const emit = defineEmits(["show-menu"]);
 
-const items = ref([]);
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(id);
-
-watchEffect(async () => {
-  items.value = await dataStore.formatedMeshComponents(id);
-});
+const items = dataStore.refFormatedMeshComponents(id);
+const mesh_components_selection = computed(() => dataStyleStore.visibleMeshComponents(id));
 
 watch(
   mesh_components_selection,
@@ -28,6 +22,11 @@ watch(
     }
 
     const { added, removed } = compareSelections(current, previous);
+    console.log("TreeComponent selection change:", {
+      id: props.id,
+      added,
+      removed,
+    });
 
     if (added.length > 0) {
       await dataStyleStore.setModelMeshComponentsVisibility(id, added, true);

package/app/components/Viewer/Ui.vue

@@ -0,0 +1,47 @@
+<script setup>
+import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
+import ViewerTreeObjectTree from "@ogw_front/components/Viewer/Tree/ObjectTree";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const { id, displayMenu, menuStore, containerWidth, containerHeight, dataStyleStore, viewerStore } =
+  defineProps({
+    id: { type: String, required: true },
+    displayMenu: { type: Boolean, required: true },
+    menuStore: { type: Object, required: true },
+    containerWidth: { type: Number, required: true },
+    containerHeight: { type: Number, required: true },
+    dataStyleStore: { type: Object, required: true },
+    viewerStore: { type: Object, required: true },
+  });
+
+const emit = defineEmits(["show-menu", "set-id"]);
+
+async function get_viewer_id(x, y) {
+  const ids = Object.keys(dataStyleStore.styles);
+  await viewerStore.request(
+    viewer_schemas.opengeodeweb_viewer.viewer.picked_ids,
+    { x, y, ids },
+    {
+      response_function: (response) => {
+        const { array_ids } = response;
+        const [first_id] = array_ids;
+        emit("set-id", first_id);
+      },
+    },
+  );
+}
+
+defineExpose({ get_viewer_id });
+</script>
+
+<template>
+  <ViewerTreeObjectTree @show-menu="(args) => emit('show-menu', args)" />
+  <ViewerContextMenu
+    v-if="displayMenu"
+    :id="menuStore.current_id || id"
+    :x="menuStore.menuX"
+    :y="menuStore.menuY"
+    :container-width="containerWidth"
+    :container-height="containerHeight"
+  />
+</template>

package/app/stores/app.js

@@ -1,3 +1,4 @@
+// Local imports
 import { api_fetch } from "@ogw_internal/utils/api_fetch.js";
 import { upload_file } from "@ogw_internal/utils/upload_file.js";
 

package/app/stores/data.js

@@ -12,8 +12,12 @@ const viewer_generic_schemas = viewer_schemas.opengeodeweb_viewer.generic;
 export const useDataStore = defineStore("data", () => {
   const viewerStore = useViewerStore();
 
-  function item(id) {
-    return database.data.get(id);
+  async function item(id) {
+    const data_item = await database.data.get(id);
+    if (!data_item) {
+      throw new Error(`Item not found: ${id}`);
+    }
+    return data_item;
   }
 
   function refItem(id) {
@@ -62,6 +66,13 @@ export const useDataStore = defineStore("data", () => {
       }));
   }
 
+  function refFormatedMeshComponents(id) {
+    return useObservable(
+      liveQuery(() => formatedMeshComponents(id)),
+      { initialValue: [] },
+    );
+  }
+
   async function meshComponentType(modelId, geode_id) {
     const component = await database.model_components.where({ id: modelId, geode_id }).first();
     return component?.type;
@@ -176,7 +187,7 @@ export const useDataStore = defineStore("data", () => {
       .where("[id+geode_id]")
       .anyOf(meshComponentGeodeIds.map((geode_id) => [modelId, geode_id]))
       .toArray();
-    return components.map((component) => component.viewer_id);
+    return components.map((component) => Number.parseInt(component.viewer_id, 10));
   }
 
   async function exportStores() {
@@ -198,6 +209,7 @@ export const useDataStore = defineStore("data", () => {
     refItem,
     meshComponentType,
     formatedMeshComponents,
+    refFormatedMeshComponents,
     registerObject,
     deregisterObject,
     addItem,
@@ -210,6 +222,7 @@ export const useDataStore = defineStore("data", () => {
     getSurfacesGeodeIds,
     getBlocksGeodeIds,
     getMeshComponentsViewerIds,
+
     exportStores,
     importStores,
     clear,

package/app/stores/data_style.js

@@ -1,3 +1,4 @@
+import { database } from "@ogw_internal/database/database.js";
 import { getDefaultStyle } from "@ogw_front/utils/default_styles";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
@@ -10,16 +11,13 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   const modelStyleStore = useModelStyle();
   const dataStore = useDataStore();
 
-  function addDataStyle(id, geode_object) {
-    dataStyleState.styles[id] = getDefaultStyle(geode_object);
+  async function addDataStyle(id, geode_object) {
+    await database.data_style.put(structuredClone({ id, ...getDefaultStyle(geode_object) }));
   }
 
   async function setVisibility(id, visibility) {
     const item = await dataStore.item(id);
-    const viewer_type = item?.viewer_type;
-    if (!viewer_type) {
-      throw new Error(`Item not found or not loaded: ${id}`);
-    }
+    const { viewer_type } = item;
 
     if (viewer_type === "mesh") {
       return meshStyleStore.setMeshVisibility(id, visibility);
@@ -32,10 +30,8 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
 
   async function applyDefaultStyle(id) {
     const item = await dataStore.item(id);
-    const viewer_type = item?.viewer_type;
-    if (!viewer_type) {
-      throw new Error(`Item not found or not loaded: ${id}`);
-    }
+    const { viewer_type } = item;
+
     if (viewer_type === "mesh") {
       return meshStyleStore.applyMeshStyle(id);
     }
@@ -46,29 +42,36 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   }
 
   function exportStores() {
-    return { styles: dataStyleState.styles };
+    return {
+      styles: dataStyleState.styles,
+      componentStyles: dataStyleState.componentStyles,
+    };
   }
 
-  function importStores(snapshot) {
-    const stylesSnapshot = snapshot.styles || {};
-    for (const id of Object.keys(dataStyleState.styles)) {
-      delete dataStyleState.styles[id];
-    }
-    for (const [id, style] of Object.entries(stylesSnapshot)) {
-      dataStyleState.styles[id] = style;
-    }
+  async function importStores(snapshot) {
+    const stylesSnapshot = snapshot.styles;
+    const componentStylesSnapshot = snapshot.componentStyles;
+
+    await dataStyleState.clear();
+
+    const style_promises = Object.entries(stylesSnapshot).map(([id, style]) =>
+      database.data_style.put(structuredClone({ id, ...style })),
+    );
+    const component_style_promises = Object.values(componentStylesSnapshot).map((style) =>
+      database.model_component_datastyle.put(structuredClone(style)),
+    );
+
+    await Promise.all([...style_promises, ...component_style_promises]);
   }
 
   function applyAllStylesFromState() {
-    const ids = Object.keys(dataStyleState.styles || {});
+    const ids = Object.keys(dataStyleState.styles);
     const promises = ids.map(async (id) => {
       const meta = await dataStore.item(id);
-      const viewerType = meta?.viewer_type;
-      const style = dataStyleState.styles[id];
-      if (style && viewerType === "mesh") {
+      const viewerType = meta.viewer_type;
+      if (viewerType === "mesh") {
         return meshStyleStore.applyMeshStyle(id);
-      }
-      if (style && viewerType === "model") {
+      } else if (viewerType === "model") {
         return modelStyleStore.applyModelStyle(id);
       }
     });

package/app/stores/hybrid_viewer.js

@@ -70,7 +70,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       return;
     }
     const value = await dataStore.item(id);
-    console.log("hybridViewerStore.addItem", { value });
     const reader = vtkXMLPolyDataReader();
     const textEncoder = new TextEncoder();
     await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));

package/app/utils/file_import_workflow.js

@@ -30,6 +30,7 @@ async function importWorkflow(files) {
 function buildImportItemFromPayloadApi(value, geode_object_type) {
   console.log("buildImportItemFromPayloadApi", { value, geode_object_type });
   return {
+    geode_object_type,
     ...value,
   };
 }

package/app/utils/local/cleanup.js

@@ -133,6 +133,10 @@ function projectMicroservices(projectFolderPath) {
 }
 
 async function cleanupBackend(projectFolderPath) {
+  if (!fs.existsSync(projectFolderPath)) {
+    console.log(`Folder ${projectFolderPath} does not exist. Skipping cleanup.`);
+    return;
+  }
   const microservices = projectMicroservices(projectFolderPath);
   await killMicroservices(microservices);
   await deleteFolderRecursive(projectFolderPath);
@@ -142,4 +146,4 @@ function microservicesMetadatasPath(projectFolderPath) {
   return path.join(projectFolderPath, "microservices.json");
 }
 
-export { cleanupBackend, microservicesMetadatasPath };
+export { cleanupBackend, microservicesMetadatasPath, projectMicroservices };

package/app/utils/local/microservices.js

@@ -11,7 +11,7 @@ import pTimeout from "p-timeout";
 // Local imports
 import { commandExistsSync, waitForReady } from "./scripts.js";
 import { executableName, executablePath } from "./path.js";
-import { microservicesMetadatasPath } from "./cleanup.js";
+import { microservicesMetadatasPath, projectMicroservices } from "./cleanup.js";
 
 const DEFAULT_TIMEOUT_SECONDS = 30;
 const MILLISECONDS_PER_SECOND = 1000;
@@ -112,18 +112,6 @@ async function runViewer(execName, execPath, args = {}) {
   return port;
 }
 
-function projectMicroservices(projectFolderPath) {
-  console.log("projectMicroservices", { projectFolderPath });
-  const filePath = microservicesMetadatasPath(projectFolderPath);
-
-  if (!fs.existsSync(filePath)) {
-    const microservicesMetadatas = { microservices: [] };
-    fs.writeFileSync(filePath, JSON.stringify(microservicesMetadatas, undefined, 2), "utf8");
-  }
-  const content = JSON.parse(fs.readFileSync(filePath, "utf8"));
-  return content.microservices;
-}
-
 function addMicroserviceMetadatas(projectFolderPath, serviceObj) {
   const microservices = projectMicroservices(projectFolderPath);
   if (serviceObj.type === "back") {