better align styles to wireframes. Add entire dashboard as a storybook.

nih-sparc · Apr 1, 2024 · 351557a · 351557a
1 parent 16645ee
commit 351557a
Show file tree

Hide file tree

Showing 13 changed files with 205 additions and 33 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,11 +1,23 @@
 /** @type { import('@storybook/vue3').Preview } */
 import { setup, app } from '@storybook/vue3'
-
+import { defineAsyncComponent } from 'vue'
+import DesignSystemComponentsPlugin from 'sparc-design-system-components-2'
 import 'element-plus/dist/index.css';
 import sparcTheme from './sparcTheme'
 import ElementPlus from 'element-plus'
 import { createPinia } from 'pinia';
+import { GridStack } from 'gridstack';
 import mitt from 'mitt';
+import { useGlobalVarsStore } from '../src/stores/globalVars.ts'
+import "../dist/output.css"
+import {Dataset} from '../src/assets/Model';
+
+const componentMap = [
+  'ImageSelector',
+  'LocationNav',
+  'FlatmapViewer',
+  'BiolucidaViewer'
+]
 
 const pinia = createPinia();
 const emitter = mitt();
@@ -71,9 +83,21 @@ const preview = {
     }
   }
 };
+
+
 setup((app)=>{
+  app.use(DesignSystemComponentsPlugin);
   app.use(ElementPlus);
   app.use(pinia);
   app.provide('emitter', emitter); 
+
+  componentMap.forEach(comp=>{
+    const asyncComponent = defineAsyncComponent(() => import(`../src/components/${comp}.vue`)); 
+    app.component(comp, asyncComponent);
+  })
+
+  const globalVars = useGlobalVarsStore();
+  globalVars.componentList = componentMap;
+
 })
 export default preview;
diff --git a/index.html b/index.html
@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SPARC Dashboard</title>
   </head>
-  <body>
-    <div id="app"></div>
+  <body style="height:100vh">
+    <div id="app" style="height:100vh"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@abi-software/flatmapvuer": "^0.6.1-vue3.8",
+    "sparc-design-system-components-2": "0.0.26",
     "@tsconfig/node21": "^21.0.1",
     "axios": "^1.6.7",
     "element-plus": "^2.4.3",

diff --git a/src/components/FlatmapViewer.vue b/src/components/FlatmapViewer.vue
@@ -1,9 +1,10 @@
 <template>
+<div class="flatmap-viewer">
+    <div class="text-left pl-1"><p>select anatomical location</p></div>
 
-        <!-- <div class="flatmap-viewer h-4/6 flex justify-center mb-1"> -->
-            <FlatmapVuer disableUI="true" entry="UBERON:1759" v-on:resource-selected="FlatmapSelected"  v-on:ready="FlatmapReady"/>
-
+    <FlatmapVuer class="px-2 py-2" disableUI="true" entry="UBERON:1759" v-on:resource-selected="FlatmapSelected"  v-on:ready="FlatmapReady"/>
 
+</div>
 
 </template>
 <script setup>
@@ -12,11 +13,10 @@
   import { useOpenerStore } from "../stores/opener";
   FlatmapVuer.props.flatmapAPI.default="https://mapcore-demo.org/devel/flatmap/v4/";
 
-  const emitter = inject('emitter');
-  const opener = useOpenerStore();
-
-  const baseUrl = './imgs/'
+  const emit = defineEmits(['setName']);
+  emit('setName','New Custom Component!'); 
 
