Refactor

Author: tomstephen

src/plugins/aequilibrae/AequilibraEReader.vue

@@ -0,0 +1,48 @@
+export async function getTableNames(db: any): Promise<string[]> {
+  const result = await db.exec("SELECT name FROM sqlite_master WHERE type='table';").get.objs;
+  return result.map((row: any) => row.name);
+}
+
+export async function getTableSchema(db: any, tableName: string): Promise<{ name: string; type: string; nullable: boolean }[]> {
+  const result = await db.exec(`PRAGMA table_info("${tableName}");`).get.objs;
+  return result.map((row: any) => ({
+    name: row.name,
+    type: row.type,
+    nullable: row.notnull === 0,
+  }));
+}
+
+export async function getRowCount(db: any, tableName: string): Promise<number> {
+  const result = await db.exec(`SELECT COUNT(*) as count FROM "${tableName}";`).get.objs;
+  return result.length > 0 ? result[0].count : 0;
+}
+
+export async function fetchGeoJSONFeatures(db: any, table: { name: string; columns: any[] }, layerName: string, layerConfig: any) {
+  const columnNames = table.columns
+    .filter((c: any) => c.name.toLowerCase() !== 'geometry')
+    .map((c: any) => `"${c.name}"`)
+    .join(', ');
+
+  const query = `
+    SELECT ${columnNames},
+           AsGeoJSON(geometry) as geojson_geom,
+           GeometryType(geometry) as geom_type
+    FROM "${table.name}"
+    WHERE geometry IS NOT NULL
+    LIMIT 1000000;
+  `;
+  const rows = await db.exec(query).get.objs;
+  const features: any[] = [];
+  for (const row of rows) {
+    if (!row.geojson_geom) continue;
+    const properties: any = { _table: table.name, _layer: layerName, _layerConfig: layerConfig };
+    for (const col of table.columns) {
+      const key = col.name;
+      if (key.toLowerCase() !== 'geometry' && key !== 'geojson_geom' && key !== 'geom_type') {
+        properties[key] = row[key];
+      }
+    }
+    features.push({ type: 'Feature', geometry: row.geojson_geom, properties });
+  }
+  return features;
+}

src/plugins/aequilibrae/db.ts

@@ -0,0 +1,6 @@
+export const i18n = {
+  messages: {
+    en: {},
+    de: {},
+  },
+};

src/plugins/aequilibrae/i18n.ts

@@ -0,0 +1,11 @@
+.c-aequilibrae-viewer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--bgCardFrame); display: flex; flex-direction: column; }
+.view-toggle-bar { padding: 0.5rem; border-bottom: 1px solid var(--borderColor); background-color: var(--bgPanel); z-index: 10; }
+.viewer { flex: 1; overflow: auto; padding: 0.5rem 1rem; }
+.map-viewer { position: relative; flex: 1; width: 100%; height: 100%; }
+.loading { padding: 2rem; text-align: center; font-size: 1.2rem; color: var(--textFancy); }
+.database-content { padding: 0.5rem 0; }
+.database-content h3 { margin-bottom: 1rem; color: var(--textFancy); }
+.database-content h4 { margin-top: 1.5rem; margin-bottom: 0.5rem; color: var(--link); font-weight: bold; }
+.database-content p { margin: 0.25rem 0; color: var(--text); }
+.database-content .columns { margin-left: 1rem; font-size: 0.9rem; color: var(--textFancy); }
+.database-content .columns div { margin: 0.1rem 0; }

src/plugins/aequilibrae/reader.scss

@@ -0,0 +1,55 @@
+export function parseColor(colorString?: string): { r: number; g: number; b: number } {
+  if (!colorString) return { r: 89, g: 161, b: 79 };
+  if (colorString.startsWith('#')) {
+    if (colorString.length === 4) {
+      const r = colorString[1];
+      const g = colorString[2];
+      const b = colorString[3];
+      return {
+        r: parseInt(r + r, 16),
+        g: parseInt(g + g, 16),
+        b: parseInt(b + b, 16),
+      };
+    }
+    const hex = colorString.slice(1);
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return { r, g, b };
+  }
+  return { r: 89, g: 161, b: 79 };
+}
+
+export function buildStyleArrays(features: any[], defaultOpacity = 0.8) {
+  const n = features.length;
+  const fillColors = new Uint8ClampedArray(n * 4);
+  const lineColors = new Uint8ClampedArray(n * 3);
+  const lineWidths = new Float32Array(n);
+  const pointRadii = new Float32Array(n);
+
+  features.forEach((feature, i) => {
+    const cfg = feature?.properties?._layerConfig || {};
+    const geomType = (feature?.geometry?.type || '').toLowerCase();
+
+    const fill = parseColor(cfg.fillColor || '#59a14f');
+    fillColors[i * 4 + 0] = fill.r;
+    fillColors[i * 4 + 1] = fill.g;
+    fillColors[i * 4 + 2] = fill.b;
+    fillColors[i * 4 + 3] = Math.round((cfg.opacity ?? defaultOpacity) * 255);
+
+    const stroke = parseColor(cfg.strokeColor || cfg.fillColor || '#4e79a7');
+    lineColors[i * 3 + 0] = stroke.r;
+    lineColors[i * 3 + 1] = stroke.g;
+    lineColors[i * 3 + 2] = stroke.b;
+
+    if (cfg.strokeWidth !== undefined) lineWidths[i] = cfg.strokeWidth;
+    else if (geomType.includes('polygon')) lineWidths[i] = 1;
+    else if (geomType.includes('line')) lineWidths[i] = 3;
+    else lineWidths[i] = 2;
+
+    pointRadii[i] = cfg.radius ?? 4;
+  });
+
+  const featureFilter = new Float32Array(n).fill(1);
+  return { fillColors, lineColors, lineWidths, pointRadii, featureFilter };
+}

