@geode/opengeodeweb-front 10.3.1 → 10.3.2-rc.2

package/app/components/DragAndDrop.vue

@@ -1,13 +1,7 @@
 <script setup>
-  const {
-    multiple,
-    accept,
-    loading,
-    showExtensions,
-    idleText,
-    dropText,
-    loadingText,
-  } = defineProps({
+  import GlassCard from "@ogw_front/components/GlassCard"
+
+  const props = defineProps({
     multiple: { type: Boolean, default: false },
     accept: { type: String, default: "" },
     loading: { type: Boolean, default: false },
@@ -41,29 +35,26 @@
 
 <template>
   <v-hover v-slot="{ isHovering, props: hoverProps }">
-    <v-card
+    <GlassCard
       v-bind="hoverProps"
-      class="text-center cursor-pointer"
+      class="text-center cursor-pointer overflow-hidden border-opacity-10 border-white"
       :class="{
         'elevation-4': isHovering || isDragging,
         'elevation-0': !(isHovering || isDragging),
       }"
       :style="{
         position: 'relative',
-        overflow: 'hidden',
-        transition: 'all 0.3s ease',
+        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         background:
           isHovering || isDragging
-            ? 'rgba(var(--v-theme-primary), 0.05)'
-            : 'rgba(0, 0, 0, 0.02)',
-        border: `2px dashed ${
-          isHovering || isDragging ? 'rgb(var(--v-theme-primary))' : '#e0e0e0'
-        }`,
+            ? 'rgba(255, 255, 255, 0.08) !important'
+            : 'rgba(255, 255, 255, 0.03) !important',
         transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
         pointerEvents: loading ? 'none' : 'auto',
         opacity: loading ? 0.6 : 1,
       }"
-      rounded="xl"
+      variant="panel"
+      padding="pa-0"
       @click="triggerFileDialog"
       @dragover.prevent="isDragging = true"
       @dragleave.prevent="isDragging = false"
@@ -72,8 +63,9 @@
       <v-card-text class="pa-8">
         <v-sheet
           class="mx-auto mb-6 d-flex align-center justify-center"
-          :color="isHovering || isDragging ? 'primary' : 'grey-lighten-2'"
-          :elevation="isHovering || isDragging ? 4 : 0"
+          :color="
+            isHovering || isDragging ? 'white' : 'rgba(255, 255, 255, 0.1)'
+          "
           rounded="circle"
           width="80"
           height="80"
@@ -82,16 +74,13 @@
           <v-icon
             :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
             size="40"
-            :color="isHovering || isDragging ? 'white' : 'grey-darken-1'"
+            :color="isHovering || isDragging ? 'primary' : 'white'"
             :class="{ rotating: loading }"
           />
         </v-sheet>
 
         <v-card-title
-          class="text-h6 font-weight-bold justify-center pa-0 mb-1"
-          :class="
-            isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'
-          "
+          class="text-h6 font-weight-bold justify-center pa-0 mb-1 text-white"
           style="transition: color 0.3s ease"
         >
           {{ loading ? loadingText : isDragging ? dropText : idleText }}
@@ -110,7 +99,7 @@
         :accept="accept"
         @change="handleFileSelect"
       />
-    </v-card>
+    </GlassCard>
   </v-hover>
 </template>
 

package/app/components/FileUploader.vue

@@ -81,43 +81,60 @@
     @files-selected="processSelectedFiles"
   />
 
-  <v-card-text v-if="internal_files.length" class="mt-4">
-    <v-sheet class="d-flex align-center mb-3" color="transparent">
-      <v-icon icon="mdi-file-check" class="mr-2" color="primary" />
-      <span class="text-subtitle-2 font-weight-bold"> Selected Files </span>
-      <v-chip size="x-small" class="ml-2" color="primary" variant="flat">
+  <v-card-text v-if="internal_files.length" class="mt-6">
+    <v-sheet class="d-flex align-center mb-4" color="transparent">
+      <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
+      <span class="text-subtitle-1 font-weight-bold text-white">
+        Selected Files
+      </span>
+      <v-chip
+        size="small"
+        class="ml-3 bg-white-opacity-10"
+        color="white"
+        variant="flat"
+      >
         {{ internal_files.length }}
       </v-chip>
     </v-sheet>
 
-    <v-sheet class="d-flex flex-wrap gap-2" color="transparent">
+    <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
       <v-chip
         v-for="(file, index) in internal_files"
         :key="index"
         closable
-        size="small"
-        color="primary"
-        variant="tonal"
-        class="font-weight-medium"
+        size="default"
+        color="white"
+        variant="outlined"
+        class="font-weight-medium glass-ui border-opacity-10 px-4"
+        style="background: rgba(255, 255, 255, 0.05) !important"
         @click:close="removeFile(index)"
       >
-        <v-icon start size="16">mdi-file-outline</v-icon>
-        {{ file.name }}
+        <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
+        <span class="text-white">{{ file.name }}</span>
+        <template #close>
+          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
+            >mdi-close-circle</v-icon
+          >
+        </template>
       </v-chip>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions v-if="!auto_upload && internal_files.length > 0">
+  <v-card-actions
+    v-if="!auto_upload && internal_files.length"
+    class="mt-6 pa-0"
+  >
     <v-btn
       color="primary"
-      variant="elevated"
+      variant="flat"
       size="large"
-      rounded="lg"
+      rounded="xl"
       :loading="loading"
-      class="text-none px-3 font-weight-bold"
+      class="text-none px-6 font-weight-bold custom-upload-btn"
+      block
       @click="upload_files"
     >
-      <v-icon start size="20">mdi-cloud-upload-outline</v-icon>
+      <v-icon start size="22">mdi-cloud-upload</v-icon>
       Upload {{ internal_files.length }} file<span
         v-if="internal_files.length > 1"
         >s</span

package/app/components/GlassCard.vue

@@ -0,0 +1,50 @@
+<script setup>
+  defineProps({
+    variant: {
+      type: String,
+      default: "panel",
+      validator: (v) => ["panel", "ui"].includes(v),
+    },
+    rounded: { type: String, default: "xl" },
+    padding: { type: String, default: "pa-6" },
+    theme: { type: String, default: null },
+  })
+
+  const attrs = useAttrs()
+  const isInteractive = computed(() => !!attrs.onClick)
+</script>
+
+<template>
+  <v-card
+    v-bind="$attrs"
+    @mousedown.stop
+    @click.stop
+    @dblclick.stop
+    @wheel.stop
+    @contextmenu.stop
+    flat
+    :ripple="isInteractive"
+    :theme="theme || (variant === 'panel' ? 'dark' : undefined)"
+    :class="[
+      variant === 'panel' ? 'glass-panel' : 'glass-ui',
+      'border-thin',
+      `rounded-${rounded}`,
+      padding,
+      { 'cursor-default': !isInteractive },
+    ]"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </v-card>
+</template>
+
+<style scoped>
+  .border-thin {
+    border-style: solid !important;
+  }
+
+  .cursor-default {
+    cursor: default !important;
+  }
+</style>

package/app/components/HybridRenderingView.vue

@@ -1,6 +1,5 @@
 <script setup>
   import VeaseViewToolbar from "@ogw_front/components/VeaseViewToolbar"
-
   import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
   import { useViewerStore } from "@ogw_front/stores/viewer"
 
@@ -52,7 +51,7 @@
 
 <template>
   <ClientOnly>
-    <div class="fill-height" style="position: relative">
+    <div class="fill-height" style="position: relative; height: 100%">
       <VeaseViewToolbar />
       <slot name="ui"></slot>
       <v-col

package/app/components/RemoteRenderingView.vue

@@ -101,7 +101,7 @@
 
 <template>
   <ClientOnly>
-    <div style="position: relative; width: 100%; height: calc(100vh - 80px)">
+    <div style="position: relative; width: 100%; height: 100%">
       <ViewToolbar />
       <slot name="ui"></slot>
       <v-col

package/app/components/Screenshot.vue

@@ -1,5 +1,6 @@
 <script setup>
   import fileDownload from "js-file-download"
+  import GlassCard from "@ogw_front/components/GlassCard"
   import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
 
   import { useViewerStore } from "@ogw_front/stores/viewer"
@@ -46,49 +47,59 @@
   })
 </script>
 <template>
