@abi-software/scaffoldvuer 0.1.1 → 0.1.5-1.beta.0

package/package.json

@@ -1,6 +1,18 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.1",
+  "version": "0.1.51.beta.0",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ABI-Software/scaffoldvuer.git"
+  },
+  "scripts": {
+    "serve": "vue-cli-service serve --port 8081",
+    "lint": "vue-cli-service lint --ext .js,.vue src",
+    "build-bundle": "vue-cli-service build --target lib --name scaffoldvuer ./src/components/index.js",
+    "styleguide": "vue-cli-service styleguidist",
+    "styleguide:build": "vue-cli-service styleguidist:build"
+  },
   "main": "./dist/scaffoldvuer.common.js",
   "files": [
     "dist/*",
@@ -9,26 +21,37 @@
     "*.json",
     "*.js"
   ],
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build-bundle": "vue-cli-service build --target lib --name scaffoldvuer ./src/components/index.js",
-    "lint": "vue-cli-service lint"
-  },
   "dependencies": {
+    "@abi-software/svg-sprite": "^0.1.13",
+    "axios": "^0.21.2",
     "core-js": "^3.3.2",
-    "physiomeportal": "^0.4.9",
-    "vue": "^2.6.10"
+    "current-script-polyfill": "^1.0.0",
+    "element-ui": "^2.13.0",
+    "google-spreadsheet": "^3.1.15",
+    "lodash": "^4.17.21",
+    "physiomeportal": "^0.4.27",
+    "query-string": "^6.11.1",
+    "vue": "^2.6.10",
+    "vue-drag-resize": "^1.3.2",
+    "vue-router": "^3.5.1",
+    "zincjs": "^0.40.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",
     "@vue/cli-plugin-eslint": "^4.0.0",
-    "@vue/cli-service": "^4.0.0",
+    "@vue/cli-service": "^4.5.13",
     "babel-eslint": "^10.0.3",
+    "babel-plugin-component": "^1.1.1",
+    "base64-inline-loader": "^1.1.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.14.1",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-styleguidist": "^4.32.2",
+    "vue-styleguidist": "^4.38.1",
     "vue-template-compiler": "^2.6.10",
-    "raw-loader": "^0.5.1"
+    "webpack-node-externals": "^2.5.2"
   },
   "eslintConfig": {
     "root": true,

package/src/App.vue

@@ -1,29 +1,390 @@
 <template>
   <div id="app">
-    <ScaffoldVuer url="https://mapcore-bucket1.s3-us-west-2.amazonaws.com/ISAN/scaffold/use_case4/rat_heart_metadata.json"/>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap"
+    >
+    <ScaffoldVuer
+      ref="scaffold"
+      class="vuer"
+      :display-u-i="displayUI"
+      :url="url"
+      :help-mode="helpMode"
+      :display-minimap="displayMinimap"
+      :display-markers="displayMarkers"
+      :minimap-settings="minimapSettings"
+      :show-colour-picker="showColourPicker"
+      :render="render"
+      :region="region"
+      :view-u-r-l="viewURL"
+      @scaffold-selected="onSelected"
+      @timeChanged="updateCurrentTime"
+    />
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      width="500"
+      class="popover"
+      :append-to-body="false"
+    >
+      <div class="options-container">
+        <el-row :gutter="20">
+          <p>{{ selectedCoordinates }}</p>
+        </el-row>
+        <el-row
+          class="app-row"
+          :gutter="20"
+        >
+          <p v-if="currentTime!==0">
+            time emited is: {{ currentTime.toFixed(2) }}
+          </p>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col
+            :span="6"
+            :offset="2"
+          >
+            <el-switch
+              v-model="displayMarkers"
+              active-text="Markers"
+              active-icon-class="el-icon-location"
+              active-color="#8300bf"
+            />
+          </el-col>
+          <el-col
+            :span="6"
+            :offset="2"
+          >
+            <el-switch
+              v-model="displayMinimap"
+              active-text="Minimap"
+              active-icon-class="el-icon-discover"
+              active-color="#8300bf"
+            />
+          </el-col>
+          <el-col
+            :span="6"
+            :offset="2"
+          >
+            <el-switch
+              v-model="tumbleOn"
+              active-text="Tumble"
+              active-color="#8300bf"
+            />
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-button
+            size="mini"
+            @click="helpMode = !helpMode"
+          >
+            Help Mode
+          </el-button>
+          <el-button
+            size="mini"
+            @click="screenCapture()"
+          >
+            Capture
+          </el-button>
+        </el-row>
+        <el-row :gutter="20">
+          <el-button
+            size="mini"
+            @click="saveSettings()"
+          >
+            Save Settings
+          </el-button>
+          <el-button
+            size="mini"
+            @click="restoreSettings()"
+          >
+            Restore Settings
+          </el-button>
+          <el-button
+            size="mini"
+            @click="exportGLB()"
+          >
+            Export GLTF
+          </el-button>
+        </el-row>
+        <el-row :gutter="20">
+          <el-row :gutter="20">
+            <el-switch
+              v-model="render"
+              active-text="Rendering"
+              active-color="#8300bf"
+            />
+          </el-row>
+        </el-row>
+        <el-input
+          v-model="input"
+          type="textarea"
+          autosize
+          placeholder="Please input"
+          style="padding-left:5%;width:90%;"
+        />
+      </div>
+      <el-button
+        slot="reference"
+        icon="el-icon-setting"
+      >
+        Options
+      </el-button>
+    </el-popover>
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      width="800"
+      class="models-popover"
+      popper-class="table-popover"
+      :append-to-body="false"
+    >
+      <ModelsTable @viewModelClicked="viewModelClicked" />
+      <el-button
+        slot="reference"
+        icon="el-icon-folder-opened"
+      >
+        Models
+      </el-button>
+    </el-popover>
   </div>
 </template>
 
 <script>
-import ScaffoldVuer from './components/ScaffoldVuer.vue'
+/* eslint-disable no-alert, no-console */
+import { ScaffoldVuer } from "./components/index.js";
+import ModelsTable from "./components/ModelsTable.vue";
+import Vue from "vue";
+import { Button, Col, Icon, Input, Popover, Row, Switch } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
 
+locale.use(lang);
+Vue.use(Button);
+Vue.use(Col);
+Vue.use(Icon);
+Vue.use(Input);
+Vue.use(Popover);
+Vue.use(Row);
+Vue.use(Switch);
+
+/*
+const alignToObject = function(cameracontrol, scene) {
+  var object = scene.findGeometriesWithGroupName("Endocardium of left atrium")[0];
+  const boundingBox = object.getBoundingBox();
+  if (boundingBox) {
+    const radius = boundingBox.min.distanceTo(boundingBox.max)/2.0;
+    const centreX = (boundingBox.min.x + boundingBox.max.x) / 2.0;
+    const centreY = (boundingBox.min.y + boundingBox.max.y) / 2.0;
+    const centreZ = (boundingBox.min.z + boundingBox.max.z) / 2.0;
+    const clip_factor = 8.0;
+    const endingViewport = cameracontrol.getViewportFromCentreAndRadius(centreX, centreY, centreZ, radius, 40, radius * clip_factor );
+    const startingViewport = cameracontrol.getCurrentViewport();
+    cameracontrol.cameraTransition(startingViewport, endingViewport, 1500);
+    cameracontrol.enableCameraTransition();
+  }
+  setTimeout(function(){ tumble(cameracontrol) }, 2000);
+}
+
+const tumble = function(cameracontrol) {
+  cameracontrol.enableAutoTumble();
+  cameracontrol.autoTumble([1.0, 0.0], Math.PI / 2, true);
+}
+*/
 export default {
-  name: 'app',
+  name: "App",
   components: {
-    ScaffoldVuer
+    ScaffoldVuer,
+    ModelsTable
+  },
+  data: function() {
+    return {
+      url: undefined,
+      input: undefined,
+      displayUI: true,
+      selectedCoordinates: undefined,
+      helpMode: false,
+      displayMarkers: true,
+      currentTime: 0,
+      displayMinimap: true,
+      tumbleOn: false,
+      showColourPicker: true,
+      minimapSettings: {
+        x_offset: 16,
+        y_offset: 50,
+        width: 128,
+        height: 128,
+        align: "top-right"
+      },
+      render: true,
+      region: "",
+      viewURL: ""
+    };
+  },
+  watch: {
+    input: function() {
+      this.parseInput();
+    },
+    tumbleOn: function(val) {
+      this.autoTumble(val);
+    },
+    "$route.query": {
+      handler: "parseQuery",
+      deep: true,
+      immediate: true
+    }
+  },
+
+  mounted: function() {
+    this._sceneSettings = [];
+    this.selectedCoordinates = this.$refs.scaffold.getDynamicSelectedCoordinates();
+  },
+  methods: {
+    exportGLTF: function() {
+      this.$refs.scaffold.exportGLTF(false)
+        .then(data =>{
+          let dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data));
+          let hrefElement = document.createElement("a");
+          document.body.append(hrefElement);
+          hrefElement.download = `export.gltf`;
+          hrefElement.href = dataStr;
+          hrefElement.click();
+          hrefElement.remove();
+        })
+    },
+    exportGLB: function() {
+      this.$refs.scaffold.exportGLTF(true)
+        .then(data =>{
+          let blob = new Blob([data], {type: "octet/stream"});
+          let url = window.URL.createObjectURL(blob);
+          let hrefElement = document.createElement("a");
+          document.body.append(hrefElement);
+          hrefElement.download = `export.glb`;
+          hrefElement.href = url;
+          hrefElement.click();
+          hrefElement.remove();
+        })
+    },
+    saveSettings: function() {
+      this._sceneSettings.push(this.$refs.scaffold.getState());
+    },
+    restoreSettings: function() {
+      if (this._sceneSettings.length > 0)
+        this.$refs.scaffold.setState(this._sceneSettings.pop());
+    },
+    viewModelClicked: function(location) {
+      this.input = location;
+    },
+    screenCapture: function() {
+      this.$refs.scaffold.captureScreenshot("capture.png");
+    },
+    autoTumble: function(flag) {
+      let cameracontrol = this.$refs.scaffold.$module.scene.getZincCameraControls();
+      if (flag) {
+        this.displayUI = false;
+        cameracontrol.enableAutoTumble();
+        cameracontrol.autoTumble([1.0, 0.0], Math.PI / 2, true);
+      } else {
+        this.displayUI = true;
+        cameracontrol.stopAutoTumble();
+      }
+    },
+    onSelected: function(data) {
+      if (data && data[0].data.group) {
+        delete this.$route.query["viewURL"];
+        this.$router.replace({
+          query: { ...this.$route.query, region: data[0].data.group }
+        });
+      }
+    },
+    parseInput: function() {
+      if (this.$route.query.url !== this.input)
+        this.$router.replace({
+          query: { ...this.$route.query, url: this.input }
+        });
+    },
+    updateCurrentTime: function(val) {
+      this.currentTime = val;
+    },
+    parseQuery: function(query) {
+      if (query.url) {
+        this.url = query.url;
+      } else {
+        this.url =
+          "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json";
+      }
+      this.input = this.url;
+      if (query.region) {
+        this.region = query.region;
+      } else {
+        this.region = "";
+      }
+      if (query.viewURL) {
+        this.viewURL = query.viewURL;
+      } else {
+        this.viewURL = "";
+      }
+    }
   }
