update readme

Author: SamanthaKraft

README.md

@@ -10,7 +10,7 @@ The test dashboard is part of the Sparc Portal and is meant to compare various v
 View the storybook of working components here
 https://nih-sparc.github.io/TestDashboard/?path=/docs/components-biolucidaviewer--docs
 
-Dev version here
+Live Demo Here
 https://sparc-app-2-dev-features-2a5a06b8ea5c.herokuapp.com/apps/dashboard
 
 ## Recommended IDE Setup
@@ -59,63 +59,146 @@ Yarn run lint
 ## Dependency Setup
 
 If you are installing this project as a node module [npm](https://www.npmjs.com/package/sparc-dashboard-beta) dependency you need the following installed in your project. 
-Vue(^3.5.11)
+
+Vue(^3.5.13)
 ```sh
 yarn add vue
 ```
+Element-Plus(^2.8.4)
+```sh
+yarn add element-plus
+```
 ### Importing Dashboard into your project
 
+Example main.js
+
 main.js
 ```
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
-import { installDashboard } from 'sparc-dashboard-plugin';
+import {installDashboard} from 'sparc-dashboard-beta'
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
 import App from './App.vue';
 
 const app = createApp(App);
 const pinia = createPinia();
 
-//add the components you want to be included in your dashboard
+//add the components you want to be included in your dashboard. This populates the drop down
+//name must match what you named your component in [filename].vue
 const componentMap = [
     'FlatmapViewer',
     'ImageSelector',
     'BiolucidaViewer',
     'QDBGraph',
-    'TextWidget',
-    'CountWidget'
+    'TextWidget'
 ]
 
+//pinia is optional, dashboard will initiate a pinia instance if it is excluded
+//app and componentMap are required
 installDashboard(app, componentMap, pinia);
 
+app.use(ElementPlus);
 app.use(pinia);
 app.mount('#app');
 
 ```
-In your vue app.vue or component.vue
+In your vue app.vue or componentName.vue
 ```
 <template>
-  <SparcDashboard />
+  <SparcDashboard :dBItems="dashboardItems" :hideHeader="true" :options="dashboardOptions"/>
 </template>
 <script>
 //using this naming convention [componenentName]-n, you can customize the dashboard for it's initial load. 
+// -n should start with 0 or 1 and count up one integer at a time
 //dbItems is required. If you want the dashboard to be blank, send it an empty array
-const dBItems = [
+const dashboardItems = [
     { 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: 11, w:7, componentName:"MBF Viewer", component:"BiolucidaViewer"},
-    { id: "ODBGraph-4", x: 0, y: 8, h: 3, w:5, componentName:"Flatmap Viewer",component:"QDBGraph" }
-    ]
+    { id: "ODBGraph-4", x: 0, y: 8, h: 3, w:5, componentName:"Flatmap Viewer",component:"QDBGraph"},
+    { id: "TextWidget-1", x: 0, y: 0, h: 1, w:4, componentName:"Text",component:"TextWidget",hideHeader:true, Props:{displayText:"Dataset Overview",hideHeader:true} }
+     ]
+const dashboardOptions = {
+  globalData: {
+    FileCount: 10,
+    Status: "Published",
+    CollaboratorCounts: 8
+  }
+};
 </script>
 ```
-## List of Components
+## List of Available Components
 - any of these may be imported in the componentMap
+
 BiolucidaViewer - Surfaces Biolucida Images when SELECTED_IMAGE (in global vars) is updated
+
 FlatmapViewer - Shows the vagas flatmap. Updats the FLATMAP_LOCATION global var
+
 ImageSelector - Displays list of images in the global var DASH_IMAGE_ARRAY. Updates SELECTED_IMAGE
 QDBGraph - displays QDB data
+
 ScaffoldViewer - Displays 3D Scaffold
+
 TextWidget - Displays text assigned by user or from data
 
+## DashboardItems
+
+How to add to the global variable in the dashboard, so that your widget can have access to them.
+globalData is set up as a key value pair. 
+
+```
+<template>
+  <SparcDashboard :dBItems="dashboardItems" :hideHeader="true" :options="dashboardOptions"/>
+</template>
+<script>
+const dashboardOptions = {
+  globalData: {
+    FileCount: 10,
+    Status: "Published",
+    CollaboratorCounts: 8,
+    ListOfCollabs: [{name:"jen", id:5},{name:"Bruce",id:23}],
+  }
+};
+</script>
+```
+It is recomended, but not necissary, that you ensure you are passing reactive data or that the dashboard options are reactive
+ex
+```
+const dashboardOptions = computed(() => ({
+  globalData: {
+    FileCount: filesCount.value,
+    Status: publicationStatus.value,
+    CollaboratorCounts: collaboratorCounts.value,
+    viewerComponents: [TimeseriesComponent, SlideViewer],
+    package:pkg
+  }
+}));
+```
+
+### Props
+
+You can pass key/value pairs to your inital component list. 
+
+*when your component is added by a user, you will need to have a way for them to set what would otherwise be properties. This would intail surfacing the properties through the dashboardOptions > globalData
+
+```
+    { id: "TextWidget-1", x: 0, y: 0, h: 1, w:4, componentName:"Text",component:"TextWidget",hideHeader:true, Props:{displayText:"Dataset Overview",hideHeader:true} }
+```
+
+is the same as sending a component a property in vue 3. The above code is the functional equivalent as the below code.
+
+```
+<script>
+    const displayText = "Dataset Overview";
+    const noHeader = true;
+</script>
+<template>
+    <custom-component :displayText="displayText" :hideHeader="noHeader"></custom-component>
+</template
+```
+## Dashboard Options
+
 # DOCUMENTATION 
 - adding custom component to dashboard
 
@@ -127,7 +210,8 @@ Custom component that can be added within the dashboard and has the capabilities
 Clone the github repo and navigate to src/components/SampleComponent.vue
 
 Expose Your Custom Component to the Dashboard:
- - Add component tag name to the main.ts document
+ - Add component tag name to the main.ts document in your project
+
 	src/main.ts or src/main.js
 ```
 const componentMap = [
@@ -175,18 +259,21 @@ This is your default template. Customize however you like with html and vue 3 ma
 ### Set Name
 
 This line in your setup script allows you to set the header to your widget name. It does not have to match to file name. 
+
+DEPRICATED FOR NOW
 ```
     const widgetName = ref('New Custom Component!');//replace with component name you want shown
  ```
+
 DO NOT DELETE SLOT
 
-This is where your default header is set. Do not delete or change the variable name
+This is where your default header and icons are set. Do not delete or change the variable name
 ```
-<slot :widgetName="widgetName"></slot>
+<slot :widgetName="widgetName" :childIcons="childIcons"></slot>
 ```
 
 
-you can also set the name in your dBItems object. 
+you can also set the name in your dBItems object. The user can set the name by clicking on the header and typeing what they want. 
 
 ```
  { id: "FlatmapViewer-1", x: 0, y: 0, h: 8, w:2, componentName:"Flatmap Viewer",component:"FlatmapViewer" },
@@ -223,20 +310,36 @@ const dBItems = [
 
 ### CUSTOM EMITS/EVENTS:
 
-add your emits to your global pinia instance 
+add your emits to your global pinia instance or create your own store
 ```
     import {useGlobalVarsStore} from "../stores/globalVars"
     const GlobalVars = useGlobalVarsStore();
 ```
 
 ***Building a custom emit/event***
-tdb
-   ```
 
+Use the store as you would any vue project the update or watch global vars
+
+ex: This shows a header that is computed based on if its property key matches the optionsData in the globalVars
+```
+<template>
+      <h2>{{ textContentGV }}</h2>
+</template>
+<script>
+  import {useGlobalVarsStore} from "../stores/globalVars.ts"
+    const globalVars = useGlobalVarsStore();
+
+  const textContentGV = computed(() => {
+    const optionMatch = globalVars.optionsData.find(item => item.name === props.bindedKey);
+    return optionMatch?.value ?? "—"; 
+  })
+</script>
 ```
 
 ### GLOBAL VARS AND FUNCTIONS
 
+Examples are based off of the globalVar selectedImage.
+
 ***setSelectedImage***
 - call function when widget has selected an image
 Example for use: