gridstack static toggle. tailwind styles back in. update components a…

…re main functionality as opposed to open
nih-sparc · Mar 29, 2024 · 16645ee · 16645ee
1 parent 970b6fe
commit 16645ee
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 112 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SPARC Dashboard</title>
   </head>

diff --git a/index.js b/index.js
@@ -0,0 +1,3 @@
+import SparcDashboard from './src/components/SparcDashboard.vue';
+
+export default SparcDashboard;
diff --git a/package.json b/package.json
@@ -1,10 +1,12 @@
 {
-  "name": "testdashboard",
-  "version": "0.0.0",
-  "private": true,
+  "name": "sparc-dashboard-beta",
+  "version": "0.1.0",
+  "author": "Sam Kraft (https://Sparc.Science)",
+  "private": false,
+  "main": "index.js",
   "scripts": {
     "dev": "vite & yarn tailwindcss -i ./src/assets/base.css -o ./dist/output.css --watch",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "vite build",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",

diff --git a/src/components/BiolucidaViewer.vue b/src/components/BiolucidaViewer.vue
@@ -1,29 +1,36 @@
 <template>
-    <div class="bv-metadata text-left p-1 text-sm">
-        <p><span>Dataset: </span>
-Dataset Name Here </p>
-        <p><span>Metadata: </span>Metadata could go here</p>
+    <div class="flex flex-col">
+        <div class="bv-metadata text-left p-1 text-sm">
+            <p><span>Dataset: </span>
+    Dataset Name Here </p>
+            <p><span>Metadata: </span>Metadata could go here</p>
+        </div>
+        <div class="bio-viewer h-screen flex justify-center">
+            <iframe class="p-1 w-screen" :src="mbfURLSrc" ></iframe>
+        </div>
     </div>
-    <div class="bio-viewer h-screen flex justify-center">
-        <iframe class="p-1 w-screen" :src="props.mbfLink" ></iframe>
-    </div>
-
 </template>
 <script setup>
-  import {ref, watch} from "vue";
+  import {ref, watch, inject} from "vue";
   import { Api } from "../services";
   import {Dataset} from '../assets/Model';
 
-  let mbfLink =ref("");
   const props = defineProps({
     imageID:0,
     mbfLink: {type:String}
   })
+
+  const emitter = inject('emitter');
+  let mbfURLSrc =ref(props.mbfLink);
+
+
     // watch(() => mbfLink.value, (newVal) => {
     //        console.log(mbfLink);
     // });
 
-
+    emitter.on('mbf-image-selected',(img)=>{
+        mbfURLSrc.value=img;
+    });
         const getImageURLByID = async(_imageId)=>{
             let _biolucidaUrl = {};
             let _response ={};

diff --git a/src/components/FlatmapViewer.vue b/src/components/FlatmapViewer.vue
@@ -1,23 +1,13 @@
 <template>
-    <div>
-        <div class="flatmap-viewer h-4/6 flex justify-center mb-1">
+
+        <!-- <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"/>
-        </div>
-        <el-table :data="TableData" class="table-of-images h-2/6 text-sm">
-            <el-table-column prop="name" label="Name"/>
-            <el-table-column prop="size" label="Size"/>
-            <el-table-column fixed="right" label="Img">
-                <template #default="scope">
-                    <el-button link type="primary" size="small" @click="selectImage(scope.$index)">Open</el-button>
-                </template> 
-            </el-table-column>
-        </el-table>
-    </div>
+
+
+
 </template>
 <script setup>
   import { ref, inject, nextTick} from "vue";
-  import {Dataset} from '../assets/Model';
-  import { Api } from "../services";
   import {FlatmapVuer, MultiFlatmapVuer} from '@abi-software/flatmapvuer';
   import { useOpenerStore } from "../stores/opener";
   FlatmapVuer.props.flatmapAPI.default="https://mapcore-demo.org/devel/flatmap/v4/";
@@ -26,47 +16,17 @@
   const opener = useOpenerStore();
 
   const baseUrl = './imgs/'
-  let TableData = ref();
+
   let Location ="";
   
 function FlatmapSelected(data){
     Location = data.feature.featureId;
-    getImagesFromDataset(353);
+    //send to image selector
+    emitter.emit("anatomical-location-selected",353)
 }
 
-const getImagesFromDataset = async (datasetId)=>{
-            let _biolucidaImageData = {};
-            let _response = {};
-            try{
-                await Api.biolucida.searchDataset(datasetId).then(response =>{
-                    _response = response;
-                })
-                if (_response.status === 200) {
-                _biolucidaImageData = _response;
-                buildDataTable(Object.assign(new Dataset(_biolucidaImageData.data.dataset_images)).Imgs);
-                }
-            }catch(e){
-                console.error("couldn't fetch images from dataset");
-            }
-        }
-function selectImage(index){
-    let img = TableData.value[index].path;
-    opener.openWidget("BiolucidaViewer", [{key:"mbfLink",value:img}])
-    emitter.emit("FlatmapViewer-selectImage",TableData.value[index]);
-}
 
-function buildDataTable(Imgs){
-    let _tempArr=[];
-    Imgs.forEach((img)=>{
-        let column = {
-            name:img.ImgName,
-            size: "...",
-            path: img.Path
-        }
-        _tempArr.push(column);
-    })
-    TableData.value=_tempArr;
-}
+
 </script>
 <style scoped lang="scss">
     .flatmap-viewer{

diff --git a/src/components/ImageSelector.vue b/src/components/ImageSelector.vue
@@ -2,45 +2,72 @@
     <div class="fill">
         <img :src=imgPath>
     </div>
-    <div class="selector-body">
-        <div @click="selectImage('./imgs/img.png')" class="fill">
-            <img :src=imgPath2>
-        </div>
-        <div @click="selectImage('./imgs/img2.png')" class="fill">
-            <img :src=imgPath3>
-        </div>
-        <div @click="selectImage('./imgs/img.png')"  class="fill">
-            <img :src=imgPath2>
-        </div>
-        <div @click="selectImage('./imgs/img2.png')"  class="fill">
-            <img :src=imgPath3>
-        </div>
-        <div @click="selectImage('./imgs/img.png')"  class="fill">
-            <img :src=imgPath2>
-        </div>
-        <div @click="selectImage('./imgs/img2.png')"  class="fill">
-            <img :src=imgPath3>
-        </div>
-    </div>
+    <el-table :data="TableData" class="table-of-images text-sm">
+            <el-table-column prop="name" label="Name"/>
+            <el-table-column prop="size" label="Size"/>
+            <el-table-column fixed="right" label="Img">
+                <template #default="scope">
+                    <el-button link type="primary" size="small" @click="selectImage(scope.$index)">Open</el-button>
+                </template> 
+            </el-table-column>
+     </el-table>
 
 
 </template>
 <script setup>
     import { ref, inject, onUnmounted, onMounted, nextTick } from "vue";
     import { useOpenerStore } from "../stores/opener";
+    import {Dataset} from '../assets/Model';
+    import { Api } from "../services";
     const emitter = inject('emitter');
-    const opener = useOpenerStore();
+    //const opener = useOpenerStore();
+
+    const imgPath = ref(null);
 
-    const imgPath = ref("./imgs/imgInfo.png");
-    const imgPath2 = ref("./imgs/imgSel.png");
-    const imgPath3 = ref("./imgs/imgSel2.png");
+    let TableData = ref();
 
     const emit = defineEmits(['setName'])
     emit('setName','MUSE Image Selector');
 
-    function selectImage(img){
-        opener.openWidget("ImageViewer",[{key:"imageSrc",value:img}]);
-    }
+function selectImage(index){
+    let img = TableData.value[index].path;
+    emitter.emit("mbf-image-selected",img);
+//  opener.openWidget("BiolucidaViewer", [{key:"mbfLink",value:img}])
+}
+
+emitter.on('anatomical-location-selected',(location)=>{
+    getImagesFromDataset(location);
+});
+//on update
+const getImagesFromDataset = async (datasetId)=>{
+            let _biolucidaImageData = {};
+            let _response = {};
+            try{
+                await Api.biolucida.searchDataset(datasetId).then(response =>{
+                    _response = response;
+                })
+                if (_response.status === 200) {
+                _biolucidaImageData = _response;
+                buildDataTable(Object.assign(new Dataset(_biolucidaImageData.data.dataset_images)).Imgs);
+                }
+            }catch(e){
+                console.error("couldn't fetch images from dataset");
+            }
+        }
+
+function buildDataTable(Imgs){
+    let _tempArr=[];
+    Imgs.forEach((img)=>{
+        let column = {
+            name:img.ImgName,
+            size: "...",
+            path: img.Path
+        }
+        _tempArr.push(column);
+    })
+    TableData.value=_tempArr;
+    imgPath.value = "./imgs/imgInfo.png";
+}
 
     emitter.on('selectSubject', (value) => {  
         imgPath.value = value;

diff --git a/src/components/ItemWidget.vue b/src/components/ItemWidget.vue
@@ -3,7 +3,7 @@
 
                 <div class="content-header stick-to-top">
                     <slot name="title"></slot>
-                    <close background="#8300BF" color="white" class="close-button" @click="$emit('removeWidget')"></close>
+                    <close v-if="!staticMode" background="#8300BF" color="white" class="close-button" @click="$emit('removeWidget')"></close>
                 </div>
                 <slot></slot>
             </div>
@@ -23,6 +23,10 @@
             widgetID:{
                 type:String,
                 required:true
+            },
+            staticMode:{
+                type:Boolean,
+                required:true
             }
         })
 

diff --git a/src/components/SparcDashboard.vue b/src/components/SparcDashboard.vue
@@ -2,7 +2,7 @@
     <div class="text-3xl font-bold underline">
       Sparc Dashboard
     </div>
-    <el-col>
+    <el-col v-if="!staticMode">
       <el-row class="m-12">
         <el-select :value="NewComponent.Name" placeholder="Add New Widget">
           <el-option
@@ -12,7 +12,10 @@
         <el-button type="default" @click="saveDashboard()" disabled >Save Dashboard</el-button>
       </el-row>
   </el-col> 
-    <div class="grid-stack">
+  <el-col>
+    <el-button @click="staticMode=!staticMode">Edit Grid</el-button>
+  </el-col>
+    <div  ref="root" class="grid-stack">
       <!-- <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">
@@ -21,8 +24,8 @@
           </NavWidget>
       </div> -->
       <div v-for="(w) in DashboardItems" class="grid-stack-item" 
-      :gs-x="w.x" :gs-y="w.y" :gs-w="w.w" :gs-h="w.h" :gs-id="w.id" :id="w.id" :key="w.id">
-            <ItemWidget :widgetID="w.id" @remove-widget="removeWidget(w.id)">
+      :gs-x="w.x" :gs-y="w.y" :gs-w="w.w" :gs-h="w.h" :gs-id="w.id" :id="w.id" :key="w.id" :locked="false">
+            <ItemWidget :widgetID="w.id" @remove-widget="removeWidget(w.id)" :static-mode="staticMode">
               <template #title>
                   <h3>{{ w.componentName }}</h3>
               </template>
@@ -37,7 +40,7 @@
 
 <script setup>
 
-import { ref, onBeforeMount, onMounted, nextTick, inject, computed} from 'vue';
+import { ref, onBeforeMount, onMounted, nextTick, inject, onUpdated, watch} from 'vue';
 import { GridStack } from 'gridstack';
 import ItemWidget from './ItemWidget.vue';
 import NavWidget from './NavWidget.vue';
@@ -52,21 +55,29 @@ const _globalVars = useGlobalVarsStore();
 let _DatasetImgs = ref({});
 
 let Grid = null;
+const root = ref(null);
 let NavItem = ref({});
-let DashboardItems = ref([]);
+let DashboardItems = ref([
+]);
+let staticMode = ref(true);
 getItemsFromLS();
 let ComponentListOptions = _globalVars.componentList;
 let NewComponent = {};
 let NextId = DashboardItems.value.length;
 
 
 onBeforeMount(() => {
-    //retrieveDataset();
+  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"}]
+
   });
   onMounted(() => {
     initGridStack();
   });
+  onUpdated(() => {
 
+})
 
 //retrieve dataset as json ------------------------------- - - - - - - - --------- - -- - -- - - -
 function retrieveDataset(){
@@ -85,12 +96,16 @@ function initGridStack(){
       minRow: 6,
       margin:5,
       alwaysShowResizeHandle:true,
-      row:28
+      row:28,
+  
     }
     Grid = GridStack.init(options);
-
+    Grid.setStatic(staticMode.value)
 }
 //All additional Functions - - - - - - - - -- - - - - --  -- - -- - - - - - - -  --
+watch(()=> staticMode.value, (value) => {
+  Grid.setStatic(value)
+})
 
 function addNewWidget(name) {
     if(name){
@@ -118,8 +133,6 @@ _emitter.on('SparcDashboard-addNewWidget', (value) => {
       value[1].forEach((val)=>{
         NewComponent.Props.set(val.key,val.value);
       })
-
-      
       
       addNewWidget()  
   })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import SparcDashboard from './src/components/SparcDashboard.vue';

		export default SparcDashboard;