fix: Tables and topsheets now shown as thumbnails on Files tab

- Fixes simwrapper#106

src/charts/allCharts.ts

@@ -2,6 +2,7 @@
 // the name of the import will be the chart "type" in YAML.
 
 // resizable charts:
+import aggregate from './aggregate.vue'
 import area from './area.vue'
 import bar from './bar.vue'
 import bubble from './bubble.vue'
@@ -18,7 +19,6 @@ import vega from './vega.vue'
 import video from './video.vue'
 
 // full-screen map visualizations:
-import aggregate from './aggregate.vue'
 import carriers from './carriers.vue'
 import flowmap from './flowmap.vue'
 import links from './links.vue'

src/plugins/calculation-table/CalculationTable.vue

@@ -0,0 +1,152 @@
+<template lang="pug">
+.my-component(:class="{'hide-thumbnail': !thumbnail}" oncontextmenu="return false")
+
+  img.thumb(v-if="thumbnail" src="./assets/table.png" :width="128")
+
+
+  .topsheet(v-if="!thumbnail && isLoaded")
+      p.header {{ subfolder }}
+
+      h2 {{ vizDetails.title }}
+      p {{ vizDetails.description}}
+
+      hr
+
+      component.dash-card(
+        is="TopSheet"
+        :fileSystemConfig="fileSystem"
+        :subfolder="subfolder"
+        :config="vizDetails"
+        :yaml="yamlConfig"
+        :files="files"
+        :cardTitle="vizDetails.title"
+        :cardId="'table1'"
+        :allConfigFiles="allConfigFiles"
+      )
+
+      //- @isLoaded="handleCardIsLoaded(card)"
+      //- @dimension-resizer="setDimensionResizer"
+      //- @titles="setCardTitles(card, $event)"
+
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import YAML from 'yaml'
+
+import util from '@/js/util'
+import globalStore from '@/store'
+
+import { ColorScheme, FileSystemConfig, VisualizationPlugin, Status, YamlConfigs } from '@/Globals'
+
+import HTTPFileSystem from '@/js/HTTPFileSystem'
+import TopSheet from '@/components/TopSheet/TopSheet.vue'
+
+@Component({
+  components: { TopSheet },
+})
+class MyComponent extends Vue {
+  @Prop({ required: true }) private root!: string
+  @Prop({ required: true }) private subfolder!: string
+  @Prop({ required: false }) private yamlConfig!: string
+  @Prop({ required: false }) private thumbnail!: boolean
+
+  private globalState = globalStore.state
+
+  private fileApi!: HTTPFileSystem
+  private fileSystem!: FileSystemConfig
+
+  private vizDetails = {
+    title: '',
+    description: '',
+    thumbnail: '',
+  }
+
+  private isLoaded = false
+  private allConfigFiles: YamlConfigs = { dashboards: {}, topsheets: {}, vizes: {}, configs: {} }
+  private files: string[] = []
+
+  private async mounted() {
+    this.buildFileApi()
+    await this.getVizDetails()
+    this.allConfigFiles = await this.fileApi.findAllYamlConfigs(this.subfolder)
+    const { files } = await this.fileApi.getDirectory(this.subfolder)
+    this.files = files
+
+    this.isLoaded = true
+
+    if (this.thumbnail) return
+  }
+
+  public buildFileApi() {
+    const filesystem = this.getFileSystem(this.root)
+    this.fileApi = new HTTPFileSystem(filesystem)
+    this.fileSystem = filesystem
+  }
+
+  private thumbnailUrl = "url('assets/thumbnail.jpg') no-repeat;"
+  private get urlThumbnail() {
+    return this.thumbnailUrl
+  }
+
+  private getFileSystem(name: string) {
+    const svnProject: FileSystemConfig[] = this.$store.state.svnProjects.filter(
+      (a: FileSystemConfig) => a.slug === name
+    )
+    if (svnProject.length === 0) {
+      console.log('no such project')
+      throw Error
+    }
+    return svnProject[0]
+  }
+
+  private async getVizDetails() {
+    if (!this.fileApi) return
+
+    console.log(this.yamlConfig)
+    // first get config
+    try {
+      const text = await this.fileApi.getFileText(this.subfolder + '/' + this.yamlConfig)
+      this.vizDetails = YAML.parse(text)
+    } catch (e) {
+      console.error('failed')
+    }
+    const t = this.vizDetails.title ? this.vizDetails.title : 'Table'
+    this.$emit('title', t)
+  }
+}
+
+// !register plugin!
+globalStore.commit('registerPlugin', {
+  kebabName: 'calculation-table',
+  prettyName: 'Table',
+  description: 'Calculation table',
+  filePatterns: ['(topsheet|table)*.y?(a)ml'],
+  component: MyComponent,
+} as VisualizationPlugin)
+
+export default MyComponent
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.my-component {
+  margin: 0 0;
+  padding: 0 2rem;
+}
+
+.header {
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
+  color: var(--text);
+}
+
+.topsheet {
+  max-width: 55rem;
+  margin: 0rem auto;
+}
+
+@media only screen and (max-width: 640px) {
+}
+</style>

src/plugins/pluginRegistry.ts

@@ -1,10 +1,9 @@
 // import plugins in the order you want them to appear on project pages
 import CarrierViewer from '@/plugins/carrier-viewer/CarrierViewer.vue'
 import VehicleAnimation from '@/plugins/vehicle-animation/VehicleAnimation.vue'
+import CalculationTable from '@/plugins/calculation-table/CalculationTable.vue'
 import XyHexagons from '@/plugins/xy-hexagons/XyHexagons.vue'
