@geode/opengeodeweb-front 10.6.2 → 10.6.3-rc.1

package/app/components/ObjectSelector.vue

@@ -1,105 +1,90 @@
 <script setup>
-  import FetchingData from "@ogw_front/components/FetchingData.vue"
-  import { geode_objects } from "@ogw_front/assets/geode_objects"
-  import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
-  import { useGeodeStore } from "@ogw_front/stores/geode"
+import FetchingData from "@ogw_front/components/FetchingData.vue";
+import { geode_objects } from "@ogw_front/assets/geode_objects";
+import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
+import { useGeodeStore } from "@ogw_front/stores/geode";
 
-  const schema = schemas.opengeodeweb_back.allowed_objects
+const schema = schemas.opengeodeweb_back.allowed_objects;
 
-  const emit = defineEmits(["update_values", "increment_step"])
-  console.log("ObjectSelector")
+const emit = defineEmits(["update_values", "increment_step"]);
+console.log("ObjectSelector");
 
-  const { filenames } = defineProps({
-    filenames: { type: Array, required: true },
-  })
+const { filenames } = defineProps({
+  filenames: { type: Array, required: true },
+});
 
-  const geodeStore = useGeodeStore()
+const geodeStore = useGeodeStore();
 
-  const loading = ref(false)
-  const allowed_objects = ref({})
-  const toggle_loading = useToggle(loading)
+const loading = ref(false);
+const allowed_objects = ref({});
+const toggle_loading = useToggle(loading);
 
-  function select_geode_object(object_map) {
-    const object_keys = Object.keys(object_map)
-    if (!object_keys.length) {
-      return undefined
-    }
-    if (
-      object_keys.length === 1 &&
-      object_map[object_keys[0]].is_loadable > 0
-    ) {
-      return object_keys[0]
-    }
-    const highest_load_score = Math.max(
-      ...object_keys.map((key) => object_map[key].is_loadable),
-    )
-    if (highest_load_score <= 0) {
-      return undefined
-    }
-    const best_score_objects = object_keys.filter(
-      (key) => object_map[key].is_loadable === highest_load_score,
-    )
-    if (best_score_objects.length === 1) {
-      return best_score_objects[0]
-    }
-    const highest_priority = Math.max(
-      ...best_score_objects.map(
-        (key) => object_map[key].object_priority ?? -Infinity,
-      ),
-    )
-    const best_priority_objects = best_score_objects.filter(
-      (key) => object_map[key].object_priority === highest_priority,
-    )
-    if (highest_priority !== -Infinity && best_priority_objects.length === 1) {
-      return best_priority_objects[0]
-    }
-    return undefined
+function select_geode_object(object_map) {
+  const object_keys = Object.keys(object_map);
+  if (object_keys.length === 0) {
+    return undefined;
+  }
+  if (object_keys.length === 1 && object_map[object_keys[0]].is_loadable > 0) {
+    return object_keys[0];
+  }
+  const highest_load_score = Math.max(...object_keys.map((key) => object_map[key].is_loadable));
+  if (highest_load_score <= 0) {
+    return undefined;
+  }
+  const best_score_objects = object_keys.filter(
+    (key) => object_map[key].is_loadable === highest_load_score,
+  );
+  if (best_score_objects.length === 1) {
+    return best_score_objects[0];
   }
+  const highest_priority = Math.max(
+    ...best_score_objects.map((key) => object_map[key].object_priority ?? -Infinity),
+  );
+  const best_priority_objects = best_score_objects.filter(
+    (key) => object_map[key].object_priority === highest_priority,
+  );
+  if (highest_priority !== -Infinity && best_priority_objects.length === 1) {
+    return best_priority_objects[0];
+  }
+  return undefined;
+}
 
-  async function get_allowed_objects() {
-    toggle_loading()
-    allowed_objects.value = {}
+async function get_allowed_objects() {
+  toggle_loading();
+  allowed_objects.value = {};
 
-    const promise_array = filenames.map((filename) =>
-      geodeStore.request(schema, { filename }),
-    )
-    const responses = await Promise.all(promise_array)
-    const allowed_objects_list = responses.map(
-      (response) => response.allowed_objects,
-    )
-    const all_keys = [...new Set(allowed_objects_list.flatMap(Object.keys))]
-    const common_keys = all_keys.filter((key) =>
-      allowed_objects_list.every((obj) => key in obj),
-    )
-    const final_object = {}
-    for (const key of common_keys) {
-      const load_scores = allowed_objects_list.map(
-        (obj) => obj[key].is_loadable,
-      )
-      const priorities = allowed_objects_list
-        .map((obj) => obj[key].object_priority)
-        .filter((priority) => priority !== undefined && priority !== null)
-      final_object[key] = { is_loadable: Math.min(...load_scores) }
-      if (priorities.length > 0) {
-        final_object[key].object_priority = Math.max(...priorities)
-      }
-    }
-    allowed_objects.value = final_object
-    const selected_object = select_geode_object(final_object)
-    if (selected_object) {
-      set_geode_object(selected_object)
+  const promise_array = filenames.map((filename) => geodeStore.request(schema, { filename }));
+  const responses = await Promise.all(promise_array);
+  const allowed_objects_list = responses.map((response) => response.allowed_objects);
+  const all_keys = [...new Set(allowed_objects_list.flatMap((obj) => Object.keys(obj)))];
+  const common_keys = all_keys.filter((key) => allowed_objects_list.every((obj) => key in obj));
+  const final_object = {};
+  for (const key of common_keys) {
+    const load_scores = allowed_objects_list.map((obj) => obj[key].is_loadable);
+    const priorities = allowed_objects_list
+      .map((obj) => obj[key].object_priority)
+      .filter((priority) => priority !== undefined && priority !== null);
+    final_object[key] = { is_loadable: Math.min(...load_scores) };
+    if (priorities.length > 0) {
+      final_object[key].object_priority = Math.max(...priorities);
     }
-    toggle_loading()
   }
+  allowed_objects.value = final_object;
+  const selected_object = select_geode_object(final_object);
+  if (selected_object) {
+    set_geode_object(selected_object);
+  }
+  toggle_loading();
+}
 
-  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")
-    }
+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");
   }
-  await get_allowed_objects()
+}
+await get_allowed_objects();
 </script>
 
 <template>
