Update to new API

js-client/package.json

@@ -20,8 +20,6 @@
     "@shoelace-style/shoelace": "^2.3.0",
     "cytoscape": "^3.23.0",
     "cytoscape-dagre": "^2.5.0",
-    "idb": "^7.1.1",
-    "idb-keyval": "^6.2.0",
     "lit": "^2.6.1"
   },
   "devDependencies": {

js-client/src/api.ts

@@ -0,0 +1,50 @@
+const API_URL = __API_URL__;
+
+export interface Pkg {
+  pname: string;
+  outputPath: string;
+}
+
+export interface Cursor {
+  direction: number;
+  row_id: string;
+}
+
+export interface PackagesResponse {
+  new_cursor: Cursor;
+  packages: Pkg[];
+}
+
+export async function getPackages({
+  search = "",
+  limit = 10,
+  cursor = null,
+}): Promise<PackagesResponse> {
+  const response = await fetch(`${API_URL}/packages`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      search_predicate: search,
+      limit,
+      cursor,
+    }),
+  });
+  const queryResult = await response.json();
+  return queryResult;
+}
+
+export async function getGraph(pkgName: string) {
+  const response = await fetch(`${API_URL}/gremlin`, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      query: `g.V().filter{it.get().value('pname').matches('${pkgName}')}.repeat(outE().otherV().simplePath()).times(2).path().by('pname').by(label)`,
+    }),
+  });
+  return await response.json();
+}

js-client/src/app-main.ts

@@ -6,24 +6,10 @@ import "./nix-search.ts";
 
 import dagre from "cytoscape-dagre";
 import cytoscape from "cytoscape";
+import { getGraph } from "./api";
 
-const API_URL = __API_URL__;
 cytoscape.use(dagre);
 
-async function getGraph(pkgName: string) {
-  const response = await fetch(`${API_URL}/gremlin`, {
-    method: "POST",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      query: `g.V().filter{it.get().value('pname').matches('${pkgName}')}.repeat(outE().otherV().simplePath()).until(__.not(outE().simplePath())).path().by('pname').by(label)`,
-    }),
-  });
-  return await response.json();
-}
-
 function renderCyGraph(graphData: any, container: HTMLElement) {
   console.log(graphData);
   const data = graphData.cyto["graph-data"];
@@ -75,7 +61,7 @@ export class AppMain extends LitElement {
       display: grid;
       gap: 10px;
       padding: 2rem;
-      grid-template-columns: 200px 1fr;
+      grid-template-columns: min(25%, 300px) 1fr;
     }
     #cy-container {
       border: 1px solid var(--sl-panel-border-color);

js-client/src/nix-search.ts

@@ -8,51 +8,50 @@ import "@shoelace-style/shoelace/dist/components/input/input.js";
 import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
 import "@shoelace-style/shoelace/dist/components/alert/alert.js";
 import "@shoelace-style/shoelace/dist/components/icon/icon.js";
-
-// This is the type of the message event send to the web worker
-// We can only send message events, see
-// https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent
-// We add a type to filter between events
-interface Operation {
-  // TODO only search is used
-  type: "search" | "graph";
-  data: string[];
-}
+import { classMap } from "lit/directives/class-map.js";
+import { getPackages } from "./api";
+import type { Cursor, Pkg } from "./api";
 
 export interface ClickItemPayload {
   name: string;
 }
 
 type EventInput = Event & { target: HTMLInputElement };
 
+// TODO Add pagination
 @customElement("nix-search")
 export class NixSearch extends LitElement {
-  worker = new Worker(new URL("./packages", import.meta.url), {
-    type: "module",
-  });
+  @state()
+  pkgs: Pkg[] = [];
 
   @state()
-  pkgs: string[] = [];
+  cursor?: Cursor;
 
   @state()
   loading = true;
 
+  @state()
+  selectedPkg?: string;
+
+  searchInput = "";
+
   constructor() {
     super();
-    this.worker.addEventListener("message", (msg: MessageEvent<Operation>) => {
-      const { type, data } = msg.data;
-      if (type === "search") {
-        this.pkgs = data;
-        this.loading = false;
-      }
-    });
     // trigger a request to get an initial list of packages displayed
-    this.worker.postMessage({ type: "search", data: "" });
+    this.getPackages();
+  }
+
+  async getPackages(search = "", limit = 10) {
+    const { packages, new_cursor } = await getPackages({ search, limit });
+    this.pkgs = packages;
+    this.cursor = new_cursor;
+    this.loading = false;
   }
 
   updateSearchQuery(ev: EventInput) {
     this.loading = true;
-    this.worker.postMessage({ type: "search", data: ev.target.value });
+    this.searchInput = ev.target.value;
+    this.getPackages(this.searchInput);
   }
 
   render() {
@@ -80,10 +79,13 @@ export class NixSearch extends LitElement {
     return html`
       <sl-menu>
         ${this.pkgs.map(
-          (pkg) =>
+          ({ pname }) =>
             html`
-              <sl-menu-item @click=${this.clickPackageHandler} value=${pkg}
-                >${pkg}</sl-menu-item
+              <sl-menu-item
+                @click=${this.clickPackageHandler}
+                value=${pname}
+                class=${classMap({ selected: this.selectedPkg === pname })}
+                >${pname}</sl-menu-item
               >
             `
         )}
@@ -93,6 +95,8 @@ export class NixSearch extends LitElement {
 
   private clickPackageHandler(ev: EventInput) {
     const name = ev.target.value.trim();
+    this.selectedPkg = name;
+
     if (name) {
       const options = {
         detail: { name },
@@ -111,6 +115,9 @@ export class NixSearch extends LitElement {
     sl-input {
       margin-bottom: 1em;
     }
+    .selected {
+      background-color: var(--sl-color-primary-200);
+    }
   `;
 }