-  <OptionCard
+  <GlassCard
     v-if="show_dialog"
+    @click.stop
     title="Take a screenshot"
     :width="width"
-    class="position-absolute"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute elevation-24"
     style="z-index: 2; top: 90px; right: 55px"
   >
-    <v-container>
-      <v-row>
-        <v-col cols="8" class="py-0">
-          <v-text-field v-model="filename" label="File name"></v-text-field>
-        </v-col>
-        <v-col cols="4" class="py-0">
-          <v-select
-            v-model="output_extension"
-            :items="output_extensions"
-            label="Extension"
-            required
-          />
-        </v-col>
-      </v-row>
+    <v-card-text class="pa-5">
+      <v-container>
+        <v-row>
+          <v-col cols="8" class="py-0">
+            <v-text-field v-model="filename" label="File name"></v-text-field>
+          </v-col>
+          <v-col cols="4" class="py-0">
+            <v-select
+              v-model="output_extension"
+              :items="output_extensions"
+              label="Extension"
+              required
+            />
+          </v-col>
+        </v-row>
 
-      <v-row>
-        <v-col cols="12" class="py-0">
-          <v-switch
-            v-model="include_background"
-            :disabled="output_extension !== 'png'"
-            label="Include background"
-            inset
-          ></v-switch>
-        </v-col>
-      </v-row>
-    </v-container>
+        <v-row>
+          <v-col cols="12" class="py-0">
+            <v-switch
+              v-model="include_background"
+              :disabled="output_extension !== 'png'"
+              label="Include background"
+              inset
+            ></v-switch>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
 
     <template #actions>
