Private volumes as reference volumes

app/src/components/DatasetSelection.vue

@@ -117,7 +117,9 @@ export default {
   computed: {
     ...mapGetters('dataSelectionStore', [
       'selectedReferenceVolume', 
-      'selectedIncomingVolume'
+      'selectedIncomingVolume',
+      'selectedReferenceVolumeId',
+      'selectedPrivateReferenceVolumeId'
     ]),
     ...mapState({
       allowUpload: 'allowUpload',
@@ -139,7 +141,7 @@ export default {
         : 'btn-secondary disabled'
     },
     bothSelected: function () {
-      return this.selectedReferenceVolume && this.selectedIncomingVolume
+      return (this.selectedReferenceVolumeId || this.selectedPrivateReferenceVolumeId) && this.selectedIncomingVolume
     },
   },
   beforeRouteLeave: function (to, from, next) {

app/src/components/Nehuba.vue

@@ -107,7 +107,7 @@
 <script>
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 
-import { REFERENCE_COLOR, transposeMat4, UNPAIRED_COLOR, INCOMING_COLOR, annotationColorFocus, viewerConfigs, determineElement, getRotationVec3, identityMat, invertQuat } from '@//constants'
+import { REFERENCE_COLOR, transposeMat4, UNPAIRED_COLOR, INCOMING_COLOR, annotationColorFocus, viewerConfigs, customConfig, determineElement, getRotationVec3, identityMat, invertQuat } from '@//constants'
 
 import { incompatibleBrowserText } from '@/text'
 
@@ -269,7 +269,7 @@ export default {
       this.selectedIncomingVolume = this.incomingVolumes.find(v => v.id === newId)
     },
     selectedReferenceVolumeId: async function(newId, oldId) {
-      if (newId === oldId) return 
+      if (!newId || newId === oldId) return 
       this.config = viewerConfigs.find(v => v.id === newId)
       await this.nehubaBase__destroyNehuba()
       this.showNehuba = false
@@ -278,6 +278,30 @@ export default {
       await Vue.nextTick()
       await this.nehubaBase__initNehuba()
       await this.postNehubaInit()
+    },
+    selectedPrivateReferenceVolumeId: async function(newId, oldId) {
+      if (!newId || newId === oldId) return 
+      const volume = this.incomingVolumes.find(v => v.id === newId)
+
+      this.config = customConfig({
+        id: volume.id,
+        name: volume.name,
+        background: [0,0,0,1],
+        transform: volume.extra.neuroglancer.transform,
+        imageSource: volume.imageSource,
+        // ToDo Need to recheck
+        // voxelSize: volume.extra.nifti.size
+      })
+
+      await this.nehubaBase__destroyNehuba()
+      this.showNehuba = false
+      await Vue.nextTick()
+      this.showNehuba = true
+      await Vue.nextTick()
+      await this.nehubaBase__initNehuba()
+      await this.postNehubaInit()
+
+
     },
     appendNehubaFlag: function (flag) {
       if (flag === true) {
@@ -796,8 +820,10 @@ export default {
       addLandmarkMode: 'addLandmarkMode'
     }),
     ...mapGetters('dataSelectionStore', [
+      'incomingVolumes',
       'selectedIncomingVolume',
-      'selectedReferenceVolumeId'
+      'selectedReferenceVolumeId',
+      'selectedPrivateReferenceVolumeId'
     ]),
     ...mapGetters('viewerPreferenceStore', [
       'fragmentShader'

app/src/components/ReferenveVolumeSelection.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="input-group">
 
+    <div class="private-volume-selector">
+      <input type="checkbox" id="checkbox" class="mr-2" v-model="privateVolumesEnabled" 
+            :disabled="!(privateVolumes && privateVolumes.length)"/>
+      <label for="checkbox">{{ 'Select private volume as a reference volume.' }}</label>
+    </div>
+
     <select
+      v-if="!privateVolumesEnabled"
       class="form-control form-control-sm"
       v-model="selectedReferenceVolumeId">
       <option
@@ -18,6 +25,23 @@
       </option>
     </select>
 
+    <select
+      v-if="privateVolumesEnabled"
+      class="form-control form-control-sm"
+      v-model="selectedPrivateReferenceVolumeId">
+      <option
+        :disabled="true"
+        :value="dummyReferenceVolume.id">
+        {{ dummyReferenceVolume.name }}
+      </option>
+      <option
+        v-for="volume in privateVolumes"
+        :disabled="volume.disabled"
+        :key="volume.id"
+        :value="volume.id">
+        {{ volume.name }}
+      </option>
+    </select>
 
   </div>
 </template>
@@ -34,15 +58,18 @@ export default {
         name: '-- Please select an reference volume --',
         disabled: true
       },
+      privateVolumesEnabled: false
     }
   },
   computed: {
 
     ...mapGetters('dataSelectionStore', [
-      'referenceVolumes'
+      'referenceVolumes',
     ]),
     ...mapState('dataSelectionStore', {
+      privateVolumes: state => state.incomingVolumes.filter(iv => iv.visibility === 'private'),
       stateSelectedReferenceVolumeId: state => state.selectedReferenceVolumeId,
+      stateSelectedPrivateReferenceVolumeId: state => state.selectedPrivateReferenceVolumeId,
     }),
 
     selectedReferenceVolumeId: {
@@ -53,16 +80,40 @@ export default {
         this.selectReferenceVolumeWithId(id)
       }
     },
+
+    selectedPrivateReferenceVolumeId: {
+      get: function () {
+        return this.stateSelectedPrivateReferenceVolumeId
+      },
+      set: function (id) {
+        this.selectPrivateReferenceVolumeWithId(id)
+      }
+    },
+  },
+  watch: {
+    privateVolumesEnabled(val) {
+      this.selectedPrivateReferenceVolumeId = val? this.privateVolumes[0].id : null
+    }
   },
   methods: {
     ...mapActions('dataSelectionStore', [
       'selectReferenceVolumeWithId',
-    ]),
+      'selectPrivateReferenceVolumeWithId'
+    ])
   }
 }
 </script>
 <style scoped>
 .input-group {
   margin-bottom: 20px;
+  display: inline-flex;
+  flex-direction: column;
+}
+.form-control {
+  width: 100% !important;
+}
+.private-volume-selector {
+  display: flex;
+  flex-wrap: nowrap;
 }
 </style>

app/src/constants.js

@@ -939,6 +939,160 @@ export const viewerConfigs = [
 
 ]
 
+export const customConfig = (params) => {
+
+  const {id, name, background, transform, voxelSize, imageSource} = params
+
+  return {
+    "id": id,
+    "configName": "Custom",
+    "globals": {
+      "hideNullImageValues": true,
+      "useNehubaLayout": {
+        "keepDefaultLayouts": false
+      },
+      "useNehubaMeshLayer": true,
+      "rightClickWithCtrlGlobal": false,
+      "zoomWithoutCtrlGlobal": false,
+      "useCustomSegmentColors": true
+    },
+    "zoomWithoutCtrl": true,
+    "hideNeuroglancerUI": true,
+    "rightClickWithCtrl": true,
+    "rotateAtViewCentre": true,
+    "enableMeshLoadingControl": true,
+    "zoomAtViewCentre": true,
+    "restrictUserNavigation": true,
+    "disableSegmentSelection": true,
+    "dataset": {
+      "imageBackground": background || [0,0,0,0],
+      "initialNgState": {
+        "showDefaultAnnotations": true,
+        "defaultAnnotationColor": "#cccccc",
+        "layers": {
+          [name]: {
+            "visible": true,
+            "annotationColor": "#cccccc",
+            "type": "image",
+            "source": imageSource,
+            "transform": transform
+          },
+          [name + "_auxmesh: "]: {
+            "visible": true,
+            "annotationColor": "#cccccc",
+            "type": "segmentation",
+            "source": imageSource,
+            "selectedAlpha": 0,
+            "notSelectedAlpha": 0,
+            "transform": transform
+            // "segments": [
+            //   "0"
+            // ],
+          },
+        },
+
+
+        "navigation": {
+          "pose": {
+            "position": {
+              "voxelSize": voxelSize || [
+                21166.666015625,
+                20000,
+                21166.666015625
+              ],
+              "voxelCoordinates": [
+                0, //-21.8844051361084,
+                0, //16.288618087768555,
+                0 //28.418994903564453
+              ]
+            }
+          },
+          "zoomFactor": 35000
+        },
+      }
+    },
+    "layout": {
+            "useNehubaPerspective": {
+                "perspectiveSlicesBackground": [
+                    0,
+                    0,
+                    0,
+                    1
+                ],
+                "removePerspectiveSlicesBackground": {
+                    "mode": "<",
+                    "color": [
+                        0.1,
+                        0.1,
+                        0.1,
+                        1
+                    ]
+                },
+                "perspectiveBackground": [
+                    0,
+                    0,
+                    0,
+                    1
+                ],
+                "fixedZoomPerspectiveSlices": {
+                    "sliceViewportWidth": 300,
+                    "sliceViewportHeight": 300,
+                    "sliceZoom": 56381.835624261774,
+                    "sliceViewportSizeMultiplier": 2
+                },
+                "mesh": {
+                    "backFaceColor": [
+                        0,
+                        0,
+                        0,
+                        1
+                    ],
+                    "removeBasedOnNavigation": true,
+                    "flipRemovedOctant": true,
+                    "surfaceParcellation": false
+                },
+                "centerToOrigin": true,
+                "drawSubstrates": {
+                    "color": [
+                        0.5,
+                        0.5,
+                        1,
+                        0.2
+                    ]
+                },
+                "drawZoomLevels": {
+                    "cutOff": 15000
+                },
+                "restrictZoomLevel": {
+                    "minZoom": 120000,
+                    "maxZoom": 350000
+                }
+            },
+            "views": {
+                "slice1": {
+                    "0": -0.7071067690849304,
+                    "1": 0,
+                    "2": 0,
+                    "3": 0.7071067690849304
+                },
+                "slice2": {
+                    "0": -0.5,
+                    "1": -0.5,
+                    "2": 0.5,
+                    "3": 0.5
+                },
+                "slice3": {
+                    "0": 1,
+                    "1": 0,
+                    "2": 0,
+                    "3": 6.123234262925839e-17
+                }
+            }
+    }
+  }
+
+}
+
 export const getRotationVec3 = (index) => {
   if ('export_nehuba' in window) {
     return index === 0