implement DataSource

ui/src/App.tsx

@@ -1,29 +1,27 @@
 import { For, Component } from "solid-js";
-import { queryToArray } from "./sql";
+import { queryToIds } from "./sql";
 import "./App.css";
 import { Segment, fetchSegments } from "./components/Segment";
-import { z } from "zod";
 
 const App: Component = () => {
   const segments = () => {
-    const segmentIds = z.array(z.number()).parse(
-      queryToArray(
-        `
+    const segmentIds = queryToIds(
+      `
       SELECT DISTINCT s.id
       FROM WordAnnotations AS a
       JOIN Words AS w ON a.word_id = w.id
       JOIN Segments AS s ON w.segment_id = s.id
       WHERE a.annotation_type_id = (SELECT id from AnnotationTypes WHERE name = 'switch');
       `,
-      ),
     );
     return fetchSegments(segmentIds);
   };
 
-  // <input onInput={(e) => setQuery(e.target.value)} />
   return (
     <div class="app">
-      <For each={segments()}>{(s) => <Segment data={s} />}</For>
+      <For each={segments()}>
+        {(s) => <Segment data={s} selected={false} />}
+      </For>
     </div>
   );
 };

ui/src/components/DataSource.tsx

@@ -1,11 +1,10 @@
-import { Component, Resource } from "solid-js";
+import { Component, For } from "solid-js";
 
-import { Database } from "sql.js";
 import "./App.css";
 
-import { SegmentData } from "./Segment";
 import { z } from "zod";
-import { db, placeholders, queryToMaps } from "../sql";
+import { placeholders, queryToArray, queryToIds, queryToMaps } from "../sql";
+import { Segment, fetchSegments } from "./Segment";
 
 export const DataSourceData = z.object({
   id: z.string(),
@@ -17,7 +16,6 @@ export type DataSourceData = z.infer<typeof DataSourceData>;
 function fetchDataSources(dataSourceIds: number[]) {
   return z.array(DataSourceData).parse(
     queryToMaps(
-      db,
       `
     SELECT id, name, url
     FROM DataSources
@@ -34,9 +32,16 @@ function fetchDataSources(dataSourceIds: number[]) {
   );
 }
 
-// export const DataSource: Component<{
-//   data: DataSourceData;
-//   selectedSegmentId: number;
-// }> = (props) => {
-//   const { data, selectedSegmentId } = props;
-// };
+export const DataSource: Component<{
+  data: DataSourceData;
+  selectedSegmentId: number;
+}> = (props) => {
+  const { data, selectedSegmentId } = props;
+  const segmentIds = queryToIds(`
+    SELECT id
+    FROM Segments
+    WHERE data_source_id = ?
+  `, data.id);
+  const segments = fetchSegments(segmentIds);
+  return <For each={segments}>{(s) => <Segment data={s} selected={s.id === selectedSegmentId} />}</For>
+};

ui/src/components/Segment.tsx

@@ -59,10 +59,19 @@ export function fetchSegments(segmentIds: number[]): SegmentData[] {
   return Array.from(segments.values());
 }
 
-export const Segment: Component<{ data: SegmentData }> = (props) => {
+export const Segment: Component<{ data: SegmentData; selected: boolean }> = (
+  props,
+) => {
+  const { data, selected } = props;
   return (
-    <div class="segment card">
-      <For each={props.data.words}>{(t) => <Word data={t} />}</For>
+    <div
+      classList={{
+        card: true,
+        segment: true,
+        selected,
+      }}
+    >
+      <For each={data.words}>{(t) => <Word data={t} />}</For>
     </div>
   );
 };

ui/src/sql.tsx

@@ -2,6 +2,7 @@ import { createResource } from "solid-js";
 import initSqlJs from "sql.js";
 import dbUrl from "./assets/escoco.db?url";
 import sqlJsWasm from "../node_modules/sql.js/dist/sql-wasm.wasm?url";
+import { z } from "zod";
 
 export const [db] = createResource(async () => {
   const sqlPromise = initSqlJs({ locateFile: () => sqlJsWasm });
@@ -22,6 +23,10 @@ export function queryToArray(query: string, ...params: any[]) {
   return connection.exec(query, params)[0].values.flat();
 }
 
+export function queryToIds(query: string, ...params: any[]) {
+  return z.array(z.number()).parse(queryToArray(query, ...params));
+}
+
 export function queryToMaps(
   query: string,
   ...params: any[]