re-enable links plugin

sfcta · Dec 1, 2021 · 5e51289 · 5e51289
1 parent c081673
commit 5e51289
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/src/plugins/links-gl/ConfigPanel.vue b/src/plugins/links-gl/ConfigPanel.vue
@@ -51,7 +51,7 @@
       .dropdown.is-up.full-width(:class="{'is-active': isColorButtonActive}")
         .dropdown-trigger
           img.color-button(v-bind:style="[isDarkMode ? {'transform' : 'scaleX(1)'} : {'transform' : 'scaleX(-1)'}]"
-                          :src="`${pathColorScale}scale-${selectedColorRamp}.png`"
+                          :src="getColorRampUrl(selectedColorRamp)"
                           @click="() => this.isColorButtonActive = !this.isColorButtonActive"
           )
 
@@ -61,7 +61,7 @@
                             @click="handleColorRamp(colorRamp)"
                             :style="{'padding': '0.25rem 0.25rem'}")
               img.swap-color(v-bind:style="[isDarkMode ? {'transform' : 'scaleX(1)'} : {'transform' : 'scaleX(-1)'}]"
-                            :src="`${pathColorScale}scale-${colorRamp}.png`")
+                            :src="getColorRampUrl(colorRamp)")
               p(:style="{'lineHeight': '1rem', 'marginBottom':'0.25rem'}") {{ colorRamp }}
 
 </template>
@@ -119,12 +119,14 @@ export default class VueComponent extends Vue {
   @Prop({ required: true })
   private selectedColorRamp!: string
 
-  private pathColorScale = '/simwrapper/colors/'
   private isButtonActive = false
   private isColorButtonActive = false
 
   private scaleWidthValue = '' + this.scaleWidth
 
+  private globalState = globalStore.state
+  private isDarkMode = this.globalState.colorScheme === ColorScheme.DarkMode
+
   private colorRamps: { [title: string]: { png: string; diff?: boolean } } = {
     viridis: { png: 'scale-viridis.png' },
     inferno: { png: 'scale-inferno.png' },
@@ -136,13 +138,14 @@ export default class VueComponent extends Vue {
     this.scaleWidthValue = '' + this.scaleWidth
   }
 
-  private globalState = globalStore.state
-  private isDarkMode = this.globalState.colorScheme === ColorScheme.DarkMode
-
   private mounted() {
     this.scaleWidthValue = '' + this.scaleWidth
   }
 
+  private getColorRampUrl(ramp: string) {
+    return new URL(`/colors/scale-${ramp}.png`, import.meta.url).href
+  }
+
   @Watch('scaleWidthValue') handleScaleChanged() {
     // if (this.scaleWidth === parseFloat(this.scaleWidthValue)) return
 
@@ -154,13 +157,13 @@ export default class VueComponent extends Vue {
 
   private changeColorForDarkMode() {
     if (this.isDarkMode) {
-      ;(document.getElementsByClassName('color-button') as HTMLCollectionOf<
-        HTMLElement
-      >)[0].style.transform = 'scaleX(1)'
+      ;(
+        document.getElementsByClassName('color-button') as HTMLCollectionOf<HTMLElement>
+      )[0].style.transform = 'scaleX(1)'
     } else {
-      ;(document.getElementsByClassName('color-button') as HTMLCollectionOf<
-        HTMLElement
-      >)[0].style.transform = 'scaleX(-1)'
+      ;(
+        document.getElementsByClassName('color-button') as HTMLCollectionOf<HTMLElement>
+      )[0].style.transform = 'scaleX(-1)'
     }
 
     var i

diff --git a/src/plugins/links-gl/LinkVolumes.vue b/src/plugins/links-gl/LinkVolumes.vue
@@ -93,7 +93,7 @@ import ConfigPanel from './ConfigPanel.vue'
 import LinkGlLayer from './LinkLayer'
 import HTTPFileSystem from '@/js/HTTPFileSystem'
 import DrawingTool from '@/components/DrawingTool/DrawingTool.vue'
-import GzipFetcher from '@/workers/GzipFetcher.worker'
+import GzipFetcher from '@/workers/GzipFetcher.worker.ts?worker'
 
 import {
   ColorScheme,
@@ -244,8 +244,9 @@ class MyPlugin extends Vue {
         this.myState.subfolder + '/' + this.myState.yamlConfig
       )
       this.vizDetails = YAML.parse(text)
-    } catch (e) {
-      console.log('failed')
+    } catch (err) {
+      console.error('failed')
+      const e = err as any
       // maybe it failed because password?
       if (this.myState.fileSystem && this.myState.fileSystem.needPassword && e.status === 401) {
         this.$store.commit('requestLogin', this.myState.fileSystem.slug)
@@ -313,7 +314,7 @@ class MyPlugin extends Vue {
     // // find max value for scaling
     if (!this.csvData.headerMax[column]) {
       let max = 0
-      this.buildColumnValues[column].forEach(value => (max = Math.max(max, value)))
+      this.buildColumnValues[column].forEach((value) => (max = Math.max(max, value)))
       if (max) this.csvData.headerMax[column] = max
     }
 
@@ -387,11 +388,10 @@ class MyPlugin extends Vue {
     if (!this.myState.fileApi) return
 
     try {
+      this.myState.statusMessage = 'Loading network...'
       this.linkOffsetLookup = {}
       this.numLinks = 0
 
-      this.myState.statusMessage = 'Loading network...'
-
       const network = `/${this.myState.subfolder}/${this.vizDetails.geojsonFile}`
 
       const worker = new GzipFetcher() as Worker

diff --git a/src/plugins/pluginRegistry.ts b/src/plugins/pluginRegistry.ts
@@ -3,7 +3,7 @@
 // import VehicleAnimation from '@/plugins/vehicle-animation/VehicleAnimation.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 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'
@@ -19,7 +19,7 @@ const plugins = {
   //   CarrierViewer,
   //   XyHexagons,
   //   AgentAnimation,
-  // LinksGl,
+  LinksGl,
   //   LinkVolumes,
   //   ShapeFile,
   //   SankeyDiagram,