@abi-software/scaffoldvuer 1.21.1-beta.2 → 2.0.0

package/src/ScaffoldVuer-wc.js

@@ -1,14 +1,14 @@
-import Vue from 'vue'
+import Vue from 'vue';
 import vueCustomElement from 'vue-custom-element';
 
 Vue.use(vueCustomElement);
 
-import ScaffoldVuer from "./components/ScaffoldVuer.vue";
+import ScaffoldVuer from './components/ScaffoldVuer.vue';
 
-Vue.customElement("scaffoldvuer-wc", ScaffoldVuer);
+Vue.customElement('scaffoldvuer-wc', ScaffoldVuer);
 
 /*
 const wrappedElement = wrap(Vue, ScaffoldVuer);
 
 window.customElements.define("scaffoldvuer-wc", wrappedElement);
-*/
+*/

package/src/app/DropZone.vue

@@ -1,30 +1,17 @@
 <template>
-  <div
-    ref="dropEl"
-    class="dropzone"
-  >
+  <div ref="dropEl" class="dropzone">
     <slot />
-    <input
-      ref="fileInput"
-      type="file"
-    >
+    <input ref="fileInput" type="file" />
   </div>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
 import { markRaw } from 'vue';
-import { SimpleDropzone } from "simple-dropzone";
-import { createURLFromFiles } from "../scripts/LocalFilesHelper.js";
-
-const getJSON = async (URL) => {
-  return fetch(URL)
-    .then((response) => response.json())
-    .then((responseJson) => {return responseJson});
-}
+import { SimpleDropzone } from 'simple-dropzone';
+import { createURLFromFiles } from '../scripts/LocalFilesHelper.js';
 
 export default {
-  name: "DropZone",
+  name: 'DropZone',
   data: function () {
     return {
       objectURLs: markRaw([]),
@@ -32,20 +19,17 @@ export default {
     };
   },
   mounted: function () {
-    const dropCtrl = new SimpleDropzone(
-      this.$refs.dropEl,
-      this.$refs.fileInput
-    );
-    dropCtrl.on("drop", ({ files }) => {
+    const dropCtrl = new SimpleDropzone(this.$refs.dropEl, this.$refs.fileInput);
+    dropCtrl.on('drop', ({ files }) => {
       this.localDrop(files);
     });
   },
   methods: {
-    findRealFilename: function(objectURL) {
-      return this.filesMapping[objectURL]
+    findRealFilename: function (objectURL) {
+      return this.filesMapping[objectURL];
     },
     revokeURLs: function () {
-      this.objectURLs.forEach(objectURL => URL.revokeObjectURL(objectURL));
+      this.objectURLs.forEach((objectURL) => URL.revokeObjectURL(objectURL));
       this.objectURLs.length = 0;
       this.filesMapping = markRaw({});
     },
@@ -61,7 +45,7 @@ export default {
           Object.assign(this.filesMapping, data.filesMapping);
         }
         if (data.format && data.url) {
-          this.$emit("files-drop", { url: data.url, format : data.format } );
+          this.$emit('files-drop', { url: data.url, format: data.format });
         }
       }
     },

package/src/app/ModelsInformation.js

@@ -26,38 +26,41 @@ export default async function(keywords, spreadsheet_id, service_email, service_k
 }
 */
 
-export default async function(keywords, spreadsheet_id) {
+export default async function (keywords, spreadsheet_id) {
   const gid = '0';
-  const response = await fetch(`https://docs.google.com/spreadsheets/d/${spreadsheet_id}/gviz/tq?tqx=out:json&tq&gid=${gid}`);
+  const response = await fetch(
+    `https://docs.google.com/spreadsheets/d/${spreadsheet_id}/gviz/tq?tqx=out:json&tq&gid=${gid}`,
+  );
   const txt = await response.text();
 
   const jsonString = txt.match(/(?<="table":).*(?=}\);)/g)[0];
   const json = JSON.parse(jsonString);
   const tableData = [];
   const labelRow = [];
-  json.cols.forEach(colonne => labelRow.push(colonne.label));
+  json.cols.forEach((colonne) => labelRow.push(colonne.label));
   const keywordsIndex = [];
-  keywords.forEach(key => keywordsIndex.push(labelRow.indexOf(key)));
+  keywords.forEach((key) => keywordsIndex.push(labelRow.indexOf(key)));
   const rawTable = [];
-  json.rows.forEach(r => {
-    const row = []
-    r.c.forEach(cel => {
-      let value = '';
-      try{value = cel.f ? cel.f : cel.v}
-      catch(e){value = ''}
-      row.push(value)
-    })
-    rawTable.push(row)
-  })
-  rawTable.forEach(row => {
+  json.rows.forEach((r) => {
+    const row = [];
+    r.c.forEach((cel) => {
+      let value;
+      try {
+        value = cel.f ? cel.f : cel.v;
+      } catch (_e) {
+        value = '';
+      }
+      row.push(value);
+    });
+    rawTable.push(row);
+  });
+  rawTable.forEach((row) => {
     const mappedData = {};
-    keywordsIndex.forEach(index => {
+    keywordsIndex.forEach((index) => {
       mappedData[labelRow[index]] = row[index];
-
     });
     tableData.push(mappedData);
   });
-  
 
-  return tableData
+  return tableData;
 }

package/src/app/ModelsTable.vue

@@ -1,51 +1,26 @@
 <template>
   <div>
-    <el-input
-      v-model="search"
-      size="small"
-      placeholder="Type to search"
-    />
+    <el-input v-model="search" size="small" placeholder="Type to search" />
     <el-table
-      :data="tableData.filter(
-        data => !search || 
-          data.Organ.toLowerCase().includes(search.toLowerCase()) ||
-          data.Species.toLowerCase().includes(search.toLowerCase()) ||
-          data.Note.toLowerCase().includes(search.toLowerCase()))"
-      style="width: 100%;"
+      :data="
+        tableData.filter(
+          (data) =>
+            !search ||
+            data.Organ.toLowerCase().includes(search.toLowerCase()) ||
+            data.Species.toLowerCase().includes(search.toLowerCase()) ||
+            data.Note.toLowerCase().includes(search.toLowerCase()),
+        )
+      "
+      style="width: 100%"
       height="600"
     >
-      <el-table-column
-        prop="Organ"
-        label="Organ"
-        width="100"
-      />
-      <el-table-column
-        prop="Species"
-        label="Species"
-        width="100"
-      />
-      <el-table-column
-        prop="Note"
-        label="Note"
-        width="200"
-      />
-      <el-table-column
-        prop="Last modified"
-        label="Last modified"
-        width="250"
-      /> 
-      <el-table-column
-        fixed="right"
-        label="Action"
-        width="300"
-      >
+      <el-table-column prop="Organ" label="Organ" width="100" />
+      <el-table-column prop="Species" label="Species" width="100" />
+      <el-table-column prop="Note" label="Note" width="200" />
+      <el-table-column prop="Last modified" label="Last modified" width="250" />
+      <el-table-column fixed="right" label="Action" width="300">
         <template #default="scope">
-          <el-button
-            size="small"
-            @click="handleView(scope.row)"
-          >
-            View
-          </el-button>
+          <el-button size="small" @click="handleView(scope.row)">View</el-button>
           <el-button
             v-if="scope.row.Discover !== 'Not even'"
             size="small"
@@ -61,33 +36,35 @@
             Blackfynn
           </el-button>
         </template>
-      </el-table-column>   
+      </el-table-column>
     </el-table>
   </div>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import getTableData from "./ModelsInformation.js";
+import getTableData from './ModelsInformation.js';
 
-import { 
+import {
   ElButton as Button,
   ElInput as Input,
   ElTable as Table,
-  ElTableColumn as TableColumn
-} from "element-plus";
+  ElTableColumn as TableColumn,
+} from 'element-plus';
 
 export default {
-  name: "ModelsTable",
-  components: [
-    Button,
-    Input,
-    Table,
-    TableColumn
-  ],
+  name: 'ModelsTable',
+  components: [Button, Input, Table, TableColumn],
   async setup() {
-    const keywords = ["Organ", "Species", "Note", "Location",
-      "Last modified","Blackfynn dataset", "Published", "Discover"];
+    const keywords = [
+      'Organ',
+      'Species',
+      'Note',
+      'Location',
+      'Last modified',
+      'Blackfynn dataset',
+      'Published',
+      'Discover',
+    ];
     const spreadsheet_id = import.meta.env.VITE_GOOGLE_SPREADSHEET_ID;
     const service_email = import.meta.env.VITE_GOOGLE_SERVICE_SCAFFOLDVUER_EMAIL;
     const service_key = import.meta.env.VITE_GOOGLE_PRIVATE_SCAFFOLDVUER_KEY;
@@ -97,18 +74,18 @@ export default {
   data() {
     return {
       search: '',
-    }
+    };
   },
   methods: {
-    handleView: function(row) {
-      this.$emit("viewModelClicked", row.Location);
+    handleView: function (row) {
+      this.$emit('viewModelClicked', row.Location);
     },
-    handleDiscover: function(row) {
-      window.open(row.Discover, "_blank");
+    handleDiscover: function (row) {
+      window.open(row.Discover, '_blank');
     },
-    handleBlackfynn: function(row) {
-      window.open(row['Blackfynn dataset'], "_blank");
+    handleBlackfynn: function (row) {
+      window.open(row['Blackfynn dataset'], '_blank');
     },
-  }
+  },
 };
 </script>

package/src/app/TextureDemos.js

@@ -1,11 +1,11 @@
-import * as volumeTexture from "zincjs/src/shaders/volumeTexture.js";
+import * as volumeTexture from 'zincjs/src/shaders/volumeTexture.js';
 
 const getVolumeTexture = (texture) => {
   const myUniforms = volumeTexture.getUniforms();
   myUniforms.volume_scale.value.set(
     texture.size.width / texture.size.depth,
     texture.size.height / texture.size.depth,
-    1
+    1,
   );
   myUniforms.diffuse.value = texture.impl;
   myUniforms.depth.value = texture.size.depth;
@@ -33,7 +33,7 @@ const getTexture = async (scaffoldModule, texture_prefix) => {
 export const testVolume = async (scaffoldVuer, texture_prefix) => {
   const cube = new scaffoldVuer.$module.Zinc.THREE.BoxGeometry(1, 1, 1);
   const zincObject = new scaffoldVuer.$module.Zinc.Geometry();
-  zincObject.setName("Texture volume");
+  zincObject.setName('Texture volume');
   cube.translate(0.5, 0.5, 0.5);
   let meshOptions = {};
   meshOptions.opacity = 1.0;
@@ -44,70 +44,53 @@ export const testVolume = async (scaffoldVuer, texture_prefix) => {
   const material = texture.getMaterial(options);
   zincObject.createMesh(cube, material, meshOptions);
   scaffoldVuer.addZincObject(zincObject);
-  zincObject.getMorph().matrix.set(
-    -100,
-    0,
-    0,
-    -60,
-    0,
-    -100,
-    0,
-    -100,
-    0,
-    0,
-    -100,
-    30,
-    0,
-    0,
-    0,
-    1
-  );
+  zincObject.getMorph().matrix.set(-100, 0, 0, -60, 0, -100, 0, -100, 0, 0, -100, 30, 0, 0, 0, 1);
   window.texture = zincObject;
 };
 
-const addCylinder = (scaffoldVuer) => {
-  const THREE = scaffoldVuer.$module.Zinc.THREE;
-  const cylinderGeometry = new THREE.CylinderGeometry(50, 50, 200,80);
-  const material = new THREE.MeshPhongMaterial( {color: 0xffff00, side : THREE.DoubleSide} );
-  const cylinderMesh = new THREE.Mesh( cylinderGeometry, material );
-  const zincGeometry = new scaffoldVuer.$module.Zinc.Geometry();
-  zincGeometry.setMesh(cylinderMesh, false, false);
-  zincGeometry.setName("Cylinder");
-  scaffoldVuer.addZincObject(zincGeometry);
-}
+// const addCylinder = (scaffoldVuer) => {
+//   const THREE = scaffoldVuer.$module.Zinc.THREE;
+//   const cylinderGeometry = new THREE.CylinderGeometry(50, 50, 200, 80);
+//   const material = new THREE.MeshPhongMaterial({ color: 0xffff00, side: THREE.DoubleSide });
+//   const cylinderMesh = new THREE.Mesh(cylinderGeometry, material);
+//   const zincGeometry = new scaffoldVuer.$module.Zinc.Geometry();
+//   zincGeometry.setMesh(cylinderMesh, false, false);
+//   zincGeometry.setName('Cylinder');
+//   scaffoldVuer.addZincObject(zincGeometry);
+// };
 
 export const testSlides = async (scaffoldVuer, texture_prefix) => {
   const scaffoldModule = scaffoldVuer.$module;
   const texture = await getTexture(scaffoldModule, texture_prefix);
   const textureSlides = new scaffoldModule.Zinc.TextureSlides(texture);
-  textureSlides.setName("Texture slides");
+  textureSlides.setName('Texture slides');
   textureSlides.createSlides([
     {
-      direction: "y",
+      direction: 'y',
       value: 0.1,
     },
     {
-      direction: "y",
+      direction: 'y',
       value: 0.3,
     },
     {
-      direction: "y",
+      direction: 'y',
       value: 0.5,
     },
     {
-      direction: "y",
+      direction: 'y',
       value: 0.7,
     },
     {
-      direction: "y",
+      direction: 'y',
       value: 0.9,
     },
     {
-      direction: "x",
+      direction: 'x',
       value: 0.5,
     },
     {
-      direction: "z",
+      direction: 'z',
       value: 0.5,
     },
   ]);
@@ -125,25 +108,24 @@ export const testSlides = async (scaffoldVuer, texture_prefix) => {
 
 const padNumber = (number) => {
   let string = number.toString();
-  while(string.length < 4) {
-    string = "0" + string;
+  while (string.length < 4) {
+    string = '0' + string;
   }
   return string;
-}
+};
 
 const getArmTexture = async (scaffoldModule) => {
   const imgArray = [];
-  const prefix = "https://mapcore-bucket1.s3.us-west-2.amazonaws.com/texture/arm1/jpg";
+  const prefix = 'https://mapcore-bucket1.s3.us-west-2.amazonaws.com/texture/arm1/jpg';
   const texture = new scaffoldModule.Zinc.TextureArray();
   for (let i = 984; i <= 2184;) {
     imgArray.push(`${prefix}/${padNumber(i)}.jpg`);
-    i = i + 10 ;
+    i = i + 10;
   }
   await texture.loadFromImages(imgArray);
   return texture;
 };
 
-
 /*
 {
     "id": "mesh-location-orientation",
@@ -162,8 +144,8 @@ const getArmTexture = async (scaffoldModule) => {
 */
 
 //https://threejs.org/docs/#manual/en/introduction/Matrix-transformations
-const applyTransformation = (scaffoldVuer, mesh, rotation, position, scale, reference) => {
-  //if (reference === "centre") {
+const applyTransformation = (scaffoldVuer, mesh, rotation, position, scale, _reference) => {
+  //if (_reference === "centre") {
   //  mesh.geometry.translate(-0.5, -0.5, -0.5);
   //}
   const THREE = scaffoldVuer.$module.Zinc.THREE;
@@ -184,48 +166,40 @@ const applyTransformation = (scaffoldVuer, mesh, rotation, position, scale, refe
     0,
     0,
     0,
-    0
+    0,
   );
   const quaternion = new THREE.Quaternion().setFromRotationMatrix(matrix);
   mesh.position.set(...position);
-  mesh.quaternion.copy( quaternion );
+  mesh.quaternion.copy(quaternion);
   mesh.scale.set(...scale);
   mesh.updateMatrix();
-}
-
-
+};
 
 export const testArmSlides = async (scaffoldVuer) => {
   const scaffoldModule = scaffoldVuer.$module;
   const texture = await getArmTexture(scaffoldModule);
   const textureSlides = new scaffoldModule.Zinc.TextureSlides(texture);
-  textureSlides.setName("Arm texture");
+  textureSlides.setName('Arm texture');
   textureSlides.createSlides([
     {
-      direction: "x",
+      direction: 'x',
       value: 0.5,
     },
     {
-      direction: "y",
+      direction: 'y',
       value: 0.5,
     },
     {
-      direction: "z",
+      direction: 'z',
       value: 0.5,
     },
   ]);
 
-  const rotation = [
-    0, 0, 1,
-    0, 1, 0,
-    -1, 0, 0
-  ];
+  const rotation = [0, 0, 1, 0, 1, 0, -1, 0, 0];
   const position = [0, -1.0, 0.95];
   const scale = [1.6, 1.6, 1.2];
-  const reference = "corner";
+  const reference = 'corner';
   applyTransformation(scaffoldVuer, textureSlides.morph, rotation, position, scale, reference);
   scaffoldVuer.addZincObject(textureSlides);
   scaffoldVuer.fitWindow();
 };
-
-

package/src/assets/_variables.scss

@@ -1,15 +1,15 @@
 // Primary colors
-$purple: #8300BF;
-$darkBlue: #24245B;
+$purple: #8300bf;
+$darkBlue: #24245b;
 $grey: #303133;
 
 // Secondary colors
-$lightPurple: #BC00FC;
-$blue: #0026FF;
+$lightPurple: #bc00fc;
+$blue: #0026ff;
 
 // Status colors
 $success: #5e9f69;
-$warning: #FF8400;
+$warning: #ff8400;
 $danger: #b51d09;
 
 // Text colors
@@ -18,12 +18,12 @@ $mediumGrey: #606266;
 $lightGrey: #909399;
 
 // Line colors
-$lineColor1: #DCDFE6;
-$lineColor2: #E4E7ED;
+$lineColor1: #dcdfe6;
+$lineColor2: #e4e7ed;
 
 // Background colors
-$background: #F5F7FA;
-$cochlear: #FFFFFF;
+$background: #f5f7fa;
+$cochlear: #ffffff;
 
 //Search box colors
 $darkGrey: #606266;
@@ -33,7 +33,9 @@ $app-secondary-color: $darkBlue;
 $text-color: $grey;
 $input-text: $grey;
 
-$system-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+$system-font:
+  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+  'Helvetica Neue', sans-serif !important;
 $font-family: 'Asap', sans-serif;
 
 // Viewport Sizes

package/src/components/GlyphsControls.vue

@@ -1,33 +1,17 @@
 <template>
   <el-container class="glyph-container">
-    <el-checkbox
-      v-model="displayLabels"
-      class="block"
-    >
-      Display labels
-    </el-checkbox>
+    <el-checkbox v-model="displayLabels" class="block">Display labels</el-checkbox>
   </el-container>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
 import { markRaw } from 'vue';
-import {
-  ElCheckbox as Checkbox,
-  ElContainer as Container,
-  ElMain as Main,
-} from "element-plus";
 
 /**
  * A component to control the opacity of the target object.
  */
 export default {
-  name: "GlyphsControls",
-  components: {
-    Checkbox,
-    Container,
-    Main,
-  },
+  name: 'GlyphsControls',
   data: function () {
     return {
       displayLabels: true,
@@ -45,7 +29,7 @@ export default {
     },
   },
   methods: {
-    reset: function() {
+    reset: function () {
       this.displayLabels = true;
     },
     setObject: function (object) {
@@ -62,7 +46,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
 .block {
   left: 40px;
   :deep(.el-checkbox__label) {
@@ -75,7 +58,4 @@ export default {
   height: auto;
   overflow-y: none;
 }
-
-
-
 </style>