@abi-software/map-side-bar 2.4.2-beta.0 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.4.2-beta.0",
+  "version": "2.4.2",
   "files": [
     "dist/*",
     "src/*",
@@ -38,23 +38,22 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/gallery": "^1.1.1",
-    "@abi-software/map-utilities": "^1.1.0",
-    "@abi-software/svg-sprite": "^1.0.0",
+    "@abi-software/gallery": "^1.1.2",
+    "@abi-software/map-utilities": "^1.1.2",
+    "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",
-    "element-plus": "^2.5.3",
+    "element-plus": "2.8.4",
     "marked": "^4.1.1",
     "mitt": "^3.0.1",
     "unplugin-vue-components": "^0.26.0",
-    "vue": "^3.3.13",
+    "vue": "^3.4.21",
     "xss": "^1.0.14"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
     "@vue/compiler-sfc": "^3.3.13",
     "@vuese/markdown-render": "^2.11.3",
-    "@vuese/parser": "^2.10.3",
     "auto-changelog": "^2.4.0",
     "autoprefixer": "^10.4.17",
     "chokidar": "^3.6.0",
@@ -64,7 +63,6 @@
     "cypress-wait-until": "^3.0.1",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
-    "file-loader": "^5.0.2",
     "mochawesome": "^7.1.3",
     "raw-loader": "^0.5.1",
     "sass": "^1.70.0",
@@ -73,6 +71,6 @@
     "vite": "^5.0.10",
     "vitepress": "^1.0.2",
     "vue-custom-element": "^3.3.0",
-    "webpack-node-externals": "^2.5.2"
+    "vue-docgen-api": "^4.79.2"
   }
 }

package/src/App.vue

@@ -14,7 +14,6 @@
       <el-button @click="neuronSearch">open neuron search</el-button>
       <el-button @click="keywordSearch">keyword search</el-button>
       <el-button @click="getFacets">Get facets</el-button>
-      <el-button @click="showImages">Show Images</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -24,13 +23,10 @@
       :tabs="tabs"
       :activeTabId="activeId"
       :connectivityInfo="connectivityInput"
-      :imageThumbnails="imageThumbnails"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @actionClick="action"
-      @connectivity-info-close="onConnectivityInfoClose"
-      @image-thumbnail-close="onImageThumbnailClose"
     />
   </div>
 </template>
@@ -41,7 +37,6 @@
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
-import imageThumbnails from './data/images.json';
 
 const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
