@abi-software/mapintegratedvuer 0.7.1-demo.0 → 0.7.1-vue3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "0.7.1-demo.0",
+  "version": "0.7.1-vue3.0",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -16,7 +16,13 @@
     "release:beta": "npm version prerelease --force --preid=beta; npm publish --access public --tag beta",
     "release:minor": "npm version minor --force; npm publish --access public",
     "release:patch": "npm version patch --force;  npm publish --access public",
-    "version": "npm run changelog; git add CHANGELOG.md"
+    "version": "npm run changelog; git add CHANGELOG.md",
+    "vuese-gen": "node vuese-generator.js",
+    "vuese-watch": "node vuese-generator.js watch",
+    "docs:dev": "vitepress dev docs",
+    "docs:watch": "concurrently \"npm run vuese-watch\" \"npm run docs:dev\"",
+    "docs:build": "npm run vuese-gen; vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "repository": {
     "type": "git",
@@ -42,32 +48,22 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "0.6.1-demo-0",
+    "@abi-software/flatmapvuer": "^0.6.1-vue3.9",
     "@abi-software/map-side-bar": "^1.7.0-vue3.4",
     "@abi-software/plotvuer": "^0.4.0-vue-3-alpha.10",
     "@abi-software/scaffoldvuer": "^0.4.0-vue3.6",
     "@abi-software/simulationvuer": "^0.7.0-vue-3-alpha.5",
-    "@abi-software/svg-sprite": "0.4.0-vue3.3",
+    "@abi-software/svg-sprite": "^0.4.0-vue3.3",
     "@cypress/vite-dev-server": "^5.0.7",
     "@element-plus/icons-vue": "^2.3.1",
     "@pinia/testing": "^0.1.3",
-    "@soda/get-current-script": "^1.0.2",
-    "core-js": "^3.22.5",
     "css-element-queries": "^1.2.3",
-    "d3-time-format": "^3.0.0",
     "element-plus": "^2.4.4",
-    "es6-promise": "^4.2.8",
-    "jsonschema": "^1.4.0",
-    "lodash": "^4.17.21",
     "marked": "^4.3.0",
     "mitt": "^3.0.1",
     "pinia": "^2.1.7",
-    "postcss-prefix-selector": "^1.7.2",
-    "shepherd.js": "^7.1.5",
     "splitpanes": "^3.1.5",
-    "svg-inline-loader": "^0.8.2",
     "vue": "^3.4.15",
-    "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0",
     "xss": "^1.0.14"
@@ -76,12 +72,14 @@
     "@cypress/webpack-dev-server": "^1.3.1",
     "@vitejs/plugin-vue": "^4.6.2",
     "@vue/test-utils": "^2.4.4",
+    "@vuese/markdown-render": "^2.11.3",
+    "@vuese/parser": "^2.10.3",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.0.3",
     "babel-plugin-component": "^1.1.1",
-    "base64-inline-loader": "^2.0.1",
-    "canvas": "^2.8.0",
     "chai": "^4.1.2",
+    "chokidar": "^3.6.0",
+    "concurrently": "^8.2.2",
     "cypress": "^13.6.4",
     "cypress-multi-reporters": "^1.6.4",
     "cypress-wait-until": "^1.7.1",
@@ -99,6 +97,7 @@
     "mochawesome-report-generator": "^6.2.0",
     "sass": "^1.69.5",
     "vite": "^5.0.10",
