Add AequilibraE support

index.html

@@ -27,7 +27,7 @@
     <link href="/images/SW_favicon.png" rel="icon" type="image/png" />
 
     <!-- descriptive things -->
-    <title>SimWrapper</title>
+    <title>AequilibraE Explore</title>
     <meta content="SimWrapper" name="twitter:title" />
     <meta content="SimWrapper" name="og:title" />
     <meta content="From the VSP team at TU-Berlin" name="twitter:description" />

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",
+    "sqlite3": "^5.1.7",
     "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.vue')),
   carriers: defineAsyncComponent(() => import('./carriers.vue')),
   flowmap: defineAsyncComponent(() => import('./flowmap.vue')),
   links: defineAsyncComponent(() => import('./links.vue')),

src/dash-panels/aequilibrae.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/AequilibraEReader.vue'
+
+export default defineComponent({
+  name: 'AequilibraEPanel',
+  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'}")
@@ -45,6 +49,10 @@ export default defineComponent({
       dataSet: {} as { data?: any; x?: any[]; y?: any[]; allRows?: any },
       YAMLrequirementsOverview: { dataset: '' },
       colors: [
+        '#dddddd00', // light gray
+        '#dddddd00', // light gray
+        '#dddddd00', // light gray
+        '#dddddd00', // light gray
         '#F08080', // Light coral pink
         '#FFB6C1', // Pale pink
         '#FFDAB9', // peach
@@ -117,6 +125,12 @@ 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()
@@ -227,6 +241,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 +299,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 +314,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;
@@ -314,4 +335,4 @@ export default defineComponent({
 
 @media only screen and (max-width: 640px) {
 }
-</style>
+</style>

src/fileSystemConfig.ts

@@ -134,66 +134,13 @@ let fileSystems: FileSystemConfig[] = [
   // ----------- End. Below here, these are editable: -------------------
 
   {
-    name: 'VSP/ZIB LakeFS',
-    hidden: true,
-    slug: 'vsp-zib',
-    description: 'Public VSP data at Zuse Institute Berlin',
-    baseURL: 'https://download.lake-daki.zib.de/?PATH=vsp&dir=matsim',
-    isZIB: true,
-    // 'https://download.lake-daki.zib.de/?PATH=vsp&dir=matsim%2Fcountries%2Fde%2Fberlin%2Fberlin-v6.4%2Foutput%2Fberlin-v6.4-10pct',
-  },
-  {
-    name: 'VSP TU-Berlin',
-    slug: 'public',
-    description: 'Public data at VSP / TU Berlin',
-    baseURL: 'https://svn.vsp.tu-berlin.de/repos/public-svn/matsim/scenarios/countries',
-    thumbnail: '/simwrapper/images/thumb-chart.jpg',
-    skipList: ['episim/battery'],
-  },
-  {
-    name: 'Berlin Open Scenario v6',
-    slug: 'open-berlin',
-    description: 'Standard dashboard from the MATSim SimWrapper contrib',
-    thumbnail: 'images/thumb-localfiles.jpg',
-    baseURL:
-      'https://svn.vsp.tu-berlin.de/repos/public-svn/matsim/scenarios/countries/de/berlin/berlin-v6.4/output/berlin-v6.4-10pct/',
-    example: true,
-  },
-  {
-    name: 'Hamburg RealLabHH',
-    slug: 'reallabhh',
-    description: 'Hamburg, Germany',
-    description_de: 'Hamburg, Deutschland',
-    baseURL:
-      'https://svn.vsp.tu-berlin.de/repos/public-svn/matsim/scenarios/countries/de/hamburg/hamburg-v2/hamburg-v2.2/viz',
-    thumbnail: '/simwrapper/images/thumb-localfiles.jpg',
-    example: true,
-  },
-  {
-    name: 'Berlin BENE Project',
-    slug: 'bene',
-    description: 'widescreen, in German',
-    baseURL:
-      'https://svn.vsp.tu-berlin.de/repos/public-svn/matsim/scenarios/countries/de/berlin/projects/bene/website',
-    thumbnail: '/simwrapper/images/thumb-localfiles.jpg',
-    hidden: false,
-    example: true,
-  },
-  {
-    name: 'Visualization Examples',
-    slug: 'examples',
-    description: 'Various SimWrapper data vis types',
-    thumbnail: 'images/thumb-localfiles.jpg',
-    baseURL: 'https://svn.vsp.tu-berlin.de/repos/public-svn/shared/simwrapper',
-    example: true,
-  },
-  {
-    name: 'Additional Sample Data',
-    slug: 'sample-data',
-    description: 'Sample data from various cities',
+    name: '"Chicago Regional" Example',
+    slug: 'aequilibrae-example',
+    description: 'Example model using the AequilibraE plugin',
     thumbnail: 'images/thumb-localfiles.jpg',
-    baseURL: 'https://svn.vsp.tu-berlin.de/repos/public-svn/shared/sample-data',
     example: true,
+    baseURL: 'https://aequilibrae-simwrapper-demo.s3.amazonaws.com/',
+    isS3: true,
   },
   {
     name: 'Localhost:8000',