-}
+};
 </script>
 
-<style>
+<style lang="scss">
+@import "~element-ui/packages/theme-chalk/src/button";
+@import "~element-ui/packages/theme-chalk/src/col";
+@import "~element-ui/packages/theme-chalk/src/icon";
+@import "~element-ui/packages/theme-chalk/src/input";
+@import "~element-ui/packages/theme-chalk/src/switch";
+@import "~element-ui/packages/theme-chalk/src/popover";
+@import "~element-ui/packages/theme-chalk/src/row";
+
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Asap", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  height:100%;
+  height: 100%;
   width: 100%;
-  position:absolute;
+  position: absolute;
+  overflow: hidden;
+}
+
+body {
+  margin: 0px;
+}
+
+.options-container {
+  text-align: center;
+}
+
+.vuer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.popover {
+  top: 5px;
+  right: 10px;
+  position: absolute;
+}
+
+.app-row {
+  .el-row {
+    margin-bottom: 5px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.models-popover {
+  top: 5px;
+  position: absolute;
+}
+
+.table-popover {
+  opacity: 0.9;
 }
 </style>

package/src/assets/_variables.scss

@@ -0,0 +1,43 @@
+// Primary colors
+$purple: #8300BF;
+$darkBlue: #24245B;
+$grey: #303133;
+
+// Secondary colors
+$lightPurple: #BC00FC;
+$blue: #0026FF;
+
+// Status colors
+$success: #5e9f69;
+$warning: #FF8400;
+$danger: #b51d09;
+
+// Text colors
+$neutralGrey: #616161;
+$mediumGrey: #606266;
+$lightGrey: #909399;
+
+// Line colors
+$lineColor1: #DCDFE6;
+$lineColor2: #E4E7ED;
+
+// Background colors
+$background: #F5F7FA;
+$cochlear: #FFFFFF;
+
+//Search box colors
+$darkGrey: #606266;
+
+$app-primary-color: $purple;
+$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;
+$font-family: 'Asap', sans-serif;
+
+// Viewport Sizes
+$viewport-sm: 20rem;
+$viewport-md: 47rem;
+$viewport-lg: 64rem;
+$viewport-xlg: 120rem;

package/src/assets/styles.scss

@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
+
+@import '_variables';
+
+/* icon font path, required */
+$--color-primary: $app-primary-color !default;
+$--font-path: '~element-ui/lib/theme-chalk/fonts';

package/src/components/ModelsInformation.js

@@ -0,0 +1,35 @@
+const { GoogleSpreadsheet } = require('google-spreadsheet');
+
+/* eslint-disable no-alert, no-console */
+export default {
+  data: function() {
+    return {
+      tableData: [],
+    };
+  },
+  methods: {
+    createTable: async function(sheetRows, keywords) {
+      for (let i = 0; i < sheetRows.length; i++) {
+        let mappedData = {};
+        for (let j = 0; j < keywords.length; j++) {
+          let keyword = keywords[j];
+          mappedData[keyword] = sheetRows[i][keyword];
+        }
+        this.tableData.push(mappedData);
+      }
+    },
+    getModelsInformation: async function() {
+      const doc = new GoogleSpreadsheet(process.env.VUE_APP_GOOGLE_SPREADSHEET_ID);
+      await doc.useServiceAccountAuth({
+        client_email: process.env.VUE_APP_GOOGLE_SERVICE_SCAFFOLDVUER_EMAIL,
+        private_key: process.env.VUE_APP_GOOGLE_PRIVATE_SCAFFOLDVUER_KEY,
+      });
+      await doc.loadInfo(); // loads document properties and worksheets
+      const sheet = doc.sheetsByIndex[0];
+      const sheetRows = await sheet.getRows();
+      const keys = ["Organ", "Species", "Note", "Location",
+        "Last modified","Blackfynn dataset", "Published", "Discover"];
+      this.createTable(sheetRows, keys);
+    }
+  }
+}

package/src/components/ModelsTable.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <el-input
+      v-model="search"
+      size="mini"
+      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%;"
+      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"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="handleView(scope.row)"
+          >
+            View
+          </el-button>
+          <el-button
+            v-if="scope.row.Discover !== 'Not even'"
+            size="mini"
+            @click="handleDiscover(scope.row)"
+          >
+            Discover
+          </el-button>
+          <el-button
+            v-if="scope.row['Blackfynn dataset'] !== '/'"
+            size="mini"
+            @click="handleBlackfynn(scope.row)"
+          >
+            Blackfynn
+          </el-button>
+        </template>
+      </el-table-column>   
+    </el-table>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import models from './ModelsInformation'
+import { Button, Input, Table, TableColumn } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+locale.use(lang);
+Vue.use(Button);
+Vue.use(Input);
+Vue.use(Table);
+Vue.use(TableColumn);
+
+
+export default {
+  name: "ModelsTable",
+  mixins: [models],
+  data() {
+    return {
+      search: '',
+    }
+  },
+  created: function() {
+    this.getModelsInformation();
+  },
+  methods: {
+    handleView: function(row) {
+      this.$emit("viewModelClicked", row.Location);
+    },
+    handleDiscover: function(row) {
+      window.open(row.Discover, "_blank");
+    },
+    handleBlackfynn: function(row) {
+      window.open(row['Blackfynn dataset'], "_blank");
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/input";
+@import "~element-ui/packages/theme-chalk/src/table";
+@import "~element-ui/packages/theme-chalk/src/table-column";
+</style>