Add AequilibraE support

package.json

@@ -61,6 +61,7 @@
     "blob-util": "^2.0.2",
     "buefy": "^0.9.29",
     "bulma": "^1.0.0",
+    "cartocolor": "^5.0.2",
     "color-string": "^1.9.1",
     "colormap": "^2.3.1",
     "comlink": "^4.4.2",
@@ -119,6 +120,10 @@
     "sax-wasm": "^2.2.4",
     "shallow-equal": "^1.2.1",
     "shapefile": "^0.6.6",
+    "spatialite": "^0.1.0",
+    "spl.js": "^0.1.2",
+    "sql.js": "^1.13.0",
+
     "the-new-css-reset": "^1.7.3",
     "threads": "^1.7.0",
     "three": "^0.127.0",

src/Globals.ts

@@ -168,6 +168,7 @@ export interface FileSystemConfig {
   example?: boolean
   isGithub?: boolean
   isZIB?: boolean
+  isS3?: boolean // AWS S3 bucket with public access
   flask?: boolean // Flask filesystem supports OMX open matrix API - see https://github.com/simwrapper/omx-server
 }
 

src/components/LegendColors.vue

@@ -1,11 +1,24 @@
 <template lang="pug">
+
 .legend-colors.flex-col
-  h4 {{ title }}
-  p {{ description }}
+  h4(v-if="title") {{ title }}
+  p(v-if="description") {{ description }}
   ul.list-items
-    li.legend-row(v-for="item in items" :key="item.value + item.value[0]")
-      .item-label(v-if="item.label") {{ item.label }}
-      .item-swatch(:style="`backgroundColor: rgb(${item.color})`")
+    li.legend-row(v-for="(item, idx) in items" :key="item.label + idx")
+      // Subtitle
+      span.legend-subtitle(v-if="item.type === 'subtitle'") {{ item.label }}
+      // Feature entry
+      template(v-else)
+        .item-swatch(v-if="item.shape === 'line' || item.type === 'line'"
+          :style="`width:32px;height:${item.size||4}px;background:rgb(${item.color});border-radius:2px;align-self:center;`"
+        )
+        .item-swatch(v-else-if="item.shape === 'polygon' || item.type === 'polygon'"
+          :style="`width:20px;height:20px;background:rgb(${item.color});border-radius:4px;border:1px solid #888;display:inline-block;`"
+        )
+        .item-swatch(v-else-if="item.shape === 'circle' || item.type === 'circle'"
+          :style="`width:${item.size||12}px;height:${item.size||12}px;background:rgb(${item.color});border-radius:50%;border:1px solid #888;display:inline-block;`"
+        )
+        .item-label {{ item.label }}
 
 </template>
 