-      <v-btn variant="text" color="white" @click="emit('close')">Close</v-btn>
-      <v-btn
-        variant="outlined"
-        :disabled="!filename || !output_extension"
-        color="white"
-        @click="takeScreenshot()"
-        >Screenshot</v-btn
-      >
+      <v-card-actions class="justify-center pb-4">
+        <v-btn variant="text" color="primary" @click="emit('close')"
+          >Close</v-btn
+        >
+        <v-btn
+          variant="outlined"
+          :disabled="!filename || !output_extension"
+          color="primary"
+          @click="takeScreenshot()"
+          >Screenshot</v-btn
+        >
+      </v-card-actions>
     </template>
-  </OptionCard>
+  </GlassCard>
 </template>

package/app/components/Stepper.vue

@@ -8,16 +8,19 @@
 
 <template>
   <v-card-item class="flex-shrink-0 pa-0">
-    <v-card-title
-      class="text-h4 text-primary px-8 pt-6 pb-4 font-weight-bold d-flex align-center"
-    >
-      <v-icon icon="mdi-file-upload-outline" class="mr-3" />
-      Import Data
-    </v-card-title>
-
-    <v-card-subtitle class="px-8 pb-4 text-medium">
-      Choose a file to import.
-    </v-card-subtitle>
+    <div class="px-8 pt-8 pb-4">
+      <div class="d-flex align-center mb-2">
+        <v-icon
+          icon="mdi-file-upload-outline"
+          class="mr-3 title-text"
+          size="32"
+        />
+        <h2 class="title-text">Import Data</h2>
+      </div>
+      <p class="text-white text-body-1">
+        Select and configure your files for a seamless import.
+      </p>
+    </div>
   </v-card-item>
 
   <v-stepper-vertical
@@ -25,7 +28,7 @@
     @update:model-value="current_step_index = $event - 1"
     flat
     non-linear
-    class="pa-0 ma-0 bg-white rounded-xl overflow-hidden"
+    class="pa-0 ma-0 bg-transparent rounded-xl overflow-hidden custom-stepper"
   >
     <Step
       v-for="(step, index) in steps"
@@ -35,3 +38,33 @@
     />
   </v-stepper-vertical>
 </template>
