feat(isActive): adds is_active mesh_components objects

app/components/Viewer/TreeComponent.vue

@@ -53,9 +53,22 @@ watch(
     <template #title="{ item }">
       <span
         class="treeview-item"
+        :class="{ 'inactive-item': item.is_active === false }"
         @contextmenu.prevent.stop="emit('show-menu', { event: $event, itemId: item })"
-        >{{ item.title }}</span
       >
+        {{ item.title }}
+        <v-tooltip v-if="item.category" activator="parent" location="right">
+          <div class="d-flex flex-column pa-1">
+            <span class="text-caption"><strong>ID:</strong> {{ item.id }}</span>
+            <span v-if="item.title" class="text-caption"
+              ><strong>Name:</strong> {{ item.title }}</span
+            >
+            <span class="text-caption font-italic border-t-sm d-flex align-center">
+              <strong class="mr-1">Status:</strong> {{ item.is_active ? "Active" : "Inactive" }}
+            </span>
+          </div>
+        </v-tooltip>
+      </span>
     </template>
   </v-treeview>
 </template>
@@ -68,6 +81,10 @@ watch(
   max-width: 100%;
   display: inline-block;
 }
+.inactive-item {
+  opacity: 0.4;
+  font-style: italic;
+}
 
 .transparent-treeview {
   background-color: transparent;

app/stores/data.js

@@ -9,209 +9,211 @@
 
 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);
   }
 
   function refItem(id) {
     return useObservable(
       liveQuery(() => database.data.get(id)),
       { initialValue: {} },
     );
   }
 
   function refAllItems() {
     return useObservable(
       liveQuery(() => database.data.toArray()),
       { initialValue: [] },
     );
   }
 
   async function formatedMeshComponents(modelId) {
     const items = await database.model_components.where({ id: modelId }).toArray();
     const componentTitles = {
       Corner: "Corners",
       Line: "Lines",
       Surface: "Surfaces",
       Block: "Blocks",
     };
 
     const componentsByType = {};
     for (const component_item of items) {
       if (componentTitles[component_item.type]) {
         if (!componentsByType[component_item.type]) {
           componentsByType[component_item.type] = [];
         }
         componentsByType[component_item.type].push(component_item);
       }
     }
 
     return Object.keys(componentTitles)
       .filter((type) => componentsByType[type])
       .map((type) => ({
         id: type,
         title: componentTitles[type],
         children: componentsByType[type].map((meshComponent) => ({
           id: meshComponent.geode_id,
           title: meshComponent.name,
           category: meshComponent.type,
+          is_active: meshComponent.is_active,
         })),
       }));
   }
 
   async function meshComponentType(modelId, geode_id) {
     const component = await database.model_components.where({ id: modelId, geode_id }).first();
     return component?.type;
   }
 
   async function registerObject(id) {
     return await viewerStore.request(viewer_generic_schemas.register, { id });
   }
 
   async function deregisterObject(id) {
     return await viewerStore.request(viewer_generic_schemas.deregister, { id });
   }
 
   function addItem(new_item) {
     const itemData = {
       id: new_item.id,
       name: new_item.name || new_item.id,
       viewer_type: new_item.viewer_type,
       geode_object_type: new_item.geode_object_type,
       visible: true,
       created_at: new Date().toISOString(),
       binary_light_viewable: new_item.binary_light_viewable,
     };
     return database.data.put(itemData);
   }
 
   function addComponents(new_item) {
     const allComponents = [];
     function addModelComponents(components) {
       for (const component of components) {
         allComponents.push({
           id: new_item.id,
           geode_id: component.geode_id,
           type: component.type,
           viewer_id: component.viewer_id,
           name: component.name,
+          is_active: component.is_active,
         });
       }
     }
     addModelComponents(new_item.mesh_components);
     addModelComponents(new_item.collection_components);
     return database.model_components.bulkPut(allComponents);
   }
 
   function addComponentRelations(new_item) {
     const relations = [];
     function addModelComponentRelations(components, parent, type) {
       for (const child of components) {
         relations.push({
           id: new_item.id,
           parent,
           child,
           type,
         });
       }
     }
     for (const component of new_item.mesh_components) {
       if (component.boundaries) {
         addModelComponentRelations(component.boundaries, component.geode_id, "boundary");
       }
       if (component.internals) {
         addModelComponentRelations(component.internals, component.geode_id, "internal");
       }
     }
     for (const component of new_item.collection_components) {
       if (component.items) {
         addModelComponentRelations(component.items, component.geode_id, "collection");
       }
     }
     return database.model_components_relation.bulkPut(relations);
   }
 
   async function deleteItem(id) {
     await database.data.delete(id);
     await deleteModelComponents(id);
   }
 
   async function updateItem(id, changes) {
     await database.data.update(id, changes);
   }
 
   async function deleteModelComponents(modelId) {
     await database.model_components.where({ id: modelId }).delete();
     await database.model_components_relation.where({ id: modelId }).delete();
   }
 
   async function getMeshComponentGeodeIds(modelId, component_type) {
     const components = await database.model_components
       .where({ id: modelId, type: component_type })
       .toArray();
     return components.map((component) => component.geode_id);
   }
 
   async function getCornersGeodeIds(modelId) {
     return await getMeshComponentGeodeIds(modelId, "Corner");
   }
 
   async function getLinesGeodeIds(modelId) {
     return await getMeshComponentGeodeIds(modelId, "Line");
   }
 
   async function getSurfacesGeodeIds(modelId) {
     return await getMeshComponentGeodeIds(modelId, "Surface");
   }
 
   async function getBlocksGeodeIds(modelId) {
     return await getMeshComponentGeodeIds(modelId, "Block");
   }
 
   async function getMeshComponentsViewerIds(modelId, meshComponentGeodeIds) {
     const components = await database.model_components
       .where("[id+geode_id]")
       .anyOf(meshComponentGeodeIds.map((geode_id) => [modelId, geode_id]))
       .toArray();
     return components.map((component) => component.viewer_id);
   }
 
   async function exportStores() {
     const items = await database.data.toArray();
     return { items };
   }
 
   async function importStores(_snapshot) {
     await clear();
   }
 
   async function clear() {
     await database.data.clear();
   }
 
   return {
     refAllItems,
     item,
     refItem,
     meshComponentType,
     formatedMeshComponents,
     registerObject,
     deregisterObject,
     addItem,
     addComponents,
     addComponentRelations,
     deleteItem,
     updateItem,
     getCornersGeodeIds,
     getLinesGeodeIds,
     getSurfacesGeodeIds,
     getBlocksGeodeIds,
     getMeshComponentsViewerIds,
     exportStores,
     importStores,
     clear,
   };
 });