@@ -140,10 +125,7 @@
     <v-card class="card" variant="tonal" rounded>
       <v-card-text>
         This file format isn't supported! Please check the
-        <a
-          href="https://docs.geode-solutions.com/guides/formats/"
-          target="_blank"
-        >
+        <a href="https://docs.geode-solutions.com/guides/formats/" target="_blank">
           supported file formats documentation</a
         >
         for more information
@@ -153,12 +135,12 @@
 </template>
 
 <style scoped>
-  .disabled {
-    filter: opacity(0.7);
-    cursor: pointer;
-  }
+.disabled {
+  filter: opacity(0.7);
+  cursor: pointer;
+}
 
-  .disabled div {
-    cursor: not-allowed;
-  }
+.disabled div {
+  cursor: not-allowed;
+}
 </style>

package/app/components/PackagesVersions.vue

@@ -1,46 +1,43 @@
 <script setup>
-  import { Status } from "@ogw_front/utils/status"
-  import { useGeodeStore } from "@ogw_front/stores/geode"
+import { Status } from "@ogw_front/utils/status";
+import { useGeodeStore } from "@ogw_front/stores/geode";
 
-  const { schema } = defineProps({
-    schema: { type: Object, required: true },
-  })
+const { schema } = defineProps({
+  schema: { type: Object, required: true },
+});
 
-  const geodeStore = useGeodeStore()
-  const packages_versions = ref([])
+const geodeStore = useGeodeStore();
+const packages_versions = ref([]);
 
