fix: Fix single-panel navigation; URL of YAML file should load the viz

Squashed commit of the following:

commit 0b80f23896441dcab4725a453fdb36bb302667fa
Author: Billy Charlton <charlton@vsp.tu-berlin.de>
Date:   Tue Jan 4 16:22:31 2022 +0100

    fix: Fix single-panel navigation; URL of YAML file should load the viz

    Single-panel URLs were too messy and showing "split/..." when there was
    no split.

    UP navigation was also a bit borked so that's cleaned up here

    Finally, entering the URL of a YAML file directly should load the
    proper viz instead of nothing.

commit e6fae86e0d75e9072855c5b5aa3a9356c47eabd2
Author: Billy Charlton <charlton@vsp.tu-berlin.de>
Date:   Tue Jan 4 00:07:01 2022 +0100

    fix: build was not loading URLs with .dots in the path

    Vite squshes paths that end with a filename extension, which needed
    to be fixed before we can fix the larger URL->Viz mapping problems.

.prettierrc.js

@@ -3,5 +3,5 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'es5',
   printWidth: 100,
-  // arrowParens: 'avoid',
+  arrowParens: 'avoid',
 }

package.json

@@ -139,6 +139,7 @@
     "typescript": "^4.2.0",
     "vite": "^2.5.1",
     "vite-plugin-md": "^0.11.4",
+    "vite-plugin-rewrite-all": "^0.1.2",
     "vite-plugin-vue2": "^1.9.0",
     "vue-template-compiler": "^2.6.11",
     "vue-tsc": "^0.3.0"

src/components/FileSystemProjects.vue

@@ -23,13 +23,13 @@ export default class VueComponent extends Vue {
   private sources: FileSystemConfig[] = []
 
   private mounted() {
-    this.sources = globalStore.state.svnProjects.filter(source => !source.hidden)
+    this.sources = globalStore.state.svnProjects.filter((source) => !source.hidden)
   }
 
   private openProjectPage(source: FileSystemConfig) {
     const destination: any = Object.assign({}, source)
 
-    destination.component = 'FolderBrowser'
+    destination.component = 'TabbedDashboardView'
     destination.props = {
       root: source.slug,
       xsubfolder: '',

src/js/HTTPFileSystem.ts

@@ -52,7 +52,7 @@ class SVNFileSystem {
     }
 
     const myRequest = new Request(path, { headers })
-    const response = await fetch(myRequest).then((response) => {
+    const response = await fetch(myRequest).then(response => {
       // Check HTTP Response code: 200 is OK, everything else is a problem
       if (response.status != 200) {
         console.log('Status:', response.status)
@@ -123,9 +123,13 @@ class SVNFileSystem {
     const pathChunks = folder.split('/')
     for (const chunk of pathChunks) {
       currentPath = `${currentPath}${chunk}/`
-      const { dirs } = await this.getDirectory(currentPath)
-      if (dirs.indexOf(YAML_FOLDER) > -1)
-        configFolders.push(`${currentPath}/${YAML_FOLDER}`.replaceAll('//', '/'))
+      try {
+        const { dirs } = await this.getDirectory(currentPath)
+        if (dirs.indexOf(YAML_FOLDER) > -1)
+          configFolders.push(`${currentPath}/${YAML_FOLDER}`.replaceAll('//', '/'))
+      } catch (e) {
+        // doesn't matter, skip if it can't read it
+      }
     }
 
     // also add current working folder as final option, which supercedes all others
@@ -144,15 +148,15 @@ class SVNFileSystem {
 
       micromatch
         .match(files, dashboard)
-        .map((yaml) => (yamls.dashboards[yaml] = `${configFolder}/${yaml}`.replaceAll('//', '/')))
+        .map(yaml => (yamls.dashboards[yaml] = `${configFolder}/${yaml}`.replaceAll('//', '/')))
 
       micromatch
         .match(files, topsheet)
-        .map((yaml) => (yamls.topsheets[yaml] = `${configFolder}/${yaml}`.replaceAll('//', '/')))
+        .map(yaml => (yamls.topsheets[yaml] = `${configFolder}/${yaml}`.replaceAll('//', '/')))
 
       micromatch
         .match(files, viz)
-        .map((yaml) => (yamls.vizes[yaml] = `${configFolder}/${yaml}`.replaceAll('//', '/')))
+        .map(yaml => (yamls.vizes[yaml] = `${configFolder}/${yaml}`.replaceAll('//', '/')))
     }
 
     // Sort them all by filename
@@ -166,7 +170,7 @@ class SVNFileSystem {
       Object.entries(yamls.vizes).sort((a, b) => (a[0] > b[0] ? 1 : -1))
     )
 
-    console.log(yamls)
+    // console.log(yamls)
     return yamls
   }
 

src/main.ts

@@ -2,8 +2,7 @@ import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import Buefy from 'buefy'
 
-// order is important: import locale before global store.
-
+// order of these is important:
 import locale from '@/localeSettings'
 import store from '@/store'
 import router from '@/router'

src/router.ts

@@ -10,14 +10,14 @@ const BASE = import.meta.env.BASE_URL
 const routes = [
   {
     path: BASE + 'gist/:id',
-    component: () => import(/* webpackChunkName: "gist" */ '@/views/GistView.vue'),
+    component: () => import('@/views/GistView.vue'),
     props: (route: Route) => ({
       id: route.params.id,
     }),
   },
   {
     path: BASE + '*',
-    component: () => import(/* webpackChunkName: "split" */ '@/views/ScreenSplitter.vue'),
+    component: () => import('@/views/ScreenSplitter.vue'),
   },
   {
     // catch-all back to home page
@@ -54,7 +54,8 @@ function vizPlugins(): any[] {
 const router = new VueRouter({
   mode: 'history',
   base: '/',
-  routes: vizPlugins().concat(routes),
+  routes,
+  // routes: vizPlugins().concat(routes),
   // native-like back/forward and top-of-page routing
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {

src/views/DashBoard.vue

@@ -309,6 +309,7 @@ export default class VueComponent extends Vue {
 }
 
 .dashboard-header {
+  margin-top: 1rem;
   margin-bottom: 1rem;
   h2 {
     line-height: 3rem;

src/views/FolderBrowser.vue

@@ -13,8 +13,6 @@
     //- these are sections defined by viz-summary.yml etc
     .curated-sections
 
-      b: a(v-if="xsubfolder" @click="openOutputFolder('..')") ^ UP
-
       //- this is the content of readme.md, if it exists
       .readme-header
         .curate-content.markdown(
@@ -427,7 +425,13 @@ export default class VueComponent extends Vue {
       root: this.myState.svnProject.slug,
       xsubfolder: target,
     }
-    this.$emit('navigate', { component: 'TabbedDashboardView', props })
+
+    // if we are at top of hierarchy, jump to splashpage
+    if (!target && !this.myState.subfolder) {
+      this.$emit('navigate', { component: 'SplashPage', props: {} })
+    } else {
+      this.$emit('navigate', { component: 'TabbedDashboardView', props })
+    }
   }
 }
 </script>