feat: Site headers, footers, and standalone dashboards (simwrapper#116)

The new `simwrapper-config.yml` file in a folder or a `simwrapper/` subfolder now controls some site-wide configuration:

- header, header_en, header_de; and footer, footer_en, footer_de: Dashboard header and footer content. 
  - These can be either the filename of markdown file (*.md), or a multiline string containing the markdown itself

- hideLeftBar: true/false, true hides the "QuickView" left nav bar. SHIFT-CTRL-Q toggles this panel

- fullWidth: true/false, true expands the main panel to use the full browser width with no margins. SHIFT-CTRL-W toggles wide mode

- css: filename of custom.css file for styling the header and footer. Note that this css is global in effect, so you should use `.project-header {}` and `.project-footer {}` divs to identify the page sections you are styling.


---

MERGE COMMIT:

* remove GlobalState interface

* ctrl-b toggles left nav Bar

* feat: Project-level headers/footers, specified in simwrapper-config.yml

Any folder can now have a simwrapper-config.yml which can specify:

hideLeftBar: true/false
header: /path/to/header/md -OR- raw markdown text
footer: /path/to/header/md -OR- raw markdown text

* use SHIFT-CTRL-Q for toggling Quicklook (left) panel

* allow css styling of header/footer using a custom CSS file

add `css: my-custom-css.css` to `simwrapper-config.yaml`

These CSS elements are GLOBAL in scope, so you must add a div
with a name such as "my-header" etc to limit scope.

* don't flash quicklook panel if URL is a project page

* feat: Toggles: SHIFT-CTRL-W for full-width; SHIFT-CTRL-Q for quickview panel

Some users want to max available window space! These are for you.

* Always show left panel unless explicitly asked to hide it.

* Use relative paths for CSS and header/footer

* resize charts after show/hide quicklook panel or wide-screen view

package.json

@@ -42,6 +42,7 @@
     "d3-selection": "^1.4.1",
     "debounce": "^1.2.0",
     "deck.gl": "^8.5.5",
+    "dompurify": "^2.3.6",
     "epsg": "^0.5.0",
     "fast-xml-parser": "^4.0.1",
     "fflate": "^0.7.2",
@@ -99,6 +100,7 @@
     "@types/d3-scale-chromatic": "^1.5.0",
     "@types/d3-selection": "^1.4.1",
     "@types/debounce": "^1.2.0",
+    "@types/dompurify": "^2.3.3",
     "@types/geojson": "^7946.0.7",
     "@types/jest": "^27.0.3",
     "@types/jsdom": "^16.2.13",

src/App.vue

@@ -68,6 +68,28 @@ class App extends Vue {
 
     // local files
     if (doThisOnceForLocalFiles) await this.setupLocalFiles()
+
+    document.addEventListener('keydown', this.toggleUIPanels)
+  }
+
+  private beforeDestroy() {
+    document.removeEventListener('keyup', this.toggleUIPanels)
+  }
+
+  private toggleUIPanels(event: any) {
+    // shift-alt-Q: left side QuickView panel
+    if (event.altKey && event.shiftKey && event.keyCode === 81) {
+      console.log('QUICKVIEW')
+      this.$store.commit('toggleShowLeftBar')
+      this.$store.commit('resize')
+    }
+    // shift-alt-W: wide screen mode
+    if (event.altKey && event.shiftKey && event.keyCode === 87) {
+      console.log('WIIIDE')
+      this.$store.commit('toggleFullWidth')
+      this.$store.commit('resize')
+    }
+    return
   }
 
   // ------ Find Chrome Local File System roots ----

src/Globals.ts

@@ -73,6 +73,7 @@ export type YamlConfigs = {
   dashboards: { [filename: string]: string }
   topsheets: { [filename: string]: string }
   vizes: { [filename: string]: string }
+  configs: { [filename: string]: string }
 }
 
 export const UI_FONT =

src/charts/line.vue

@@ -117,6 +117,8 @@ export default class VueComponent extends Vue {
       columns = columnNames.filter(col => col !== this.config.x).sort()
     }
 
+    const lines = [] as any[]
+
     for (let i = 0; i < columns.length; i++) {
       const col = columns[i]
       const legendName = useOwnNames ? this.config.legendTitles[i] : col
@@ -127,16 +129,17 @@ export default class VueComponent extends Vue {
       // are durations in 00:00:00 format?
       if (this.config.convertToSeconds) values = this.convertToSeconds(values)
 
-      this.data.push({
+      lines.push({
         x: x,
         y: values,
         name: legendName,
         type: 'line',
         textinfo: 'label+percent',
         textposition: 'inside',
-        automargin: true,
+        automargin: false,
       })
     }
+    this.data = lines
   }
 
   private convertToSeconds(values: any[]) {

src/components/TopSheet/TopSheetWorker.worker.ts

@@ -63,6 +63,7 @@ let _allConfigYamls: YamlConfigs = {
   dashboards: {},
   topsheets: {},
   vizes: {},
+  configs: {},
 }
 
 const _fileData: any = {}

src/js/HTTPFileSystem.ts

@@ -217,7 +217,7 @@ class SVNFileSystem {
   }
 
   async findAllYamlConfigs(folder: string): Promise<YamlConfigs> {
-    const yamls: YamlConfigs = { dashboards: {}, topsheets: {}, vizes: {} }
+    const yamls: YamlConfigs = { dashboards: {}, topsheets: {}, vizes: {}, configs: {} }
 
     const configFolders = []
 
@@ -249,6 +249,7 @@ class SVNFileSystem {
     const dashboard = 'dashboard*.y?(a)ml'
     const topsheet = 'topsheet*.y?(a)ml'
     const viz = 'viz*.y?(a)ml'
+    const config = 'simwrapper-config.y?(a)ml'
 
     for (const configFolder of configFolders) {
       const { files } = await this.getDirectory(configFolder)
@@ -264,6 +265,10 @@ class SVNFileSystem {
       micromatch
         .match(files, viz)
         .map(yaml => (yamls.vizes[yaml] = `${configFolder}/${yaml}`.replaceAll('//', '/')))
+
+      micromatch
+        .match(files, config)
+        .map(yaml => (yamls.configs[yaml] = `${configFolder}/${yaml}`.replaceAll('//', '/')))
     }
 
     // Sort them all by filename
@@ -276,8 +281,10 @@ class SVNFileSystem {
     yamls.vizes = Object.fromEntries(
       Object.entries(yamls.vizes).sort((a, b) => (a[0] > b[0] ? 1 : -1))
     )
+    yamls.configs = Object.fromEntries(
+      Object.entries(yamls.configs).sort((a, b) => (a[0] > b[0] ? 1 : -1))
+    )
 
-    // console.log(yamls)
     return yamls
   }