@@ -106,11 +101,7 @@ export default {
   data: function () {
     return {
       contextArray: [null, null],
-      tabArray: [
-        { title: 'Flatmap', id: 1, type: 'search'},
-        { title: 'Connectivity', id: 2, type: 'connectivity' },
-        { title: 'Images', id: 3, type: 'images' },
-      ],
+      tabArray: [{ title: 'Flatmap', id: 1, type: 'search'}, { title: 'Connectivity', id: 2, type: 'connectivity' }],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,
@@ -123,7 +114,6 @@ export default {
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
       },
       connectivityInput: exampleConnectivityInput,
-      imageThumbnails: imageThumbnails,
       activeId: 1,
     }
   },
@@ -234,18 +224,6 @@ export default {
       let facets = await this.$refs.sideBar.getAlgoliaFacets()
       console.log('Algolia facets:', facets)
     },
-    showImages: function () {
-      if (this.$refs.sideBar) {
-        this.tabClicked({id: 3, type: 'images'});
-        this.$refs.sideBar.setDrawerOpen(true);
-      }
-    },
-    onConnectivityInfoClose: function () {
-      console.log('connectivity-info-close');
-    },
-    onImageThumbnailClose: function () {
-      console.log('image-thumbnail-close');
-    },
   },
   mounted: function () {
     console.log('mounted app')

package/src/components/SideBar.vue

@@ -22,11 +22,9 @@
         </div>
         <div class="sidebar-container">
           <Tabs
-            v-if="tabs.length > 1 && (connectivityInfo || imageThumbnails.length)"
+            v-if="tabs.length > 1 && connectivityInfo"
             :tabTitles="tabs"
             :activeId="activeTabId"
-            :hasConnectivityInfo="!!connectivityInfo"
-            :hasImageThumbnails="!!imageThumbnails.length"
             @titleClicked="tabClicked"
             @tab-close="tabClose"
           />
@@ -41,13 +39,6 @@
                 @show-connectivity="showConnectivity"
               />
             </template>
-            <template v-else-if="tab.type === 'images'">
-              <ImageThumbnails
-                v-if="imageThumbnails.length"
-                v-show="tab.id === activeTabId"
-                :imageThumbnails="imageThumbnails"
-              />
-            </template>
             <template v-else>
             <SidebarContent
               class="sidebar-content-container"
@@ -77,7 +68,6 @@ import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import ConnectivityInfo from './ConnectivityInfo.vue'
-import ImageThumbnails from './ImageThumbnails.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -91,7 +81,6 @@ export default {
     Drawer,
     Icon,
     ConnectivityInfo,
-    ImageThumbnails,
   },
   name: 'SideBar',
   props: {
@@ -119,8 +108,7 @@ export default {
       type: Array,
       default: () => [
         { id: 1, title: 'Search', type: 'search' },
-        { id: 2, title: 'Connectivity', type: 'connectivity' },
-        { id: 3, title: 'Images', type: 'images' }, // Temporary
+        { id: 2, title: 'Connectivity', type: 'connectivity' }
       ],
     },
     /**
@@ -144,13 +132,6 @@ export default {
       type: Object,
       default: null,
     },
-    /**
-     * The image thumbnails data to show in sidebar.
-     */
-     imageThumbnails: {
-      type: Array,
-      default: [],
-    },
   },
   data: function () {
     return {
@@ -181,15 +162,15 @@ export default {
       this.$emit('search-changed', { ...data, id: id })
     },
     /**
-     * @vuese
      * The function to close sidebar.
+     * @public
      */
     close: function () {
       this.drawerOpen = false
     },
     /**
-     * @vuese
      * The function to toggle (open and close) sidebar.
+     * @public
      */
     toggleDrawer: function () {
       this.drawerOpen = !this.drawerOpen
@@ -231,9 +212,10 @@ export default {
       return this.$refs[searchTabRefId][0];
     },
     /**
-     * @vuese
      * The function to add filters to sidebar search.
-     * @arg filter `object`
+     *
+     * @param {Object} filter
+     * @public
      */
     addFilter: function (filter) {
       this.drawerOpen = true
@@ -266,25 +248,20 @@ export default {
       this.drawerOpen = value
     },
     /**
-     * @vuese
      * The function to emit 'tabClicked' event with tab's `id` and tab's `type`
      * when user clicks the sidebar tab.
-     * @arg {id, type}
+     * @param {Object} {id, type}
+     * @public
      */
     tabClicked: function ({id, type}) {
       /**
        * This event is emitted when user click sidebar's tab.
-       * @arg {id, type}
+       * @arg {Object} {id, type}
        */
       this.$emit('tabClicked', {id, type});
     },
     tabClose: function (id) {
-      const closedTab = this.tabs.find((tab) => tab.id === id);
-      if (closedTab.type === 'connectivity') {
-        this.$emit('connectivity-info-close');
-      } else if (closedTab.type === 'images') {
-        this.$emit('image-thumbnail-close');
-      }
+      this.$emit('connectivity-info-close');
     },
   },
   created: function () {

package/src/components/Tabs.vue

@@ -2,7 +2,7 @@
   <div class="tab-container">
     <div
       class="title"
-      v-for="title in titles"
+      v-for="title in tabTitles"
       :key="title.id"
       :class="{ 'active-tab': title.id == activeId }"
     >
@@ -16,7 +16,7 @@
         </div>
       </div>
       <el-button
-        v-if="title.type === 'connectivity' || title.type === 'images'"
+        v-if="title.id === 2"
         @click="tabClose(title.id)"
         class="button-tab-close"
         aria-label="Close"
@@ -42,25 +42,6 @@ export default {
       type: Number,
       default: 1,
     },
-    hasConnectivityInfo: {
-      type: Boolean,
-      default: true,
-    },
-    hasImageThumbnails: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  computed: {
-    titles: function() {
-      if (!this.hasConnectivityInfo) {
-        return this.tabTitles.filter((tab) => tab.type !== 'connectivity');
-      }
-      else if (!this.hasImageThumbnails) {
-        return this.tabTitles.filter((tab) => tab.type !== 'images');
-      }
-      return this.tabTitles;
-    },
   },
   methods: {
     titleClicked: function (id, type) {
@@ -92,7 +73,6 @@ $tab-height: 30px;
   align-items: center;
   position: relative;
   cursor: pointer;
-  z-index: 2;
 }
 
 .title-text {

package/src/components.d.ts

@@ -20,7 +20,6 @@ declare module 'vue' {
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
@@ -29,7 +28,6 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
-    ImageThumbnails: typeof import('./components/ImageThumbnails.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']

package/vuese-generator.js

@@ -8,7 +8,8 @@
 import fs from 'fs'
 import path from 'path'
 import chokidar from 'chokidar'
-import { parser } from '@vuese/parser'
+// import { parser } from '@vuese/parser'
+import { parseSource } from 'vue-docgen-api'
 import { Render } from '@vuese/markdown-render'
 
 const watchMode = process.argv.find((argv) => argv === 'watch')
@@ -22,29 +23,87 @@ function generateMarkdown(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)
-    }
+    // const parserResult = parser(fileContent)
+    const parserResult = parseSource(fileContent, fileWithPath)
+    parserResult.then((result) => {
+      const {
+        displayName: name,
+        description: desc,
+        props,
+        events,
+        methods
+      } = result
+
+      // transform props to vuese styles
+      const parseResult = {
+        name: name,
+        componentDesc: {
+          default: [desc]
+        },
+        props: transformData(props),
+        events: transformData(events),
+        methods: transformData(methods),
+      }
+      const r = new Render(parseResult)
+      const renderResult = r.render()
+      const markdownResult = r.renderMarkdown()
+      const markdownContent = markdownResult.content
+      const componentName = path.basename(fileWithPath, '.vue')
 
-    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!`)
+      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)
   }
 }
 
+function transformData(data) {
+  data.forEach((prop) => {
+    prop.name = prop.name
+
+    if (prop.description) {
+      prop.describe = [prop.description.replaceAll('\n', ' ')]
+    }
+
+    if (prop.type) {
+      prop.type = prop.type.name
+    }
+
+    if (prop.defaultValue) {
+      prop.default = prop.defaultValue.value.replaceAll('\n', ' ')
+    }
+
+    // events
+    if (prop.properties) {
+      prop.argumentsDesc = []
+      prop.properties.forEach((param) => {
+        const argName = param.name || param.description
+        prop.argumentsDesc.push(argName)
+      })
+    }
+
+    // methods
+    if (prop.params) {
+      prop.argumentsDesc = []
+      prop.params.forEach((param) => {
+        const argName = param.name || param.description
+        prop.argumentsDesc.push(argName)
+      })
+    }
+  })
+  return data
+}
+
 // To generate markdown files - one time
 components.forEach((component) => {
   console.log(`Write markdown file for ${component} on first load.`)