@abi-software/scaffoldvuer 1.4.1-image.0 → 1.4.2

package/src/components/ScaffoldVuer.vue

@@ -15,12 +15,9 @@
       :x="tData.x"
       :y="tData.y"
       :annotationDisplay="annotationDisplay"
-      :imageThumbnailSidebar="imageThumbnailSidebar"
-      :imageThumbnails="imageThumbnailsEntry"
       @confirm-create="confirmCreate($event)"
       @cancel-create="cancelCreate()"
       @confirm-delete="confirmDelete($event)"
-      @image-thumbnail-open="onImageThumbnailOpen"
     />
     <div
       id="organsDisplayArea"
@@ -287,7 +284,7 @@
         ref="backgroundPopover"
         :virtual-ref="backgroundIconRef"
         placement="top-start"
-        width="330"
+        width="128"
         :teleported="false"
         trigger="click"
         popper-class="background-popper non-selectable h-auto"
@@ -295,7 +292,7 @@
       >
         <div>
           <el-row class="backgroundText">Viewing Mode</el-row>
-          <el-row class="backgroundChooser">
+          <el-row class="backgroundControl">
             <div style="margin-bottom: 2px;">
               <template
                   v-for="(value, key, index) in viewingModes"
@@ -313,45 +310,6 @@
               {{ viewingModes[viewingMode] }}
             </el-row>
           </el-row>
-          <template v-if="viewingMode === 'Exploration' && sparcAPI">
-            <el-row class="backgroundSpacer"></el-row>
-            <el-row class="backgroundText">Markers display</el-row>
-            <el-row class="backgroundChooser">
-              <el-col :span="14">
-                <el-radio-group
-                  v-model="imageRadio"
-                  class="flatmap-radio"
-                  :disabled="imagesDownloading"
-                  @change="setImage"
-                >
-                  <el-radio :value="false">Standard</el-radio>
-                  <el-radio :value="true">Image</el-radio>
-                </el-radio-group>
-              </el-col>
-              <el-col :span="10" v-if="imageRadio">
-                <el-select
-                  :teleported="false"
-                  v-model="imageType"
-                  placeholder="Select"
-                  class="scaffold-select-box imageSelector"
-                  popper-class="scaffold_viewer_dropdown"
-                  :disabled="imagesDownloading"
-                  @change="setImageType"
-                >
-                  <el-option
-                    v-for="item in imageTypes"
-                    :key="item"
-                    :label="item"
-                    :value="item"
-                  >
-                    <el-row>
-                      <el-col :span="12">{{ item }}</el-col>
-                    </el-row>
-                  </el-option>
-                </el-select>
-              </el-col>
-            </el-row>
-          </template>
           <el-row class="backgroundSpacer"></el-row>
           <el-row class="backgroundText"> Change background </el-row>
           <el-row class="backgroundChooser">
