feat(dash): Tabbed dashboards!

src/components/RunFinderPanel.vue

@@ -12,8 +12,8 @@ de:
 </i18n>
 
 <template lang="pug">
-.dashboard-home
-  h3.logo: a(href="/") {{globalState.app }}
+.run-finder-panel
+  h3.logo: router-link(:to="'/'") {{globalState.app }}
 
   .top-panel
     .stuff-in-main-panel
@@ -98,7 +98,6 @@ class MyComponent extends Vue {
       component: 'FolderBrowser',
       props: { root: target.root.slug, xsubfolder: target.path },
     })
-    console.log(target)
   }
 
   private onSplit() {
@@ -129,7 +128,7 @@ export default MyComponent
 <style scoped lang="scss">
 @import '@/styles.scss';
 
-.dashboard-home {
+.run-finder-panel {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -140,6 +139,7 @@ export default MyComponent
   flex-direction: column;
   overflow-y: auto;
   flex: 1;
+  margin-left: 0.25rem;
   margin-bottom: 0.5rem;
 }
 
@@ -195,7 +195,7 @@ a {
 .commands {
   display: flex;
   flex-direction: row;
-  margin-top: 0.5rem;
+  margin-right: -0.5rem;
 }
 
 .commands .button {
@@ -211,13 +211,13 @@ a {
 .logo {
   background-color: #60588f;
   color: white;
-  padding: 0.5rem 1rem;
+  padding: 0.25rem 1rem;
   margin-right: auto;
-  margin-bottom: auto;
+  margin-bottom: 0.5rem;
+  margin-top: -0.2rem;
 
   a {
-    font-size: 1.5rem;
-    line-height: 1.4rem;
+    font-size: 1.3rem;
     color: white;
   }
 

src/plugins/transit-demand/TransitDemand.vue

@@ -1126,11 +1126,12 @@ h3 {
 }
 
 .left-side {
-  z-index: 5;
-  position: absolute;
-  top: 0rem;
-  left: 0;
+  grid-column: 1 / 3;
+  grid-row: 1 / 4;
+  margin-bottom: auto;
+  margin-right: auto;
   display: flex;
+  z-index: 5;
   flex-direction: row;
   pointer-events: auto;
   max-height: 50%;

src/router.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter, { Route, RouteConfig } from 'vue-router'
-import FolderBrowser from '@/views/FolderBrowser.vue'
+import FolderBrowser from '@/views/MainFrame.vue'
 import DashBoard from '@/views/DashBoard.vue'
 
 import globalStore from '@/store'
@@ -12,20 +12,25 @@ const routes = [
     path: '/sql',
     component: () => import(/* webpackChunkName: "sql" */ '@/views/SqlThing.vue'),
   },
+  {
+    path: '/tabbed',
+    component: () => import(/* webpackChunkName: "sql" */ '@/views/TabbedDashboardView.vue'),
+  },
   {
     path: '/gist/:id',
     component: () => import(/* webpackChunkName: "gist" */ '@/views/GistView.vue'),
     props: (route: Route) => ({
       id: route.params.id,
     }),
   },
-  // {
-  //   path: '/sqlite',
-  //   component: () => import(/* webpackChunkName: "sql" */ '@/views/SqlThingTwo.vue'),
-  // },
   {
-    path: '/*',
-    component: () => import(/* webpackChunkName: "split" */ '@/views/ScreenSplitter.vue'),
+    path: '/sqlite',
+    component: () => import(/* webpackChunkName: "sql" */ '@/views/SqliteThing.vue'),
+  },
+  {
+    path: '/',
+    component: () => import(/* webpackChunkName: "split" */ '@/views/MainFrame.vue'),
+    props: { root: '', xsubfolder: '' },
   },
   {
     // catch-all back to home page
@@ -66,13 +71,18 @@ function vizPlugins(): any[] {
   const plugins = []
   for (const plugin of globalStore.state.visualizationTypes.values()) {
     plugins.push({
-      path: '/v/' + plugin.kebabName + '/:project/*',
+      path: '/v/' + plugin.kebabName + '/:slug/*',
       name: plugin.kebabName,
       component: plugin.component,
       props: (route: Route) => {
+        const match = route.params.pathMatch
+        const subfolder = match.substring(0, match.lastIndexOf('/'))
+        const yamlConfig = match.substring(match.lastIndexOf('/') + 1)
         return {
-          project: route.params.project,
-          root: route.params.project,
+          root: route.params.slug,
+          subfolder,
+          yamlConfig,
+          thumbnail: false,
         }
       },
     })

src/styles.scss

@@ -31,7 +31,7 @@ $thumbnailHeight: 10rem;
   --bgPanel2: #ededed;
   --bgPanel3: #e4e4e4;
   --bgTag: #fdffa3;
-  --bgBrowser: #f5f5f5;
+  --bgBrowser: #f0f0f0;
   --text: #363636;
   --textBold: #1d3355;
   --textFancy: #1d3355;
@@ -41,7 +41,7 @@ $thumbnailHeight: 10rem;
   --linkActive: #bbf1ca;
   --shadowMode: 0px 0px 6px 6px rgba(0, 0, 0, 0.12);
   --borderThin: 1px solid #cce;
-  --borderDashboard: 3px solid #cce;
+  --borderDashboard: 3px solid #d4dbdd;
   --beige: #ffeead;
   --yellow: #ffcc5c;
   --splitPanel: #d4dbdd;
@@ -54,14 +54,14 @@ $thumbnailHeight: 10rem;
   --bgCream2: #33373a;
   --bgCream3: #344857;
   --bgCream4: #304453;
-  --bgDashboard: #31353a;
+  --bgDashboard: #2d3237;
   --bgHideButton: #32455a;
   --bgPanel: #2a3c4f;
   --bgPanel2: #32455a;
   --bgPanel3: #2f3b49;
   --bgTag: #2a3c4f;
-  --bgBrowser: #1c242e;
-  --bgHover: #4d4c37;
+  --bgBrowser: #18242e;
+  --bgHover: #4b3c70;
   --text: #c6c1b9;
   --textBold: white;
   --textFancy: #a5c4e2;

src/views/DashBoard.vue

@@ -10,7 +10,7 @@
       .dash-card-frame(v-for="card,j in row" :key="`${i}/${j}`"
         :style="getCardStyle(card)")
 
-        .dash-card-headers
+        .dash-card-headers(:class="{'fullscreen': !!fullScreenCardId}")
           .header-labels
             h3 {{ card.title }}
             p(v-if="card.description") {{ card.description }}
@@ -36,17 +36,14 @@
 </template>
 
 <script lang="ts">
-// Add any new charts here!
-// --> Name the import whatever you want the chart "type" to be in YAML
-import charts from '@/charts/allCharts'
-
 import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
 import { Spinner } from 'spin.js'
 import YAML from 'yaml'
 
 import HTTPFileSystem from '@/js/HTTPFileSystem'
-import { FileSystem, FileSystemConfig } from '@/Globals'
+import { FileSystemConfig } from '@/Globals'
 import TopSheet from '@/components/TopSheet/TopSheet.vue'
+import charts from '@/charts/allCharts'
 
 // append a prefix so the html template is legal
 const namedCharts = {} as any
@@ -60,6 +57,7 @@ export default class VueComponent extends Vue {
   @Prop({ required: true }) private root!: string
   @Prop({ required: true }) private xsubfolder!: string
   @Prop({ required: false }) private gist!: any
+  @Prop({ required: false }) private config!: any
 
   private fileSystemConfig!: FileSystemConfig
   private fileApi!: HTTPFileSystem
@@ -110,16 +108,21 @@ export default class VueComponent extends Vue {
   private fullScreenCardId = ''
 
   private expand(card: any) {
-    if (this.fullScreenCardId) this.fullScreenCardId = ''
-    else this.fullScreenCardId = card.id
+    if (this.fullScreenCardId) {
+      this.fullScreenCardId = ''
+    } else {
+      this.fullScreenCardId = card.id
+    }
+
+    this.$emit('zoom', this.fullScreenCardId)
   }
 
   private getCardStyle(card: any) {
     const flex = card.width || 1
     const height = card.height ? card.height * 60 : undefined
 
     let style: any = {
-      margin: '2rem 2rem 2rem 0',
+      margin: '2rem 3rem 2rem 0',
       flex,
     }
 
@@ -153,9 +156,13 @@ export default class VueComponent extends Vue {
   }
 
   private async setupDashboard() {
-    // get dashboard layout from yaml
-    const yaml = await this.fileApi.getFileText(`${this.xsubfolder}/dashboard.yaml`)
-    this.yaml = YAML.parse(yaml)
+    // Do we have config already or do we need to fetch it from the yaml file?
+    if (this.config) {
+      this.yaml = this.config
+    } else {
+      const yaml = await this.fileApi.getFileText(`${this.xsubfolder}/dashboard.yaml`)
+      this.yaml = YAML.parse(yaml)
+    }
 
     // set header
     this.title = this.yaml.header.title || 'Dashboard'
@@ -205,10 +212,11 @@ export default class VueComponent extends Vue {
   }
 
   private async handleCardIsLoaded(id: string) {
+    // must wait for vue to update DOM layout
     await this.$nextTick()
 
     this.opacity[id] = 1.0
-    const target = document.getElementById(id) as any
+
     if (this.spinners[id]) {
       this.spinners[id].stop()
       delete this.spinners[id]
@@ -222,9 +230,8 @@ export default class VueComponent extends Vue {
 @import '../../node_modules/spin.js/spin.css';
 
 .dashboard {
-  padding: 1rem 0rem 1rem 2rem;
-  background-color: var(--bgDashboard);
-  overflow-y: auto;
+  margin: 0 0;
+  padding: 1rem 0rem 1rem 3rem;
 
   .dashboard-content {
     max-width: 90rem;
@@ -256,6 +263,10 @@ export default class VueComponent extends Vue {
     padding-top: 0.1rem;
   }
 
+  .dash-card-headers.fullscreen {
+    padding-top: 0;
+  }
+
   .header-buttons {
     display: flex;
     flex-direction: row;
@@ -276,6 +287,7 @@ export default class VueComponent extends Vue {
     grid-row: 1 / 2;
     font-size: 1.3rem;
     line-height: 1.5rem;
+    margin-top: 0.1rem;
     margin-bottom: 0.5rem;
     color: var(--link);
   }