-  async function get_packages_versions() {
-    await geodeStore.request(
-      schema,
-      {},
-      {
-        response_function: (response) => {
-          packages_versions.value = response.versions
-        },
+async function get_packages_versions() {
+  await geodeStore.request(
+    schema,
+    {},
+    {
+      response_function: (response) => {
+        packages_versions.value = response.versions;
       },
-    )
-  }
-
-  watch(
-    () => geodeStore.status,
-    (value) => {
-      if (value === Status.CONNECTED) {
-        get_packages_versions()
-      }
     },
-  )
+  );
+}
+
+watch(
+  () => geodeStore.status,
+  (value) => {
+    if (value === Status.CONNECTED) {
+      get_packages_versions();
+    }
+  },
+);
 
-  await get_packages_versions()
+await get_packages_versions();
 </script>
 
 <template>
   <v-container>
     This tool uses our Open-Source codes
     <v-tooltip location="end">
-      <span
-        v-for="package_version in packages_versions"
-        :key="package_version.package"
-      >
+      <span v-for="package_version in packages_versions" :key="package_version.package">
         {{ package_version.package }} v{{ package_version.version }}
         <br />
       </span>

package/app/components/Recaptcha.vue

@@ -1,68 +1,66 @@
 <script setup>
-  import { appMode } from "@ogw_front/utils/local/app_mode"
-  import { useInfraStore } from "@ogw_front/stores/infra"
+import { appMode } from "@ogw_front/utils/local/app_mode";
+import { useInfraStore } from "@ogw_front/stores/infra";
 
-  const RESPONSE_STATUS_OK = 200
+const RESPONSE_STATUS_OK = 200;
 
-  const { button_label, button_color, color } = defineProps({
-    button_label: {
-      type: String,
-      required: false,
-      default: "Launch the app",
-    },
-    button_color: {
-      type: String,
-      required: false,
-      default: "white",
-    },
-    color: {
-      type: String,
-      required: false,
-    },
-  })
-  const infraStore = useInfraStore()
-  const name = ref("")
-  const email = ref("")
-  const launch = ref(false)
-  const valid = ref(false)
-  const emailRules = [
-    (value) => {
-      if (value) {
-        return true
-      }
-      return "E-mail is required."
-    },
-    (value) => {
-      if (/.+@.+\..+/.test(value)) {
-        return true
-      }
-      return "E-mail must be valid."
-    },
-  ]
-
-  onMounted(() => {
-    if (import.meta.client) {
-      if (
-        process.env.NODE_ENV !== "production" ||
-        infraStore.app_mode !== appMode.CLOUD
-      ) {
-        infraStore.$patch({ is_captcha_validated: true })
-      }
+const { button_label, button_color, color } = defineProps({
+  button_label: {
+    type: String,
+    required: false,
+    default: "Launch the app",
+  },
+  button_color: {
+    type: String,
+    required: false,
+    default: "white",
+  },
+  color: {
+    type: String,
+    required: false,
+  },
+});
+const infraStore = useInfraStore();
+const name = ref("");
+const email = ref("");
+const launch = ref(false);
+const valid = ref(false);
+const emailRules = [
+  (value) => {
+    if (value) {
+      return true;
+    }
+    return "E-mail is required.";
+  },
+  (value) => {
+    if (/.+@.+\..+/.test(value)) {
+      return true;
     }
-  })
-  async function submit_recaptcha() {
-    const response = await $fetch.raw(`/.netlify/functions/recaptcha`, {
-      method: "POST",
-      body: {
-        name: name.value,
-        email: email.value,
-        launch: launch.value,
-      },
-    })
-    infraStore.$patch({
-      is_captcha_validated: response.status === RESPONSE_STATUS_OK,
-    })
+    return "E-mail must be valid.";
+  },
+];
+
+onMounted(() => {
+  if (
+    import.meta.client &&
+    (process.env.NODE_ENV !== "production" || infraStore.app_mode !== appMode.CLOUD)
+  ) {
+    infraStore.$patch({ is_captcha_validated: true });
   }
+});
+async function submit_recaptcha() {
+  const response = await $fetch.raw(`/.netlify/functions/recaptcha`, {
+    method: "POST",
+    body: {
+      name: name.value,
+      email: email.value,
+      launch: launch.value,
+    },
+  });
+  infraStore.$patch({
+    is_captcha_validated: response.status === RESPONSE_STATUS_OK,
+  });
+}
 </script>
 
 <template>
@@ -77,12 +75,7 @@
           </VRow>
           <VRow>
             <VCol>
-              <VTextField
-                v-model="email"
-                :rules="emailRules"
-                label="E-mail"
-                required
-              />
+              <VTextField v-model="email" :rules="emailRules" label="E-mail" required />
             </VCol>
           </VRow>
           <VRow>
@@ -96,11 +89,7 @@
   </VRow>
   <VRow align="center" justify="center">
     <VCol cols="4" class="d-flex justify-center align-center">
-      <VBtn
-        :text="button_label"
-        :color="color || button_color"
-        @click="submit_recaptcha"
-      />
+      <VBtn :text="button_label" :color="color || button_color" @click="submit_recaptcha" />
     </VCol>
   </VRow>
 </template>

package/app/components/RemoteRenderingView.vue

@@ -1,102 +1,102 @@
 <script setup>
-  import { useElementSize, useWindowSize } from "@vueuse/core"
-  import { Status } from "@ogw_front/utils/status"
-  import ViewToolbar from "@ogw_front/components/ViewToolbar"
-  import { useViewerStore } from "@ogw_front/stores/viewer"
-  import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
-  import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView"
-
-  const { viewId } = defineProps({
-    viewId: { type: String, default: "-1" },
-  })
-
-  const viewerStore = useViewerStore()
-  const viewer = useTemplateRef("viewer")
-  const { width, height } = useElementSize(viewer)
-
-  const { width: windowWidth, height: windowHeight } = useWindowSize()
-
-  function get_x_y(event) {
-    if (viewerStore.picking_mode.value === true) {
-      const { offsetX, offsetY } = event
-      viewerStore.set_picked_point(offsetX, offsetY)
-      viewerStore.request(
-        viewer_schemas.opengeodeweb_viewer.viewer.get_point_position,
-        { x: offsetX, y: offsetY },
-      )
-    }
+import { useElementSize, useWindowSize } from "@vueuse/core";
+import { Status } from "@ogw_front/utils/status";
+import ViewToolbar from "@ogw_front/components/ViewToolbar";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView";
+
+const { viewId } = defineProps({
+  viewId: { type: String, default: "-1" },
+});
+
+const viewerStore = useViewerStore();
+const viewer = useTemplateRef("viewer");
+const { width, height } = useElementSize(viewer);
+
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+
+function get_x_y(event) {
+  if (viewerStore.picking_mode.value === true) {
+    const { offsetX, offsetY } = event;
+    viewerStore.set_picked_point(offsetX, offsetY);
+    viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.get_point_position, {
+      x: offsetX,
+      y: offsetY,
+    });
   }
-
-  const connected = ref(false)
-  // oxlint-disable-next-line import/no-named-as-default-member
-  const view = vtkRemoteView.newInstance({
-    rpcWheelEvent: "viewport.mouse.zoom.wheel",
-  })
-
-  if (location.hostname.split(".")[0] === "localhost") {
-    view.setInteractiveRatio(1)
+}
+
+const connected = ref(false);
+// oxlint-disable-next-line import/no-named-as-default-member
+const view = vtkRemoteView.newInstance({
+  rpcWheelEvent: "viewport.mouse.zoom.wheel",
+});
+
+if (location.hostname.split(".")[0] === "localhost") {
+  view.setInteractiveRatio(1);
+}
+
+function resize() {
+  if (view) {
+    view.getCanvasView().setSize(0, 0);
+    view.resize();
   }
-
-  function resize() {
-    if (view) {
-      view.getCanvasView().setSize(0, 0)
-      view.resize()
+}
+
+watch([windowWidth, windowHeight], () => {
+  resize();
+});
+
+watch(
+  () => viewerStore.picking_mode,
+  (value) => {
+    const cursor = value ? "crosshair" : "pointer";
+    view.getCanvasView().setCursor(cursor);
+  },
+);
+
+watch([width, height], () => {
+  resize();
+});
+
+watch(
+  () => viewerStore.client,
+  () => {
+    connect();
+  },
+);
+
+watch(
+  () => props.viewId,
+  (id) => {
+    if (connected.value) {
+      view.setViewId(id);
+      view.render();
     }
-  }
+  },
+);
 
-  watch([windowWidth, windowHeight], () => {
-    resize()
-  })
-
-  watch(
-    () => viewerStore.picking_mode,
-    (value) => {
-      const cursor = value ? "crosshair" : "pointer"
-      view.getCanvasView().setCursor(cursor)
-    },
-  )
-
-  watch([width, height], () => {
-    resize()
-  })
-
-  watch(
-    () => viewerStore.client,
-    () => {
-      connect()
-    },
-  )
-
-  watch(
-    () => props.viewId,
-    (id) => {
-      if (connected.value) {
-        view.setViewId(id)
-        view.render()
-      }
-    },
-  )
-
-  function connect() {
-    if (viewerStore.status !== Status.CONNECTED) {
-      return
-    }
-    const session = viewerStore.client.getConnection().getSession()
-    view.setSession(session)
-    view.setViewId(props.viewId)
-    connected.value = true
-    view.render()
+function connect() {
+  if (viewerStore.status !== Status.CONNECTED) {
+    return;
   }
-
-  onMounted(async () => {
-    if (import.meta.client) {
-      window.addEventListener("resize", resize)
-      await nextTick()
-      view.setContainer(viewer.value.$el)
-      connect()
-      resize()
-    }
-  })
+  const session = viewerStore.client.getConnection().getSession();
+  view.setSession(session);
+  view.setViewId(props.viewId);
+  connected.value = true;
+  view.render();
+}
+
+onMounted(async () => {
+  if (import.meta.client) {
+    window.addEventListener("resize", resize);
+    await nextTick();
+    view.setContainer(viewer.value.$el);
+    connect();
+    resize();
+  }
+});
 </script>
 
 <template>
@@ -106,13 +106,7 @@
       <slot name="ui"></slot>
       <v-col
         ref="viewer"
-        style="
-          overflow: hidden;
-          position: relative;
-          z-index: 0;
-          height: 100%;
-          width: 100%;
-        "
+        style="overflow: hidden; position: relative; z-index: 0; height: 100%; width: 100%"
         class="pa-0"
         @click="get_x_y"
         @keydown.esc="viewerStore.toggle_picking_mode(false)"
@@ -122,12 +116,12 @@
 </template>
 
 <style scoped>
-  .list {
-    position: absolute;
-    z-index: 2;
-    left: 0;
-    top: 0;
-    background-color: transparent;
-    border-radius: 16px;
-  }
+.list {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  top: 0;
+  background-color: transparent;
+  border-radius: 16px;
+}
 </style>