@@ -424,7 +382,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { markRaw, toRaw, shallowRef } from 'vue';
+import { markRaw, shallowRef } from 'vue';
 import {
   WarningFilled as ElIconWarningFilled,
   ArrowDown as ElIconArrowDown,
@@ -463,16 +421,8 @@ import { AnnotationService } from '@abi-software/sparc-annotation';
 import { EventNotifier } from "../scripts/EventNotifier.js";
 import { OrgansViewer } from "../scripts/OrgansRenderer.js";
 import { SearchIndex } from "../scripts/Search.js";
-import { mapState, mapStores } from 'pinia';
-import { useMainStore } from "@/stores/index";
-import { useSettingsStore } from '@/stores/settings'
-import {
-  getBiolucidaThumbnails,
-  getSegmentationThumbnails,
-  getScaffoldThumbnails,
-  getPlotThumbnails
-} from '../services/scicrunchQueries'
-import imageMixin from '../mixins/imageMixin.js'
+import { mapState } from 'pinia';
+import { useMainStore } from "@/store/index";
 
 /**
  * A vue component of the scaffold viewer.
@@ -482,7 +432,6 @@ import imageMixin from '../mixins/imageMixin.js'
  */
 export default {
   name: "ScaffoldVuer",
-  mixins: [imageMixin],
   components: {
     Button,
     Col,
@@ -740,24 +689,10 @@ export default {
     /**
      * Enable local annotations
      */
-    enableLocalAnnotations: {
+     enableLocalAnnotations: {
       type: Boolean,
       default: false
     },
-    /**
-     * Specify the endpoint of the SPARC API.
-     */
-    sparcAPI: {
-      type: String,
-      default: '',
-    },
-    /**
-     * The option to show image thumbnail in sidebar
-     */
-    imageThumbnailSidebar: {
-      type: Boolean,
-      default: false,
-    },
   },
   provide() {
     return {
@@ -765,7 +700,6 @@ export default {
       scaffoldUrl: this.url,
       $annotator: this.annotator,
       boundingDims: this.boundingDims,
-      getFeaturesAlert: () => undefined,
     };
   },
   data: function () {
@@ -809,7 +743,6 @@ export default {
       inHelp: false,
       helpModeActiveIndex: this.helpModeInitialIndex,
       loading: false,
-      imagesDownloading: false,
       duration: 3000,
       drawerOpen: true,
       currentBackground: "white",
@@ -857,8 +790,7 @@ export default {
         active: false,
       },
       fileFormat: "metadata",
-      markerLabelEntry: markRaw({}),
-      previousMarkerLabelEntry: markRaw({}),
+      previousMarkerLabels: markRaw({}),
       viewingMode: "Exploration",
       viewingModes: {
         "Exploration": "View and explore detailed visualization of 3D scaffolds",
@@ -880,14 +812,6 @@ export default {
         centre: [0, 0, 0],
         size:[1, 1, 1],
       },
-      imageRadio: false,
-      imageType: 'Image',
-      imageTypes: ['Image', 'Segmentation', 'Scaffold', 'Plot'],
-      imageClicked: '',
-      /**
-       * List of group names 
-       */
-      groupNames: markRaw([]),
     };
   },
   watch: {
@@ -946,8 +870,10 @@ export default {
     },
     currentTime: {
       handler: function () {
-        //Emit when time in the current scene has changed
-        //@arg Current time in scene
+        /**
+         * Emit when time in the current scene has changed
+         * @arg {String} "Current time in scene"
+         */
         this.$emit("timeChanged", this.currentTime);
       },
     },
@@ -967,20 +893,14 @@ export default {
       },
       immediate: true,
     },
-    markerLabels: function (labels) {
-      if (this.imageRadio === false) {
-        //Only updates the following if marker mode is standard
-        this.markerLabelEntry = markRaw({...labels});
-      }
-    },
-    markerLabelEntry: function (entry) {
-      for (const [key, value] of Object.entries(this.previousMarkerLabelEntry)) {
+    markerLabels: function(labels) {
+      for (const [key, value] of Object.entries(this.previousMarkerLabels)) {
         this.setMarkerModeForObjectsWithName(key, value, "off");
       }
-      for (const [key, value] of Object.entries(entry)) {
+      for (const [key, value] of Object.entries(labels)) {
         this.setMarkerModeForObjectsWithName(key, value, "on");
       }
-      this.previousMarkerLabelEntry = markRaw({...entry});
+      this.previousMarkerLabels = markRaw({...labels});
     },
   },
   beforeCreate: function () {
@@ -1020,21 +940,17 @@ export default {
   },
   computed: {
     ...mapState(useMainStore,  ['userToken']),
-    ...mapStores(useSettingsStore),
     annotationDisplay: function() {
       return this.viewingMode === 'Annotation' && this.tData.active === true &&
         (this.activeDrawMode === 'Edit' || this.activeDrawMode === 'Delete');
-    },
-    imageThumbnailsEntry: function() {
-      return this.imageClicked ? this.convertUberonToName() : {};
     }
   },
   methods: {
     /**
-     * @vuese
+     * @public
      * Call this to manually add a zinc object into the current scene.
      * This will subsequently trigger a zincObjectAdded
-     * @arg ZincObject object to be added
+     * @arg {Object} "ZincObject object to be added"
      */
     addZincObject: function (zincObject) {
       if (this.$module.scene) {
@@ -1052,11 +968,10 @@ export default {
       if (this.timeVarying === false && zincObject.isTimeVarying()) {
         this.timeVarying = true;
       }
-      if (zincObject.groupName) {
-        this.groupNames.push(zincObject.groupName.toLowerCase());
-      }
-      //Emit when a new object is added to the scene
-      //@arg The object added to the sceene
+      /**
+       * Emit when a new object is added to the scene
+       * @arg {Object} "The object added to the sceene"
+       */
       this.$emit("zinc-object-added", zincObject);
     },
     /**
@@ -1137,10 +1052,10 @@ export default {
       hrefElement.remove();
     },
     /**
-     * @vuese
+     * @public
      * Function for capturing a screenshot of the current rendering.
      *
-     * @arg filename given to the screenshot.
+     * @arg {String} "filename given to the screenshot."
      */
     captureScreenshot: function (filename) {
       this.captureFilename = filename;
@@ -1149,7 +1064,7 @@ export default {
       );
     },
     /**
-     * @vuese
+     * @public
      * Function to clear current scene, the tree controls and the search index.
      */
     clearScene: function () {
@@ -1158,8 +1073,12 @@ export default {
       if (this.$module.scene) this.$module.scene.clearAll();
     },
     /**
-     * @vuese
+     * @public
      * Add and edit local annotations
+     * @arg `region`,
+     * @arg `group`,
+     * @arg `zincObject`,
+     * @arg `comment`
      */
     addAndEditAnnotations: function (region, group, zincObject, comment) {
       const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken, zincObject,
@@ -1178,9 +1097,10 @@ export default {
       this.$emit('userPrimitivesUpdated', {region, group, zincObject});
     },
     /**
-     * @vuese
+     * @public
      * Callback for when primitives have been update using primitive controls.
      * This is only called from callback.
+     * @arg `object`
      */
     primitivesUpdated: function(object) {
       if (object.isZincObject && object.isEditable) {
@@ -1190,8 +1110,9 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      * Confirm creation of new primitive. This is only called from callback.
+     * @arg `payload`
      */
     confirmCreate: function(payload) {
       if (payload) {
@@ -1281,7 +1202,7 @@ export default {
       return val ? val.toFixed(2) + " ms" : "0 ms";
     },
     /**
-     * @vuese
+     * @public
      * Function to reset the view to default.
      * Also called when the associated button is pressed.
      */
@@ -1303,7 +1224,7 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      * Function to zoom in.
      * Also called when the associated button is pressed.
      */
@@ -1316,7 +1237,7 @@ export default {
      * Function to zoom out.
      * Also called when the associated button is pressed.
      *
-     * @vuese
+     * @public
      */
     zoomOut: function () {
       if (this.$module.scene) {
@@ -1326,7 +1247,8 @@ export default {
     /**
      * Function to change the current play speed.
      *
-     * @vuese
+     * @public
+     * @arg `speed`
      */
     speedChanged: function (speed) {
       this.currentSpeed = speed;
@@ -1335,7 +1257,7 @@ export default {
     /**
      * Function used to stop the free spin
      *
-     * @vuese
+     * @public
      */
     stopFreeSpin: function () {
       let cameracontrol = this.$module.scene.getZincCameraControls();
@@ -1344,9 +1266,9 @@ export default {
     },
     /**
      * Return a list of obejcts with the provided name.
-     * @arg Group name to search.
+     * @arg "Group name to search."
      *
-     * @vuese
+     * @public
      */
     findObjectsWithGroupName: function (name) {
       let objects = [];
@@ -1356,10 +1278,10 @@ export default {
       return objects;
     },
     /**
+     * @public
      * Switch active drawing type
-     * @arg shapeName shape to toggle
-     *
-     * @vuese
+     * @arg {String} `type`
+     * @arg {String} `icon`
      */
     toggleDrawing: function (type, icon) {
       this.createData.toBeDeleted = false;
@@ -1376,16 +1298,16 @@ export default {
     /**
      * Toggle the drawing box which aid the drawing
      *
-     * @vuese
+     * @public
      */
      toggleDrawingBox: function () {
       this.createData.drawingBox = !this.createData.drawingBox;
     },
     /**
      * Find and and zoom into objects with the provided list of names.
-     * @arg List of names
+     * @arg "List of names"
      *
-     * @vuese
+     * @public
      */
     viewRegion: function (names) {
       const rootRegion = this.$module.scene.getRootRegion();
@@ -1485,7 +1407,7 @@ export default {
     /**
      * Return renderer information
      *
-     * @vuese
+     * @public
      */
     getRendererInfo: function () {
       if (this.$module.zincRenderer) {
@@ -1497,7 +1419,7 @@ export default {
      * Function used to rotate the scene.
      * Also called when the associated button is pressed.
      *
-     * @vuese
+     * @public
      */
     freeSpin: function () {
       if (this.$module.scene) {
@@ -1569,9 +1491,6 @@ export default {
                 ? identifier.data.id
                 : identifier.data.group;
               names.push(id);
-              if (identifier.data) {
-                identifier.data.imageType = this.imageRadio ? this.imageType : "Standard"
-              }
             }
           });
           zincObjects = event.zincObjects;
@@ -1595,15 +1514,10 @@ export default {
                 this.$refs.scaffoldTreeControls.removeActive(false);
               }
             }
-            if (this.imageRadio && event.identifiers.length && event.identifiers[0]) {
-              this.imageClicked = event.identifiers[0].data.id
-                ? event.identifiers[0].data.id
-                : event.identifiers[0].data.group;
-            } else {
-              this.imageClicked = ''
-            }
-            //Emit when an object is selected
-            //@arg Identifier of selected objects
+            /**
+             * Emit when an object is selected
+             * @arg {Object} "Identifier of selected objects"
+             */
             this.$emit("scaffold-selected", event.identifiers);
           }
         } else if (event.eventType == 2) {
@@ -1637,8 +1551,10 @@ export default {
                 this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
               }
             }
-            //Emit when an object is highlighted
-            //@arg Identifier of selected objects
+            /**
+             * Emit when an object is highlighted
+             * @arg {Object} "Identifier of selected objects"
+             */
             this.$emit("scaffold-highlighted", event.identifiers);
           }
         } else if (event.eventType == 3) {
@@ -1652,12 +1568,6 @@ export default {
               this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
             }
             this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
-            const id = event.identifiers[0].data.id
-              ? event.identifiers[0].data.id
-              : event.identifiers[0].data.group;
-            if (this.imageClicked !== id) {
-              this.imageClicked = ''
-            }
           }
         }
       }
@@ -1665,7 +1575,7 @@ export default {
     /**
      * Get the coordinates of the current selected region.
      *
-     * @vuese
+     * @public
      */
     getCoordinatesOfSelected: function () {
       if (this.selectedObjects && this.selectedObjects.length > 0) {
@@ -1678,7 +1588,7 @@ export default {
      * current selected region which will be updated after each render
      * loop.
      *
-     * @vuese
+     * @public
      */
     getDynamicSelectedCoordinates: function () {
       return this.$module.selectedScreenCoordinates;
@@ -1758,10 +1668,10 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      * Start the animation.
      *
-     * @arg flag to turn the animation on/off
+     * @arg "flag to turn the animation on/off"
      */
     play: function (flag) {
       this.$module.playAnimation(flag);
@@ -1770,7 +1680,7 @@ export default {
       //this.hideRegionTooltip();
     },
     /**
-     * @vuese
+     * @public
      * Function to toggle on/off overlay help.
      */
     setHelpMode: function (helpMode) {
@@ -1998,7 +1908,7 @@ export default {
           }
           this.userInformation = undefined;
           this.annotator.authenticate(this.userToken).then((userData) => {
-            if (userData.name && userData.email) {
+            if (userData.name && userData.email && userData.canUpdate) {
               this.userInformation = userData;
               //Only draw annotations stored in the server on initial authentication
               if (!authenticated) {
@@ -2026,7 +1936,7 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      * Hide the tooltip
      */
     hideRegionTooltip: function () {
@@ -2060,8 +1970,10 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      * Set the marker modes for objects specified by the list of annotations
+     * @arg `annotations`
+     * @arg `mode`
      */
     setMarkerModeWithAnnotations: function (annotations, mode) {
       if (this.$module.scene) {
@@ -2099,11 +2011,11 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      *
      * Search a object and display the tooltip
-     * @arg text to search across
-     * @arg toggle the tooltip if this is set
+     * @arg "text to search across"
+     * @arg "toggle the tooltip if this is set"
      */
     search: function (text, displayLabel) {
       if (this.$_searchIndex) {
@@ -2139,10 +2051,11 @@ export default {
       return false;
     },
     /**
-     * @vuese
+     * @public
      *
      * Get the list of suggested terms based on the provided term.
      * This can be used for autocomplete.
+     * @arg `term`
      */
     fetchSuggestions: function (term) {
       if (this.$_searchIndex === undefined) return [];
@@ -2197,7 +2110,9 @@ export default {
         this.$module.updateTime(0);
         this.$module.unsetFinishDownloadCallback();
         this.addRegionsToSearchIndex();
-        //Emit when all objects have been loaded
+        /**
+         * Emit when all objects have been loaded
+         */
         this.$emit("on-ready");
         this.setMarkers();
         //Create a bounding box.
@@ -2217,7 +2132,7 @@ export default {
      * Function used for getting the current states of the scene. This exported states
      * can be imported using the importStates method.
      *
-     * @vuese
+     * @public
      */
     getState: function () {
       let state = {
@@ -2238,7 +2153,8 @@ export default {
      * Function used for importing the states of the scene. This exported states
      * can be imported using the read states method.
      *
-     * @vuese
+     * @public
+     * @arg `state`
      */
     setState: function (state) {
       if (state) {
@@ -2271,9 +2187,9 @@ export default {
     },
     /**
      * export current scene in GLTF.
-     * @arg Return in binary form when set to true
+     * @arg "Return in binary form when set to true"
      *
-     * @vuese
+     * @public
      */
     exportGLTF: function (binary) {
       return this.$module.scene.exportGLTF(binary);
@@ -2283,7 +2199,7 @@ export default {
      * This list is used for storing user created annotation
      * when enableLocalAnnotations is set to true.
      *
-     * @vuese
+     * @public
      */
      getLocalAnnotations: function () {
       return [...this.localAnnotationsList];
@@ -2293,7 +2209,8 @@ export default {
      * be imported when enableLocalAnnotations is set to
      * true;
      *
-     * @vuese
+     * @public
+     * @arg {Array} `annotationsList`
      */
      importLocalAnnotations: function (annotationsList) {
       if (this.enableLocalAnnotations) {
@@ -2322,7 +2239,9 @@ export default {
      * viewport. This function will ignore the state prop and
      * read in the new url.
      *
-     * @vuese
+     * @public
+     * @arg `newValue`
+     * @arg `state`
      */
     setURLAndState: function (newValue, state) {
       if (newValue != this._currentURL) {
@@ -2345,7 +2264,6 @@ export default {
             visibility: visibility,
           })
         );
-        this.groupNames.length = 0;
         if (this.fileFormat === "gltf") {
           this.$module.loadGLTFFromURL(newValue, "scene", true);
         } else {
@@ -2370,7 +2288,8 @@ export default {
      * Function used for reading in new scaffold metadata. This function will ignore
      * the state prop and read in the new url.
      *
-     * @vuese
+     * @public
+     * @arg `newValue`
      */
     setURL: function (newValue) {
       this.setURLAndState(newValue, undefined);
@@ -2406,7 +2325,7 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      *
      * Force the renderer to resize
      */
@@ -2420,9 +2339,11 @@ export default {
       if (this.tData.visible) {
         this.showRegionTooltip(this.tData.label, true, true);
       }
-      //Emit when the scene has been transformed due to navigation,
-      //only triggered during syncControl mode
-      //@arg Information on the navigation
+      /**
+       * Emit when the scene has been transformed due to navigation,
+       * only triggered during syncControl mode
+       * @arg {Object} "Information on the navigation"
+       */
       this.$emit("scaffold-navigated", payload);
     },
     /**
@@ -2433,72 +2354,15 @@ export default {
       this.$module.toggleSyncControl(flag, rotateMode);
       this.$module.setSyncControlCallback(this.syncControlCallback);
     },
+
     /**
      * Set the markers for the scene.
      */
     setMarkers: function () {
-      for (const [key, value] of Object.entries(this.markerLabelEntry)) {
+      for (const [key, value] of Object.entries(this.markerLabels)) {
         this.setMarkerModeForObjectsWithName(key, value, "on");
       }
     },
-    removeImageThumbnails: function () {
-      this.imageThumbnails = {};
-      this.markerLabelEntry = markRaw(this.markerLabels);
-    },
-    setImage: async function (flag) {
-      if (flag) {
-        await this.setImageType(this.imageType);
-        this.$module.scene.enableMarkerCluster(false);
-      } else {
-        this.removeImageThumbnails();
-        this.$module.scene.enableMarkerCluster(this.markerCluster);
-      }
-    },
-    setImageType: async function (type) {
-      this.imageType = type;
-      this.imagesDownloading = true;
-      if (!this.settingsStore.imageTypeCached(type)) {
-        this.loading = true;
-        await this.fetchImageThumbnails(type);
-        this.loading = false;
-      }
-      this.populateImageThumbnails(type);
-    },
-    fetchImageThumbnails: async function (type) {
-      let thumbnails = {};
-      const organCuries = this.settingsStore.organCuries;
-      if (type === 'Image') {
-        thumbnails = await getBiolucidaThumbnails(this.sparcAPI, organCuries, type);
-      } else if (type === 'Segmentation') {
-        thumbnails = await getSegmentationThumbnails(this.sparcAPI, organCuries, type);
-      } else if (type === 'Scaffold') {
-        thumbnails = await getScaffoldThumbnails(this.sparcAPI, organCuries, type);
-      } else if (type === 'Plot') {
-        thumbnails = await getPlotThumbnails(this.sparcAPI, organCuries, type);
-      }
-      this.settingsStore.updateImageThumbnails(type, thumbnails);
-    },
-    convertUberonToName: function () {
-      const organCuries = this.settingsStore.organCuries;
-      const identifiers = organCuries.filter(
-        (curie) => this.groupNames.includes(curie.name.toLowerCase())
-        ).map((curie) => curie.id);
-      const imageThumbnails = this.settingsStore.getImageThumbnails(this.imageType, identifiers);
-      return Object.fromEntries(
-          Object.entries(imageThumbnails)
-            .map(([key, value]) => [organCuries.filter((curie) => curie.id === key)[0].name, value]));
-    },
-    populateImageThumbnails: async function (type) {
-      this.removeImageThumbnails();
-      const thumbnails = this.convertUberonToName();
-      this.loading = true;
-      this.markerLabelEntry = markRaw(await this.populateMapWithImages(thumbnails, type));
-      this.loading = false;
-      this.imagesDownloading = false;
-    },
-    onImageThumbnailOpen: function (payload) {
-      this.$emit('image-thumbnail-open', payload);
-    },
   },
 };
 </script>
@@ -2658,7 +2522,7 @@ export default {
   background-color: #ffffff;
   border: 1px solid $app-primary-color;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
-  height: fit-content;
+  height: 140px;
   min-width: 200px;
   .el-popper__arrow {
     &:before {
@@ -2915,10 +2779,6 @@ export default {
       min-height: 24px
     }
   }
-
-  &.imageSelector {
-    width: 125px!important;
-  }
 }
 
 :deep(.scaffold_viewer_dropdown) {