src/plugins/aequilibrae/styling.ts

@@ -0,0 +1,20 @@
+export type GeometryType = 'polygon' | 'line' | 'point';
+
+export interface LayerConfig {
+  table: string;
+  type: GeometryType;
+  fillColor?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  radius?: number;
+  opacity?: number;
+  zIndex?: number;
+}
+
+export interface VizDetails {
+  title: string;
+  description: string;
+  database: string;
+  view: 'table' | 'map' | '';
+  layers: { [key: string]: LayerConfig };
+}

src/plugins/aequilibrae/types.ts

@@ -0,0 +1,67 @@
+import SPL from 'spl.js';
+import YAML from 'yaml';
+import type { VizDetails, LayerConfig } from './types';
+import { getTableNames, getTableSchema, getRowCount, fetchGeoJSONFeatures } from './db';
+
+export async function initSql() {
+  const spl = await SPL();
+  return spl;
+}
+
+export async function openDb(spl: any, arrayBuffer: ArrayBuffer) {
+  return spl.db(arrayBuffer);
+}
+
+export async function parseYamlConfig(yamlText: string, subfolder: string | null): Promise<VizDetails> {
+  const config = YAML.parse(yamlText);
+  const dbFile = config.database || config.file;
+  if (!dbFile) throw new Error('No database field found in YAML config');
+  const databasePath = dbFile.startsWith('/') ? dbFile : subfolder ? `${subfolder}/${dbFile}` : dbFile;
+  return {
+    title: config.title || dbFile,
+    description: config.description || '',
+    database: databasePath,
+    view: config.view || '',
+    layers: config.layers || {},
+  };
+}
+
+export async function buildTables(db: any, layerConfigs: { [k: string]: LayerConfig }, allNames?: string[]) {
+  const names = allNames ?? (await getTableNames(db));
+  const select = Object.keys(layerConfigs).length
+    ? [...new Set(Object.values(layerConfigs).map((c) => c.table))]
+    : ['nodes', 'links', 'zones'];
+
+  const tables: Array<{ name: string; type: string; rowCount: number; columns: any[] }> = [];
+  let hasGeometry = false;
+
+  for (const name of names) {
+    if (!select.includes(name)) continue;
+    const schema = await getTableSchema(db, name);
+    const rowCount = await getRowCount(db, name);
+    const hasGeomCol = schema.some((c: any) => c.name.toLowerCase() === 'geometry');
+    if (hasGeomCol) hasGeometry = true;
+    tables.push({ name, type: 'table', rowCount, columns: schema });
+  }
+  return { tables, hasGeometry };
+}
+
+export async function buildGeoFeatures(db: any, tables: any[], layerConfigs: { [k: string]: LayerConfig }) {
+  const plain = JSON.parse(JSON.stringify(layerConfigs));
+  const layersToProcess = Object.keys(plain).length
+    ? Object.entries(plain)
+    : tables
+        .filter((t) => t.columns.some((c: any) => c.name.toLowerCase() === 'geometry'))
+        .map((t) => [t.name, { table: t.name, type: 'line' as const }]);
+
+  const features: any[] = [];
+  for (const [layerName, cfg] of layersToProcess as any) {
+    const tableName = (cfg as LayerConfig).table || layerName;
+    const table = tables.find((t) => t.name === tableName);
+    if (!table) continue;
+    if (!table.columns.some((c: any) => c.name.toLowerCase() === 'geometry')) continue;
+    const layerFeatures = await fetchGeoJSONFeatures(db, table, layerName, cfg);
+    features.push(...layerFeatures);
+  }
+  return features;
+}

src/plugins/aequilibrae/useAequilibrae.ts

@@ -0,0 +1 @@
+declare module 'spl.js';