style changes part 2

nih-sparc · Jul 22, 2024 · ac10307 · ac10307
1 parent 9a06efc
commit ac10307
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 19 deletions.
diff --git a/src/components/BiolucidaViewer.vue b/src/components/BiolucidaViewer.vue
@@ -2,7 +2,7 @@
 
     <slot :widgetName="widgetName"></slot>
 
-    <div class="tw-flex tw-flex-col tw-h-full">
+    <div v-bind="$attrs"  class="tw-flex tw-flex-col tw-h-full">
         <div class="bv-metadata tw-text-left tw-p-1 tw-text-sm">
             <!-- <p><span>Dataset: </span>
     Dataset Name Here </p>

diff --git a/src/components/FlatmapViewer.vue b/src/components/FlatmapViewer.vue
@@ -1,8 +1,7 @@
 <template>                  
     <slot :widgetName="widgetName"></slot>
-
-    <div class="flatmap-viewer tw-p-0">
-        <div class="tw-text-left tw-pl-1">
+    <div v-bind="$attrs" class="flatmap-viewer tw-p-0">
+        <div class="tw-text-left tw-pl-1" style="height: 50px;font-size:20px;line-height: 20px;margin: 4px 0 5px 0">
             <p><b>Current Location: </b>{{ locationLabel }}</p>
         </div>
 
@@ -17,6 +16,15 @@
   import { useOpenerStore } from "../stores/opener";
   import { useLocationStore} from "../stores/locationSelect";
   FlatmapVuer.props.flatmapAPI.default="https://mapcore-demo.org/devel/flatmap/v4/";
+    defineOptions({
+        inheritAttrs: false
+    })
+  const props = defineProps({
+    listening:{
+            tyep:Boolean
+    }
+  })
+
   const disableFlatmapUI = true;
   let FlatmapReady = false;
 

diff --git a/src/components/ImageSelector.vue b/src/components/ImageSelector.vue
@@ -1,5 +1,6 @@
 <template>              
       <slot :widgetName="widgetName"></slot>
+<div  v-bind="$attrs">
 
     <div class="fill">
         <img :src=imgPath>
@@ -16,7 +17,7 @@
                 </template> 
             </el-table-column>
      </el-table>
-
+    </div>
 
 </template>
 <script setup>
@@ -78,7 +79,7 @@ function buildDataTable(tbleObj){
     imgs.forEach((img)=>{
         let column = {
             name:img.ImgName,
-            size: "...",
+            size: Math.random()*10+"mb",
             path: img.Path
         }
         _tempArr.push(column);

diff --git a/src/components/ItemWidget.vue b/src/components/ItemWidget.vue
@@ -1,9 +1,9 @@
 <template>
-            <div ref="instance" class="grid-stack-item-content widget-body" @click="selectWidget()">
-                <component v-slot="slotProps" :is="componentTag" :listening="highlight" @appendToHead="appendIconsToHeader()">
+            <div ref="instance" class="grid-stack-item-content" @click="selectWidget()">
+                <component class="widget-body" v-slot="slotProps" :is="componentTag" :listening="highlight">
 
                     <DashHeader :widgetName="slotProps.widgetName" :staticMode="staticMode">
-                        <component v-for="icon in slotProps.childIcons" :is="icon.comp" @click="icon.event" class="tw-p-1"></component>
+                        <component class="tw-p-1" v-for="icon in slotProps.childIcons" :is="icon.comp" @click="icon.event" ></component>
                         <DownloadIcon></DownloadIcon>
                         <close-icon v-if="!staticMode" background="#8300BF" color="white" class="close-button" @click="$emit('removeWidget')"></close-icon>
                     </DashHeader>
@@ -64,7 +64,7 @@
 
 :deep(.content-header){
     border-bottom: 1px solid $mediumGrey;
-    
+    overflow: hidden;
     h3{
         margin:10px;
     }
@@ -76,7 +76,7 @@
         padding:8px;
     }
 }
-.widget-body{
+:deep(.widget-body){
   height: calc( 100% - 40px );
 }
 .grid-stack-item-content {

diff --git a/src/components/QDBGraph.vue b/src/components/QDBGraph.vue
@@ -4,7 +4,7 @@
   <slot :widgetName="widgetName" :childIcons="childIcons">
   </slot>
 
-    <div class="tw-flex tw-flex-col tw-h-full">
+    <div v-bind="$attrs"  class="tw-flex tw-flex-col tw-h-full">
       <component
       id="my-chart-id"
       :is="visualizationComponent"

diff --git a/src/components/SparcDashboard.vue b/src/components/SparcDashboard.vue
@@ -34,7 +34,7 @@ import {Dataset} from '../assets/Model';
 import "gridstack/dist/gridstack.min.css";
 import "gridstack/dist/gridstack-extra.min.css";
 
-const debug = true;
+const debug = false;
 const _emitter = inject('emitter');
 const _globalVars = useGlobalVarsStore();
 let _DatasetImgs = ref({});
@@ -52,9 +52,9 @@ let NewComponent = {};
 let NextId = DashboardItems.value.length;
 
 const dBItems = debug ? [{ id: "ODBGraph-1", x: 0, y: 0, h: 4, w:3, componentName:"Flatmap Viewer",component:"QDBGraph" }] : 
-[{ id: "FlatmapViewer-1", x: 0, y: 0, h: 8, w:2, componentName:"Flatmap Viewer",component:"FlatmapViewer" },
-    { id: "ImageSelector-2", x: 2, y: 0, h: 8, w:3, componentName:"Image Selector", component:"ImageSelector"},
-    { id: "BiolucidaViewer-3", x: 5, y: 0,h: 10, w:5, componentName:"MBF Viewer", component:"BiolucidaViewer"}]
+[{ id: "FlatmapViewer-1", x: 0, y: 0, h: 8, w:2, componentName:"Flatmap Viewer",component:"FlatmapViewer" },]
+    // { id: "ImageSelector-2", x: 2, y: 0, h: 8, w:3, componentName:"Image Selector", component:"ImageSelector"},
+    // { id: "BiolucidaViewer-3", x: 5, y: 0,h: 10, w:5, componentName:"MBF Viewer", component:"BiolucidaViewer"}]
 
 
 onBeforeMount(() => {

diff --git a/src/devComponents/ImageSelector/ImageModel.js b/src/devComponents/ImageSelector/ImageModel.js
@@ -14,7 +14,7 @@ class MBFImageObject {
     constructor(data){
         this.id = data.image_id;
         this.name = data.image_id,
-        this.size = "...",
+        this.size = (Math.random()*10).toFixed(2)+"mb",
         this.path = data.share_link
     }
 }
@@ -30,7 +30,7 @@ export class TableObject{
         this.MBFImageObject.forEach((img)=>{
             let column = {
                 name:img.id,
-                size: "...",
+                size: (Math.random()*10).toFixed(2)+"mb",
                 path: ""
             }
             _tempArr.push(column);
@@ -42,7 +42,7 @@ export class TableObject{
         this.SparcImageArray.forEach((img)=>{
             let column = {
                 name:img.id,
-                size: "...",
+                size: (Math.random()*10).toFixed(2)+"mb",
                 path: img.path
             }
             _tempArr.push(column);