+  const emitter = inject('emitter');
   let Location ="";
   
 function FlatmapSelected(data){
@@ -29,9 +29,15 @@ function FlatmapSelected(data){
 
 </script>
 <style scoped lang="scss">
+@import '../assets/delete-when-dsc2-imported/_variables.scss';
     .flatmap-viewer{
         :deep(.flatmap-container){
             width: 100%;
+            height: 90%;
+        }
+        p{
+            color: $mediumGrey;
+            font-size: 14px;
         }
     }
     .open-image{

diff --git a/src/components/ItemWidget.vue b/src/components/ItemWidget.vue
@@ -1,7 +1,7 @@
 <template>
             <div ref="instance" class="grid-stack-item-content">
 
-                <div class="content-header stick-to-top">
+                <div class="flex flex-row items-center justify-between h-10 content-header stick-to-top p-1">
                     <slot name="title"></slot>
                     <close v-if="!staticMode" background="#8300BF" color="white" class="close-button" @click="$emit('removeWidget')"></close>
                 </div>
@@ -42,12 +42,7 @@ onMounted(()=>{
 @import '../assets/delete-when-dsc2-imported/_variables.scss';
 
 .content-header{
-    justify-content: space-between;
-    align-items: center;
-    display:flex;
-    flex-flow:row;
-    border: 1px solid $lineColor1;
-    height: 40px;
+    border-bottom: 1px solid $mediumGrey;
     
     h3{
         margin:10px;
@@ -61,10 +56,10 @@ onMounted(()=>{
 }
 
 .grid-stack-item-content {
-    border: 1px solid $lineColor1;
+    border: 1px solid $lightGrey;
     border-radius: 0.2rem;
     text-align: center;
-    background-color: white;
+    background-color: #ebedf0;
     display: flex;
     flex-flow: column;
 }
@@ -82,7 +77,6 @@ onMounted(()=>{
     position: sticky;
     top: 0;
     width: 100%;
-    background:white;
 }
 .focus-from-Img-View{
         border:solid $lightPurple 2px !important;

diff --git a/src/components/SparcDashboard.vue b/src/components/SparcDashboard.vue
@@ -1,6 +1,8 @@
 <template>
-    <div class="text-3xl font-bold underline">
-      Sparc Dashboard
+    <div class="dash-header h-10">
+      <span><sparc-logo class="w-20 p-2 float-left"></sparc-logo></span>
+     <span class="leading-10 align-bottom px-2.5">Vegus Reference Dashboard</span>
+     <span class="float-right"><el-button @click="staticMode=!staticMode">Edit Grid</el-button></span>
     </div>
     <el-col v-if="!staticMode">
       <el-row class="m-12">
@@ -12,10 +14,7 @@
         <el-button type="default" @click="saveDashboard()" disabled >Save Dashboard</el-button>
       </el-row>
   </el-col> 
-  <el-col>
-    <el-button @click="staticMode=!staticMode">Edit Grid</el-button>
-  </el-col>
-    <div  ref="root" class="grid-stack">
+    <div  ref="root" class="grid-stack h-screen">
       <!-- <div class="grid-stack-item" 
       :gs-id="NavItem.id" :gs-x="NavItem.x" :gs-y="NavItem.y" :gs-w="NavItem.w" :gs-h="NavItem.h" :id="NavItem.id" :key="NavItem.id" 
       :gs-no-move="NavItem.noMove" :gs-locked="NavItem.locked" :gs-min-height="3">
@@ -43,7 +42,6 @@
 import { ref, onBeforeMount, onMounted, nextTick, inject, onUpdated, watch} from 'vue';
 import { GridStack } from 'gridstack';
 import ItemWidget from './ItemWidget.vue';
-import NavWidget from './NavWidget.vue';
 import { useGlobalVarsStore }from '../stores/globalVars.ts';
 import {Dataset} from '../assets/Model';
 
@@ -67,9 +65,9 @@ let NextId = DashboardItems.value.length;
 
 
 onBeforeMount(() => {
-  DashboardItems.value = [    { id: "FlatmapViewer-1", x: 0, y: 0, h: 20, w:3, componentName:"Flatmap Viewer",component:"FlatmapViewer" },
-    { id: "ImageSelector-2", x: 3, y: 0, h: 20, w:3, componentName:"Image Selector", component:"ImageSelector"},
-    { id: "BiolucidaViewer-3", x: 6, y: 0,h: 20, w:6, componentName:"MBF Viewer", component:"BiolucidaViewer"}]
+  DashboardItems.value = [    { id: "FlatmapViewer-1", x: 0, y: 0, h: 25, w:3, componentName:"Flatmap Viewer",component:"FlatmapViewer" },
+    { id: "ImageSelector-2", x: 3, y: 2, h: 20, w:3, componentName:"Image Selector", component:"ImageSelector"},
+    { id: "BiolucidaViewer-3", x: 6, y: 0,h: 25, w:6, componentName:"MBF Viewer", component:"BiolucidaViewer"}]
 
   });
   onMounted(() => {
@@ -92,7 +90,7 @@ function initGridStack(){
     const options={
       float:true,
       column: 12,
-      cellHeight: 30,
+      cellHeight: 28,
       minRow: 6,
       margin:5,
       alwaysShowResizeHandle:true,
@@ -186,6 +184,10 @@ function isValidJSON(str) {
 <style  lang="scss">
 @import '../assets/delete-when-dsc2-imported/_variables.scss';
 
+.dash-header {
+  background-color: $darkBlue;
+  color: white;
+}
 .grid-stack {
   background: $background;
 }

diff --git a/src/main.ts b/src/main.ts
@@ -2,6 +2,7 @@ import './assets/main.css'
 
 import { createApp, defineAsyncComponent } from 'vue'
 import { createPinia } from 'pinia'
+import DesignSystemComponentsPlugin from 'sparc-design-system-components-2'
 import mitt from 'mitt'
 import ElementPlus from 'element-plus'
 import App from './App.vue'
@@ -29,5 +30,6 @@ app.use(createPinia());
 const globalVars = useGlobalVarsStore();
 globalVars.componentList = componentMap;
 
+app.use(DesignSystemComponentsPlugin);
 app.use(ElementPlus);
 app.mount('#app');
diff --git a/src/stores/globalVars.ts b/src/stores/globalVars.ts
@@ -2,7 +2,7 @@ import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useGlobalVarsStore = defineStore('globalVars', () => {
-  const componentList = ref([]);
+  const componentList = ref([""]);
   const navigatorType = ref("LocationNav");//default 
   return { componentList, navigatorType }
 })
diff --git a/src/stories/SparcDashboard/SparcDashboard.mdx b/src/stories/SparcDashboard/SparcDashboard.mdx
@@ -0,0 +1,33 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as stories from './SparcDashboard.stories.js';
+import dash from './sparc-dash.png'
+
+
+<Meta title="Components/SparcDashboard" />
+
+# Sparc Reva Dashboard
+This is the entire Sparc Reva Dashboard as a whole. A working demo of the dashboard and all its available components.
+
+<div>
+  <img src={dash} />
+</div>
+
+## Edit
+**edit dashboard**
+- Click on the Edit Grid button to rearrange or delete widgets.
+
+If you want to import your custom component to be used as a widget, add component's vue file to the dashboard project under components folder. 
+
+Update the main.ts with your component's folder name.
+
+```ts
+
+const componentMap = [
+    'SubjectNav',
+    'ImageSelector',
+    'ImageViewer',
+    'LocationNav',
+    'FlatmapViewer',
+    'BiolucidaViewer'
+]
+```
diff --git a/src/stories/SparcDashboard/SparcDashboard.stories.js b/src/stories/SparcDashboard/SparcDashboard.stories.js
@@ -0,0 +1,37 @@
+
+import SparcDashboard from '../../components/SparcDashboard.vue'
+import ItemWidget from '../../components/ItemWidget.vue';
+import FlatmapViewer from '../../components/FlatmapViewer.vue';
+import ImageSelector from '../../components/ImageSelector.vue';
+import BiolucidaViewer from '../../components/BiolucidaViewer.vue';
+
+import './styles.scss';
+
+export default {
+  title: 'Components/SparcDashboard'
+}
+
+const createDemo = () => {
+  return {
+    components: { SparcDashboard, ItemWidget, FlatmapViewer,ImageSelector,BiolucidaViewer},
+    data() {
+      return {
+
+      }
+    },
+    template: `
+        <sparc-dashboard></sparc-dashboard>
+    `
+    }
+}
+
+
+
+export const Primary = () => createDemo(
+  {
+    label: 'Primary',
+    id: '0',
+    data: [
+    ]
+  }
+)
diff --git a/src/stories/SparcDashboard/sparc-dash.png b/src/stories/SparcDashboard/sparc-dash.png
diff --git a/src/stories/SparcDashboard/styles.scss b/src/stories/SparcDashboard/styles.scss