+    "vitepress": "^1.0.0-rc.45",
     "vitest": "^1.2.2"
   },
   "eslintConfig": {

package/src/App.vue

@@ -240,6 +240,6 @@ body {
 }
 
 .map-icon {
-  color: $app-primary-color;
+  color: $app-primary-color!important;
 }
 </style>

package/src/components/MapContent.vue

@@ -7,7 +7,7 @@
       element-loading-background="rgba(0, 0, 0, 0.3)"
     >
       <map-svg-sprite-color/>
-      <SplitFlow 
+      <SplitFlow
         v-if="isReady"
         @onFullscreen="onFullscreen"
         :state="stateToSet"
@@ -41,19 +41,31 @@ export default {
     SplitFlow,
   },
   props: {
+    /**
+     * A link (URL) to share.
+     */
     shareLink: {
       type: String,
       default: undefined
     },
+    /**
+     * State containing state of the scaffold.
+     */
     state: {
       type: Object,
       default: undefined
     },
+    /**
+     * The options include APIs and Keys.
+     */
     options: {
-      type: Object, 
-      default: () => {}
+      type: Object,
+      default: () => {},
+      required: true
     },
-    //New option to start the map in AC, FC or WholeBody
+    /**
+     * New option to start the map in AC, FC or WholeBody.
+     */
     startingMap: {
       type: String,
       default: "AC"
@@ -66,10 +78,20 @@ export default {
     }
   },
   methods: {
+    /**
+     * @vuese
+     * Function to check whether it is in fullscreen mode or not.
+     *
+     */
     isFullscreen: function(){
       return (document.fullscreenElement || document.webkitFullscreenElement ||
         document.mozFullScreenElement || document.msFullscreenElement )
     },
+    /**
+     * @vuese
+     * Function to toggle fullscreen.
+     * @arg fullscreenRequest
+     */
     onFullscreen: function(fullscreenReq) {
       //If a request is sent, try it
       if (fullscreenReq !== undefined){
@@ -89,6 +111,10 @@ export default {
         }
       }
     },
+    /**
+     * @vuese
+     * Function to leave fullscreen mode.
+     */
     leaveFullscreen: function(){
       if (this.isFullscreen()) {
         if (document.exitFullscreen) {
@@ -102,6 +128,10 @@ export default {
         }
       }
     },
+    /**
+     * @vuese
+     * Function to go to fullscreen mode.
+     */
     goFullscreen: function(){
       let mapApp = this.$refs.MapApp;
       if (mapApp.requestFullscreen) {
@@ -121,11 +151,12 @@ export default {
       return this.$refs.flow.getState();
     },
     /**
+     * @vuese
      * Provide a way to set the current view, this is currently limited
      * to setting view for flatmapm, multiflatmap or scaffold.
      * In the case of the multiflatmap, it will not create a new entry and
      * instead change the current entry by setting the state.
-     * 
+     * @arg state
      */
     setCurrentEntry: function(state) {
       if (state && state.type) {
@@ -135,7 +166,7 @@ export default {
           //  region - Which region/group currently focusing on
           //  resource - the url to metadata
           //  state - state to restore (viewport)
-          //  viewUrl - relative path of the view file to metadata 
+          //  viewUrl - relative path of the view file to metadata
           const newView = {
             type: state.type,
             label: state.label,
@@ -150,7 +181,7 @@ export default {
           //  label - Setting the name of the dialog
           //  taxo - taxo of species to set
           //  biologicalSex - biological sex to be displayed (PATO)
-          //  organ - Target organ, flatmap will conduct a local search 
+          //  organ - Target organ, flatmap will conduct a local search
           //          using this
 
           //Look for the key in the available species array,
@@ -186,7 +217,7 @@ export default {
           //  region - Which region/group currently focusing on
           //  resource - the url to metadata
           //  state - state to restore (viewport)
-          //  viewUrl - relative path of the view file to metadata 
+          //  viewUrl - relative path of the view file to metadata
           const newView = {
             type: state.type,
             resource: state.resource,
@@ -194,17 +225,26 @@ export default {
             label: state.label
           };
           this.$refs.flow.createNewEntry(newView);
-        } 
-      } 
+        }
+      }
     },
     /**
+     * @vuese
      * Open the sidebar with the specified facets and query.
+     * @arg facets, query
      */
     openSearch: function(facets, query) {
       return this.$refs.flow.openSearch(facets, query);
     },
+    /**
+     * @vuese
+     * Function to run when the component is mounted.
+     */
     flowMounted: function () {
       this._flowMounted = true;
+      /**
+       * This event emit when the component is mounted.
+       */
       this.$emit("isReady");
     },
   },
@@ -237,6 +277,9 @@ export default {
   },
   mounted: async function() {
     EventBus.on("updateShareLinkRequested", () => {
+      /**
+       * This event emits when the share link is requested.
+       */
       this.$emit("updateShareLinkRequested");
     });
     if (!this.state) {

package/src/components/viewers/MultiFlatmap.vue

@@ -43,7 +43,7 @@ const getOpenMapOptions = (species) => {
       key: "FC"
     },
     {
-      display: "Open 3D Human Map", 
+      display: "Open 3D Human Map",
       key: "3D"
     },
   ]
@@ -52,7 +52,7 @@ const getOpenMapOptions = (species) => {
     case "Human Female":
     case "Rat":
       options.push({
-        display: "Open Sync Map", 
+        display: "Open Sync Map",
         key: "SYNC"
       });
       break;
@@ -98,7 +98,7 @@ export default {
         } else if ((this.activeSpecies === "Human Male") || (this.activeSpecies === "Human Female")) {
           //Dynamically construct the whole body scaffold for human and store it
           if (!("human" in this.scaffoldResource)) {
-            this.scaffoldResource["human"] = await getBodyScaffoldInfo(this.apiLocation, "human");
+            this.scaffoldResource["human"] = await getBodyScaffoldInfo(storeeSettings.sparcApi, "human");
           }
           action = {
             contextCardUrl: this.scaffoldResource["human"].datasetInfo.contextCardUrl,
@@ -256,7 +256,7 @@ export default {
       }
     },
     getFlatmapImp: function () {
-      if (this.entry.type === "MultiFlatmap") {
+      if (this.entry.type === "MultiFlatmap" && this.flatmapReady) {
         return this.$refs.multiflatmap.getCurrentFlatmap()["mapImp"];
       } else {
         return undefined;

package/src/main.js

@@ -3,9 +3,10 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import * as VueRouter from 'vue-router'
 import App from './App.vue'
+import { useMainStore } from './stores/index'
 
 const routes = [
-  { path: '/'},
+  { path: '/' },
 ]
 
 const router = VueRouter.createRouter({
@@ -19,4 +20,13 @@ const app = createApp(App)
 
 app.use(pinia)
 app.use(router)
-app.mount('#app')
+
+const mainStore = useMainStore()
+const token = document.cookie
+  .split("; ")
+  .find((row) => row.startsWith("user-token"))
+if (mainStore && token) {
+  mainStore.setUserToken(token.split("=")[1])
+}
+
+app.mount('#app')

package/src/stores/index.js

@@ -1,16 +1,24 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import entries from './modules/entries';
-import settings from './modules/settings';
-import splitFlow from './modules/splitFlow';
-Vue.use(Vuex);
+import { defineStore } from 'pinia'
 
-export const store = new Vuex.Store({
-  modules: {
-    entries,
-    splitFlow,
-    settings,
+/**
+ * Activate the store when run the application individually.
+ * If the store exist in parent application, 
+ * instead of creating a new store it will access the parent main store.
+ */
+export const useMainStore = defineStore('main', {
+  state: () => ({
+    userProfile: {
+      token: ''
+    },
+  }),
+  getters: {
+    userToken(state) {
+      return state.userProfile.token
+    },
+  },
+  actions: {
+    setUserToken(value) {
+      this.userProfile.token = value
+    },
   }
-});
-
-export default store;
+})

package/vite.config.js

@@ -1,5 +1,4 @@
 import path from "path";
-const pathSrc = path.resolve(__dirname, "./src");
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
@@ -29,7 +28,7 @@ export default defineConfig(({ command, mode }) => {
           ],
           dts: 'src/components.d.ts',
         }),
-    
+
         // https://github.com/antfu/unocss
         // see unocss.config.ts for config
     ],
@@ -49,6 +48,11 @@ export default defineConfig(({ command, mode }) => {
         },
       },
     },
+    // for cypress component test
+    // to prevent reloading after optimized dependencies changed
+    optimizeDeps: {
+      exclude: ['vue-router'],
+    },
   };
 
   if (command === 'serve') {

package/vuese-generator.js

@@ -0,0 +1,65 @@
+/**
+ * Vuese Generator
+ *
+ * To generate markdown files from Vue components
+ * To watch components changes for Vitepress on Dev Mode
+ */
+
+import fs from 'fs'
+import path from 'path'
+import chokidar from 'chokidar'
+import { parser } from '@vuese/parser'
+import { Render } from '@vuese/markdown-render'
+
+const watchMode = process.argv.find((argv) => argv === 'watch')
+
+const componentsDir = 'src/components'
+const components = ['MapContent.vue']
+const outputDir = 'docs/components'
+
+function generateMarkdown(file) {
+  const fileWithPath = `${componentsDir}/${file}`
+  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
+
+  try {
+    const parserResult = parser(fileContent)
+    const r = new Render(parserResult)
+    const renderResult = r.render()
+    const markdownResult = r.renderMarkdown()
+    const markdownContent = markdownResult.content
+    const componentName = path.basename(fileWithPath, '.vue')
+
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir)
+    }
+
+    fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
+      if (err) {
+        console.error(`Error writing markdown file for ${componentName}`, err)
+      } else {
+        console.log(`Markdown file for ${componentName} is generated!`)
+      }
+    })
+  } catch(e) {
+    console.error(e)
+  }
+}
+
+// To generate markdown files - one time
+components.forEach((component) => {
+  console.log(`Write markdown file for ${component} on first load.`)
+  generateMarkdown(component)
+})
+
+// To watch component changes and generate markdown files
+if (watchMode) {
+  const watcher = chokidar.watch(components, {
+    cwd: componentsDir,
+    ignoreInitial: true,
+  })
+
+  watcher.on('change', (file) => {
+    console.log(`The component ${file} has changed!`)
+    generateMarkdown(file)
+  })
+}