@@ -32,6 +45,13 @@ export default defineComponent({
   margin: 0;
 }
 
+.legend-subtitle {
+  font-weight: bold;
+  margin-top: 0.5em;
+  margin-bottom: 0.25em;
+  display: block;
+}
+
 .item-label {
   margin: '0 0.5rem 0.0rem 0';
   font-weight: 'bold';

src/dash-panels/_allPanels.ts

@@ -28,6 +28,7 @@ export const panelLookup: { [key: string]: AsyncComponent } = {
   xml: defineAsyncComponent(() => import('./xml.vue')),
 
   // full-screen map visualizations:
+  aequilibrae: defineAsyncComponent(() => import('./aequilibrae-map.vue')),
   carriers: defineAsyncComponent(() => import('./carriers.vue')),
   flowmap: defineAsyncComponent(() => import('./flowmap.vue')),
   links: defineAsyncComponent(() => import('./links.vue')),

src/dash-panels/aequilibrae-map.vue

@@ -0,0 +1,49 @@
+<template lang="pug">
+aeq-reader.aeq-panel(
+  :root="fileSystemConfig.slug"
+  :subfolder="subfolder"
+  :config="config"
+  :thumbnail="false"
+  @isLoaded="isLoaded"
+  @error="$emit('error', $event)"
+)
+
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import AeqReader from '@/plugins/aequilibrae-map/AequilibraEMapComponent.vue'
+
+export default defineComponent({
+  name: 'AequilibraEMapPanel',
+  components: { AeqReader },
+  props: {
+    config: Object,
+    datamanager: Object,
+    fileSystemConfig: Object,
+    subfolder: String,
+    yamlConfig: String,
+  },
+  methods: {
+    isLoaded() {
+      this.$emit('isLoaded')
+    },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.aeq-panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/dash-panels/tile.vue

@@ -1,10 +1,14 @@
 <template lang="pug">
 .content
   .tiles-container(v-if="imagesAreLoaded")
-    .tile(v-for="(value, index) in this.dataSet.data" v-bind:style="{ 'background-color': colors[index % colors.length]}" @click="")
+    .tile(
+      v-for="(value, index) in this.dataSet.data"
+      :style="getTileStyle(index)"
+      @click=""
+    )
       a(:href="value[urlIndex]" target="_blank" :class="{ 'is-not-clickable': !value[urlIndex] }")
-        p.tile-title {{ value[tileNameIndex] }}
-        p.tile-value {{ value[tileValueIndex] }}
+        p.tile-title(:style="{ color: tileTextColor }") {{ value[tileNameIndex] }}
+        p.tile-value(:style="{ color: tileTextColor }") {{ value[tileValueIndex] }}
         .tile-image(v-if="value[tileImageIndex] != undefined && checkIfItIsACustomIcon(value[tileImageIndex])" :style="{'background': base64Images[index], 'background-size': 'contain'}")
         img.tile-image(v-else-if="value[tileImageIndex] != undefined && checkIfIconIsInAssetsFolder(value[tileImageIndex])" v-bind:src="getLocalImage(value[tileImageIndex].trim())" :style="{'background': ''}")
         font-awesome-icon.tile-image(v-else-if="value[tileImageIndex] != undefined" :icon="value[tileImageIndex].trim()" size="2xl" :style="{'background': '', 'color': 'black'}")
@@ -22,9 +26,53 @@ import HTTPFileSystem from '@/js/HTTPFileSystem'
 import globalStore from '@/store'
 import { arrayBufferToBase64 } from '@/js/util'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { openDb } from '@/plugins/sqlite-map/db'
+import { initSql } from '@/plugins/sqlite-map/loader'
+import { loadDbWithCache } from '@/plugins/sqlite-map/helpers'
 
 const BASE_URL = import.meta.env.BASE_URL
 
+// color palette options
+const PALETTE_PASTEL = [
+  '#F08080', // Light coral pink
+  '#FFB6C1', // Pale pink
+  '#FFDAB9', // peach
+  '#FFECB3', // cream yellow
+  '#B0E0E6', // light blue
+  '#98FB98', // light green
+  '#FFD700', // golden yellow
+  '#FFA07A', // salmon pink
+  '#E0FFFF', // light turquoise
+  '#FFDAB9', // pink
+  '#FFC0CB', // pink
+  '#FFA500', // orange
+  '#FF8C00', // dark orange
+  '#FF7F50', // coral red
+  '#FFE4B5', // papaya
+  '#ADD8E6', // light blue
+  '#90EE90', // light green
+  '#FFD700', // golden yellow
+  '#FFC0CB', // pink
+  '#FFA500', // Orange
+]
+
+const PALETTE_VIVID = [
+  '#FF006E', // Vivid Pink
+  '#FB5607', // Vivid Orange
+  '#FFBE0B', // Vivid Yellow
+  '#8338EC', // Vivid Purple
+  '#3A86FF', // Vivid Blue
+  '#06FFA5', // Vivid Green
+  '#FF4365', // Vivid Red
+  '#00D9FF', // Vivid Cyan
+  '#FF1493', // Vivid Deep Pink
+  '#FF8C00', // Vivid Deep Orange
+]
+
+const PALETTE_MONOCHROME = [
+  '#f7f7fe', // Light gray
+]
+
 export default defineComponent({
   name: 'Tile',
   components: { FontAwesomeIcon },
@@ -44,29 +92,9 @@ export default defineComponent({
       // dataSet is either x,y or allRows[]
       dataSet: {} as { data?: any; x?: any[]; y?: any[]; allRows?: any },
       YAMLrequirementsOverview: { dataset: '' },
-      colors: [
-        '#F08080', // Light coral pink
-        '#FFB6C1', // Pale pink
-        '#FFDAB9', // peach
-        '#FFECB3', // cream yellow
-        '#B0E0E6', // light blue
-        '#98FB98', // light green
-        '#FFD700', // golden yellow
-        '#FFA07A', // salmon pink
-        '#E0FFFF', // light turquoise
-        '#FFDAB9', // pink
-        '#FFC0CB', // pink
-        '#FFA500', // orange
-        '#FF8C00', // dark orange
-        '#FF7F50', // coral red
-        '#FFE4B5', // papaya
-        '#ADD8E6', // light blue
-        '#90EE90', // light green
-        '#FFD700', // golden yellow
-        '#FFC0CB', // pink
-        '#FFA500', // Orange
-      ],
+      colors: PALETTE_PASTEL,
       colorsD3: [
+        // TODO: remove? Is this being used?
         '#1F77B4',
         '#FF7F0E',
         '#2CA02C',
@@ -117,10 +145,29 @@ export default defineComponent({
     fileApi(): HTTPFileSystem {
       return new HTTPFileSystem(this.fileSystemConfig, globalStore)
     },
+    tileBorderColor(): string {
+      return this.globalState.isDarkMode ? '#fff' : '#000'
+    },
+    tileTextColor(): string {
+      return this.globalState.isDarkMode ? '#fff' : '#363636'
+    },
   },
   async mounted() {
-    this.dataSet = await this.loadFile()
-    this.validateDataSet()
+    // Set color palette from config if specified, otherwise default to pastel
+    if (this.config.colors) {
+      const paletteKey = this.config.colors.toLowerCase()
+      if (paletteKey === 'vivid') {
+        this.colors = PALETTE_VIVID
+      } else if (paletteKey === 'monochrome') {
+        this.colors = PALETTE_MONOCHROME
+      } else {
+        // Default to pastel for any other value or unrecognized palette
+        this.colors = PALETTE_PASTEL
+      }
+    }
+
+    this.dataSet = await this.buildDataset()
+    // this.validateDataSet()
     await this.loadImages()
     this.$emit('isLoaded')
     console.log(this.dataSet)
@@ -191,6 +238,79 @@ export default defineComponent({
       return []
     },
 
+    async getDataFromSQLQuery(
+      database: string,
+      query: string,
+      singleValue = true,
+      titleColumn = 'metric',
+      valueColumn = 'value'
+    ) {
+      try {
+        const trimmedQuery = query.trim()
+        // open a sqlite connection
+        const spl = await initSql()
+        // connect to database
+        const db = await loadDbWithCache(spl, this.fileApi, openDb, database)
+        // run query and return result
+        if (singleValue) {
+          const queryResult = await db.exec(trimmedQuery).get.first
+          return queryResult
+        } else {
+          const queryResult = await db.exec(trimmedQuery).get.objs
+          const results = []
+          for (const obj of queryResult) {
+            results.push([obj[titleColumn], obj[valueColumn]]) // table columns default to 'metric' and 'value'
+          }
+          return results
+        }
+      } catch (e) {
+        console.error('' + e)
+        this.$emit('error', 'Error querying database: ' + database)
+      }
+      return { data: [] }
+    },
+
+    async buildDataset() {
+      // Datasets can be defined in a handful of ways.
+      // If `dataset` value is a string, it's a .csv to load.
+      if (typeof this.config.dataset === 'string') {
+        return await this.loadFile()
+      }
+      // It can be database & sql query
+      if (this.config.dataset.database && this.config.dataset.query) {
+        return {
+          data: await this.getDataFromSQLQuery(
+            this.config.dataset.database,
+            this.config.dataset.query,
+            false,
+            this.config.dataset.titleCol || 'metric',
+            this.config.dataset.valueCol || 'value'
+          ),
+        }
+      }
+      // Otherwise it's a list of key-value pairs.
+      // Values can either be static or be a database & sql query returning a single value.
+      if (Array.isArray(this.config.dataset)) {
+        const data: any[] = await Promise.all(
+          this.config.dataset.map(async (item: any) => {
+            const key = item.key
+            const row: any[] = []
+            row.push(key)
+            // if the database/query are defined
+            if (item.value?.database && item.value?.query) {
+              const result = await this.getDataFromSQLQuery(item.value.database, item.value.query)
+              row.push(result)
+            } else {
+              // otherwise it's a static value
+              row.push(item.value)
+            }
+            return row
+          })
+        )
+        return { data: data }
+      }
+    },
+
     validateYAML() {
       for (const key in this.YAMLrequirementsOverview) {
         if (key in this.config === false) {
@@ -227,6 +347,14 @@ export default defineComponent({
       }
       return false
     },
+
+    getTileStyle(index: number) {
+      return {
+        'background-color': this.colors[index % this.colors.length],
+        border: '1px solid ' + this.tileBorderColor,
+        color: this.tileTextColor,
+      }
+    },
   },
 })
 </script>
@@ -277,13 +405,13 @@ export default defineComponent({
   padding: 20px;
   min-width: 250px;
   font-family: $fancyFont;
+  border-color: v-bind(tileBorderColor);
 }
 
 .tile .tile-value {
-  font-size: 2rem;
+  font-size: 3rem;
   font-weight: bold;
   width: 100%;
-  color: #363636; // var(--text) but always the color from the light mode.
   grid-column-start: 2;
   grid-column-end: 4;
   text-align: center;
@@ -292,10 +420,9 @@ export default defineComponent({
 
 .tile .tile-title {
   width: 100%;
-  font-size: 1.4rem;
-  height: 5rem;
+  font-size: 2.5rem;
+  // height: 3.5rem;
   margin-bottom: 0;
-  color: #363636; // var(--text) but always the color from the light mode.
   text-align: center;
   grid-column-start: 1;
   grid-column-end: 5;

src/fileSystemConfig.ts

@@ -250,4 +250,4 @@ try {
   console.error('ERROR MERGING URL SHORTCUTS:', '' + e)
 }
 
-export default fileSystems
+export default fileSystems