+
+<style scoped>
+  .custom-stepper :deep(.v-stepper-vertical-item) {
+    background: transparent !important;
+  }
+
+  .custom-stepper :deep(.v-stepper-vertical-item__content) {
+    background: rgba(255, 255, 255, 0.03) !important;
+    border-radius: 12px;
+    margin: 8px 16px 16px 40px !important;
+    padding: 16px !important;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .custom-stepper :deep(.v-avatar) {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: white !important;
+  }
+
+  .custom-stepper :deep(.v-stepper-vertical-item--active .v-avatar) {
+    background: #3c9983 !important;
+    border-color: #3c9983;
+    color: #0a0f0e !important;
+  }
+
+  .custom-stepper :deep(.v-stepper-vertical-item__connector) {
+    border-color: rgba(255, 255, 255, 0.1) !important;
+  }
+</style>

package/app/components/Viewer/ContextMenuItem.vue

@@ -1,7 +1,7 @@
 <script setup>
-  import { useElementSize } from "@vueuse/core"
-  import { useMenuStore } from "@ogw_front/stores/menu"
+  import GlassCard from "@ogw_front/components/GlassCard"
   import { useTheme } from "vuetify"
+  import { useMenuStore } from "@ogw_front/stores/menu"
 
   const CARD_WIDTH = 320
   const CARD_HEIGHT = 500
@@ -99,9 +99,20 @@
       color="transparent"
       @click.stop
     >
-      <OptionCard :title="tooltip" width="320" :max-height="maxCardHeight">
-        <slot name="options" />
-      </OptionCard>
+      <GlassCard
+        @click.stop
+        :title="tooltip"
+        width="320"
+        :max-height="maxCardHeight"
+        :ripple="false"
+        variant="panel"
+        padding="pa-0"
+        class="elevation-24"
+      >
+        <v-card-text class="pa-5">
+          <slot name="options" />
+        </v-card-text>
+      </GlassCard>
     </v-sheet>
   </v-sheet>
 </template>

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -48,7 +48,6 @@
     get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
     set: async (newValue) => {
       await dataStyleStore.setMeshEdgesVertexAttributeName(id.value, newValue)
-      await dataStyleStore.updateMeshEdgesVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
@@ -60,7 +59,6 @@
         newValue[0],
         newValue[1],
       )
-      await dataStyleStore.updateMeshEdgesVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
@@ -115,15 +113,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>

package/app/components/Viewer/Generic/Mesh/CellsOptions.vue

@@ -49,7 +49,6 @@
     get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
     set: async (newValue) => {
       await dataStyleStore.setMeshCellsVertexAttributeName(id.value, newValue)
-      await dataStyleStore.updateMeshCellsVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
@@ -61,7 +60,6 @@
         newValue[0],
         newValue[1],
       )
-      await dataStyleStore.updateMeshCellsVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
@@ -79,7 +77,6 @@
     get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
     set: async (newValue) => {
       await dataStyleStore.setMeshCellsCellAttributeName(id.value, newValue)
-      await dataStyleStore.updateMeshCellsCellAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
@@ -91,7 +88,6 @@
         newValue[0],
         newValue[1],
       )
-      await dataStyleStore.updateMeshCellsCellAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })

package/app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -44,6 +44,59 @@
       hybridViewerStore.remoteRender()
     },
   })
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVertexAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_name = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesEdgeAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_range = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesEdgeAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_color_map = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesEdgeAttributeColorMap(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
 </script>
 
 <template>
@@ -61,15 +114,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>
@@ -78,6 +123,12 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
+              v-model:vertex_attribute_name="vertex_attribute_name"
+              v-model:vertex_attribute_range="vertex_attribute_range"
+              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+              v-model:edge_attribute_name="edge_attribute_name"
+              v-model:edge_attribute_range="edge_attribute_range"
+              v-model:edge_attribute_color_map="edge_attribute_color_map"
             />
           </v-col>
         </v-row>

package/app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -44,6 +44,34 @@
       hybridViewerStore.remoteRender()
     },
   })
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVertexAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
 </script>
 
 <template>
@@ -61,15 +89,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>
@@ -78,6 +98,9 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
+              v-model:vertex_attribute_name="vertex_attribute_name"
+              v-model:vertex_attribute_range="vertex_attribute_range"
+              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
             />
           </v-col>
         </v-row>