-// import AgentAnimation from '@/plugins/agent-animation/AgentAnimation.vue'
 import LinksGl from '@/plugins/links-gl/LinkVolumes.vue'
-// import LinkVolumes from '@/plugins/link-vols/LinkVolumes.vue'
 import TransitDemand from '@/plugins/transit-demand/TransitDemand.vue'
 import ShapeFile from '@/plugins/shape-file/ShapeFile.vue'
 import AggregateOd from '@/plugins/aggregate-od/AggregateOd.vue'
@@ -15,19 +14,18 @@ import ImageView from '@/plugins/image/ImageView.vue'
 
 // // EVERY plugin must also be exported here:
 const plugins = {
+  AggregateOd,
+  CalculationTable,
   CarrierViewer,
-  VehicleAnimation,
-  XyHexagons,
-  // AgentAnimation,
+  ImageView,
   LinksGl,
-  //   LinkVolumes,
-  ShapeFile,
   SankeyDiagram,
-  VegaLite,
-  AggregateOd,
+  ShapeFile,
   TransitDemand,
+  VegaLite,
+  VehicleAnimation,
   VideoPlayer,
-  ImageView,
+  XyHexagons,
 }
 
 export default plugins

src/templates/BlankPlugin.vue

@@ -0,0 +1,128 @@
+<template lang="pug">
+.my-component(:class="{'hide-thumbnail': !thumbnail}" oncontextmenu="return false")
+
+  img.thumb(v-if="thumbnail" src="./assets/table.png" :width="128")
+
+
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import YAML from 'yaml'
+
+import util from '@/js/util'
+import globalStore from '@/store'
+
+import { ColorScheme, FileSystemConfig, VisualizationPlugin, Status } from '@/Globals'
+
+import HTTPFileSystem from '@/js/HTTPFileSystem'
+
+@Component({
+  components: {},
+})
+class MyComponent extends Vue {
+  @Prop({ required: true }) private root!: string
+  @Prop({ required: true }) private subfolder!: string
+  @Prop({ required: false }) private yamlConfig!: string
+  @Prop({ required: false }) private thumbnail!: boolean
+
+  private globalState = globalStore.state
+
+  private fileApi!: HTTPFileSystem
+  private fileSystem!: FileSystemConfig
+
+  private vizDetails = {
+    title: '',
+    description: '',
+    thumbnail: '',
+  }
+
+  private async mounted() {
+    this.buildFileApi()
+    await this.getVizDetails()
+
+    if (this.thumbnail) return
+
+    // this.statusMessage = `${this.$i18n.t('loading')}`
+
+    this.buildThumbnail()
+  }
+
+  private beforeDestroy() {}
+
+  public buildFileApi() {
+    const filesystem = this.getFileSystem(this.root)
+    this.fileApi = new HTTPFileSystem(filesystem)
+    this.fileSystem = filesystem
+  }
+
+  private thumbnailUrl = "url('assets/thumbnail.jpg') no-repeat;"
+  private get urlThumbnail() {
+    return this.thumbnailUrl
+  }
+
+  private getFileSystem(name: string) {
+    const svnProject: FileSystemConfig[] = this.$store.state.svnProjects.filter(
+      (a: FileSystemConfig) => a.slug === name
+    )
+    if (svnProject.length === 0) {
+      console.log('no such project')
+      throw Error
+    }
+    return svnProject[0]
+  }
+
+  private async getVizDetails() {
+    if (!this.fileApi) return
+
+    console.log(this.yamlConfig)
+    // first get config
+    try {
+      const text = await this.fileApi.getFileText(this.subfolder + '/' + this.yamlConfig)
+      this.vizDetails = YAML.parse(text)
+    } catch (e) {
+      console.error('failed')
+    }
+    const t = this.vizDetails.title ? this.vizDetails.title : 'Table'
+    this.$emit('title', t)
+  }
+
+  private async buildThumbnail() {
+    if (!this.fileApi) return
+    if (this.thumbnail && this.vizDetails.thumbnail) {
+      try {
+        const blob = await this.fileApi.getFileBlob(
+          this.subfolder + '/' + this.vizDetails.thumbnail
+        )
+        const buffer = await blob.arrayBuffer()
+        const base64 = util.arrayBufferToBase64(buffer)
+        if (base64)
+          this.thumbnailUrl = `center / cover no-repeat url(data:image/png;base64,${base64})`
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+}
+
+// !register plugin!
+globalStore.commit('registerPlugin', {
+  kebabName: 'calculation-table',
+  prettyName: 'Table',
+  description: 'Calculation table',
+  filePatterns: ['(topsheet|table)*.y?(a)ml'],
+  component: MyComponent,
+} as VisualizationPlugin)
+
+export default MyComponent
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.my-component {
+}
+
+@media only screen and (max-width: 640px) {
+}
+</style>

src/views/FolderBrowser.vue

@@ -33,8 +33,6 @@
               i.fa.fa-folder-open
               |  {{ cleanName(folder) }}
 
-      topsheets-finder(:fileSystemConfig="myState.svnProject" :subfolder="xsubfolder" :files="myState.files")
-
       //- thumbnails of each viz and image in this folder
       h3.curate-heading(v-if="myState.vizes.length") {{ $t('Analysis')}}
 
@@ -56,6 +54,11 @@
                     @title="updateTitle(index, $event)")
               p {{ viz.title }}
 
+      //- TODO calculation tables
+      //-       this.allConfigFiles = await this.fileSystem.findAllYamlConfigs(this.subfolder)
+      //- return Object.values(this.allConfigFiles.topsheets)
+
+
       // individual links to files in this folder
       h3.curate-heading(v-if="myState.files.length") {{$t('Files')}}