[EXP] Route departure tables

src/runtime/components/modal.vue

@@ -4,6 +4,7 @@
       :active="modelValue"
       has-modal-card
       can-cancel
+      :fullscreen="fullscreen"
       @update:model-value="$emit('update:modelValue', $event)"
       @close="close"
     >
@@ -34,7 +35,8 @@ export default {
   props: {
     text: { type: String, default: '+' },
     title: { type: String, default: '' },
-    modelValue: { type: Boolean }
+    modelValue: { type: Boolean },
+    fullscreen: { type: Boolean }
   },
   emits: ['input', 'update:modelValue'],
   data () {

src/runtime/components/nw.ts

@@ -0,0 +1,90 @@
+// adapted from https://gist.github.com/shinout/f19da7720d130f3925ac
+const UP = '1'
+const LEFT = '2'
+const UL = '4'
+
+interface Options {
+  G: number,
+  P: number,
+  M: number
+}
+
+interface Matrix {
+  [key: number]: {[key: number]: number}
+}
+
+interface Direc {
+  [key: number]: {[key: number]: Array<string>}
+}
+
+export function NeedlemanWunsch(s1: Array<string>, s2: Array<string>, op: Options): {a: Array<string>, b: Array<string>} {
+  op = op || {}
+  const G = op.G || 2
+  const P = op.P || 1
+  const M = op.M || 0.5
+  const mat: Matrix = {}
+  const direc: Direc = {}
+
+  // initialization
+  for (let i = 0; i < s1.length + 1; i++) {
+    mat[i] = { 0: 0 }
+    direc[i] = { 0: [] }
+    for (let j = 1; j < s2.length + 1; j++) {
+      mat[i][j] = (i === 0)
+        ? 0
+        : (s1[i - 1] === s2[j - 1]) ? P : M
+      direc[i][j] = []
+    }
+  }
+
+  // calculate each value
+  for (let i = 0; i < s1.length + 1; i++) {
+    for (let j = 0; j < s2.length + 1; j++) {
+      const newval = (i === 0 || j === 0)
+        ? -G * (i + j)
+        : Math.max(mat[i - 1][j] - G, mat[i - 1][j - 1] + mat[i][j], mat[i][j - 1] - G)
+
+      if (i > 0 && j > 0) {
+        if (newval === mat[i - 1][j] - G) { direc[i][j].push(UP) }
+        if (newval === mat[i][j - 1] - G) { direc[i][j].push(LEFT) }
+        if (newval === mat[i - 1][j - 1] + mat[i][j]) { direc[i][j].push(UL) }
+      } else {
+        direc[i][j].push((j === 0) ? UP : LEFT)
+      }
+      mat[i][j] = newval
+    }
+  }
+
+  // get result
+  const chars = [new Array<string>(), new Array<string>()]
+  let I = s1.length
+  let J = s2.length
+  while (I > 0 || J > 0) {
+    switch (direc[I][J][0]) {
+      case UP:
+        I--
+        chars[0].push(s1[I])
+        chars[1].push('-')
+        break
+      case LEFT:
+        J--
+        chars[0].push('-')
+        chars[1].push(s2[J])
+        break
+      case UL:
+        I--
+        J--
+        chars[0].push(s1[I])
+        chars[1].push(s2[J])
+        break
+      default: break
+    }
+  }
+  return {
+    a: chars[0].reverse(),
+    b: chars[1].reverse()
+  }
+  // return chars.map(function(v) {
+  //   return v.reverse()
+  // })
+}

src/runtime/components/pages/route.vue

@@ -133,6 +133,9 @@
             :animated="false"
             @update:model-value="setTab"
           >
+            <o-tab-item id="schedule" label="Schedule">
+              <tl-route-departures-outer :route-id="entity.id" />
+            </o-tab-item>
             <o-tab-item id="summary" label="Connections">
               <client-only placeholder="Service patterns">
                 <tl-rsp-viewer v-if="activeTab === 1" :route-ids="entityIds" :link-version="linkVersion" />

src/runtime/components/route-departures-outer.vue

@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <o-field grouped>
+      <o-button>
+        <o-icon icon="fullscreen" @click="showModal=true" />
+      </o-button>
+      <o-select v-model="showKey">
+        <option v-for="[k,mergedPattern] of Object.entries(directionTables)" :key="k" :value="k">
+          To: {{ mergedPattern.title }}
+        </option>
+      </o-select>
+
+      <o-datepicker
+        v-model="displayServiceDate"
+        placeholder="Click to select..."
+        icon="calendar-today"
+        trap-focus
+      />
+
+      <o-field>
+        <o-dropdown position="bottom-left" append-to-body aria-role="menu" trap-focus menu-class="tl-feeds-table">
+          <template #trigger="{ active }">
+            <o-button label="Options" :icon-left="active ? 'menu-up' : 'menu-down'" />
+          </template>
+
+          <div aria-role="menu-item" style="padding:20px">
+            <o-field label="Group by">
+              <o-checkbox v-model="groupByRoute">
+                Route
+              </o-checkbox>
+            </o-field>
+            <o-field>
+              <o-checkbox v-model="groupByHeadsign">
+                Headsign
+              </o-checkbox>
+            </o-field>
+            <o-field>
+              <o-checkbox v-model="groupByStopPattern">
+                Stop Pattern
+              </o-checkbox>
+            </o-field>
+
+            <o-field label="Debug">
+              <o-checkbox v-model="showRt">
+                Show GTFS-RT
+              </o-checkbox>
+            </o-field>
+          </div>
+        </o-dropdown>
+      </o-field>
+    </o-field>
+
+    <tl-loading v-if="$apollo.loading" />
+    <tl-msg-error v-else-if="error">
+      {{ error }}
+    </tl-msg-error>
+    <div v-else-if="routes.length > 0">
+      <div
+        v-if="activeTable"
+        class="tl-timepoint-overflow"
+      >
+        <tl-route-departures-table
+          :merged-pattern="activeTable"
+          :timepoint-limit="6"
+          :show-rt="showRt"
+        />
+      </div>
+
+      <tl-modal
+        v-model="showModal"
+        title="Route Schedule"
+      >
+        <tl-route-departures-table
+          :merged-pattern="activeTable"
+          :timepoint-limit="100"
+          :show-rt="showRt"
+        />
+      </tl-modal>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { gql } from 'graphql-tag'
+import { parseISO, format } from 'date-fns'
+import { MergedPattern, Route, Trip, timepointTables } from './route-departures'
+
+const q = gql`
+query($ids: [Int!], $service_date: Date!) {
+    routes(ids: $ids) {
+        id
+        onestop_id
+        trips(limit: 1000, where: { service_date: $service_date}) {
+            id
+            trip_id
+            trip_headsign
+            direction_id
+            stop_pattern_id
+            stop_times(limit: 1000) {
+                stop_sequence
+                stop_headsign
+                timepoint
+                departure {
+                  scheduled
+                  estimated
+                }
+                stop {
+                    id
+                    stop_name
+                    onestop_id
+                }
+            }
+        }
+    }
+}
+`
+
+interface DirectionTables {[key: string]: MergedPattern}
+
+export default {
+  props: {
+    routeId: { type: Number, default: 0 }
+  },
+  data () {
+    const serviceDate: Date = new Date()
+    return {
+      showModalMergedPattern: {},
+      showKey: 'inbound',
+      routes: new Array<Route>(),
+      showModal: false,
+      groupByRoute: true,
+      groupByDirection: true,
+      groupByHeadsign: false,
+      groupByStopPattern: false,
+      showRt: false,
+      error: '',
+      serviceDate
+    }
+  },
+  apollo: {
+    routes: {
+      query: q,
+      error (e) { this.error = String(e) },
+      variables () {
+        return {
+          ids: [this.routeId],
+          service_date: format(this.serviceDate, 'yyyy-MM-dd')
+        }
+      }
+    }
+  },
+  computed: {
+    displayServiceDate: {
+      get () {
+        if (this.serviceDate) {
+          return this.serviceDate
+        }
+        // TODO: GET DATE
+        return parseISO('2024-07-11')
+      },
+      set (v: Date) {
+        this.serviceDate = v
+      }
+    },
+    activeTable() {
+      return this.directionTables[this.showKey]
+    },
+    directionTables(): DirectionTables {
+      if (this.routes.length === 0) {
+        return {}
+      }
+      const groupedTrips = new Map<string, Array<Trip>>()
+      for (const route of this.routes) {
+        for (const trip of route.trips) {
+          const key = []
+          if (this.groupByRoute) {
+            key.push(route.id)
+          }
+          if (this.groupByDirection) {
+            key.push(trip.direction_id)
+          }
+          if (this.groupByHeadsign) {
+            key.push(trip.trip_headsign)
+          }
+          if (this.groupByStopPattern) {
+            key.push(trip.stop_pattern_id)
+          }
+          const ks = key.join('|')
+          const a = groupedTrips.get(ks) || []
+          a.push(trip)
+          groupedTrips.set(ks, a)
+        }
+      }
+      const ret: DirectionTables = {}
+      for (const [k, v] of groupedTrips.entries()) {
+        ret[k] = timepointTables(v)
+      }
+      return ret
+    }
+  },
+  watch: {
+    directionTables () {
+      const keys = Object.keys(this.directionTables)
+      keys.sort()
+      this.showKey = keys.length > 0 ? keys[0] : ''
+    }
+  }
+}
+</script>
+
+<style>
+.tl-stop-column {
+  min-width:120px;
+}
+.tl-timepoint-overflow {
+  width:100% !important;
+  overflow-x:scroll;
+}
+
+</style>