SP-2630: Improve plot-navigator navigation UI

app/.git-blame-ignore-revs

@@ -0,0 +1 @@
+3f2b7554ef907c54007dd51392968fd396b8f972

app/_components/AddCollectionSelectServer.js

@@ -1,25 +1,23 @@
-
-'use server'
+"use server";
 
 export async function pollJob(jobId) {
-
-    console.log(`pollJob ${jobId}`)
-    let res = await fetch(`http://production-tools/plot-navigator/cache/job/${jobId}`)
-    let data = await res.json()
-    console.log(res.json())
-    return data
+  console.log(`pollJob ${jobId}`);
+  let res = await fetch(
+    `http://production-tools/plot-navigator/cache/job/${jobId}`,
+  );
+  let data = await res.json();
+  console.log(res.json());
+  return data;
 }
 
 export async function putCollection(repo, collectionName) {
+  let res = await fetch("http://production-tools/plot-navigator/cache/", {
+    method: "PUT",
+    body: JSON.stringify({ repo: repo, collection: collectionName }),
+    headers: { "Content-Type": "application/json" },
+  });
+  let data = await res.json();
+  console.log(`putCollection ${JSON.stringify(data)}`);
 
-    let res = await fetch("http://production-tools/plot-navigator/cache/",
-        {method: "PUT",
-         body: JSON.stringify({repo: repo, collection: collectionName}),
-         headers: {"Content-Type": "application/json"}}
-    )
-    let data = await res.json()
-    console.log(`putCollection ${JSON.stringify(data)}`)
-
-    return data.jobId
-
+  return data.jobId;
 }

app/_components/TabNav.js

@@ -1,40 +1,39 @@
-'use client'
+"use client";
 
-import React from 'react'
-import { useState } from 'react'
+import React from "react";
+import { useState } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 
-
-export default function TabNav({panes}) {
-    const searchParams = useSearchParams();
-
-    const [currentPane, setCurrentPane] = useState(searchParams.get("t") || 0)
-
-
-    const buttonClass = "p-2 border-t-2 border-x-2 float-left w-48 text-center hover:underline hover:cursor-pointer mx-2"
-    const buttons = panes.map((pane, n) =>  (
-        <Link replace scroll={false} key={n} href={`?t=${n}`} onClick={() => setCurrentPane(n)}>
-            <div className={currentPane == n ? buttonClass + " font-bold" : buttonClass} >
-                {pane.title}
-            </div>
-        </Link>
-    ))
-
-    return (
-        <div className="p-4">
-            <div className="flow-root">
-                {buttons}
-            </div>
-            <div className="border-2 p-2 inline-block">
-                {panes[currentPane].content}
-            </div>
-        </div>
-
-    )
-
-
+export default function TabNav({ panes }) {
+  const searchParams = useSearchParams();
+
+  const [currentPane, setCurrentPane] = useState(searchParams.get("t") || 0);
+
+  const buttonClass =
+    "p-2 border-t-2 border-x-2 float-left w-48 text-center hover:underline hover:cursor-pointer mx-2";
+  const buttons = panes.map((pane, n) => (
+    <Link
+      replace
+      scroll={false}
+      key={n}
+      href={`?t=${n}`}
+      onClick={() => setCurrentPane(n)}
+    >
+      <div
+        className={currentPane == n ? buttonClass + " font-bold" : buttonClass}
+      >
+        {pane.title}
+      </div>
+    </Link>
+  ));
+
+  return (
+    <div className="p-4">
+      <div className="flow-root">{buttons}</div>
+      <div className="border-2 p-2 inline-block">
+        {panes[currentPane].content}
+      </div>
+    </div>
+  );
 }
-
-
-

app/_components/addCollectionSelect.js

@@ -1,68 +1,88 @@
-'use client'
+"use client";
 
-import React from 'react';
-import { useState, useEffect } from 'react'
+import React from "react";
+import { useState, useEffect } from "react";
 
-import {putCollection, pollJob} from './AddCollectionSelectServer.js'
+import { putCollection, pollJob } from "./AddCollectionSelectServer.js";
 
-export default function AddCollectionSelect({repos}) {
+export default function AddCollectionSelect({ repos }) {
+  const [repo, setRepo] = useState(repos[0]);
+  const [collectionName, setCollectionName] = useState("");
+  const [jobId, setJobId] = useState("");
+  const [statusMessage, setStatusMessage] = useState("");
+  const [statusClasses, setStatusClasses] = useState("");
+  const [resultMessage, setResultMessage] = useState("");
 
-    const [repo, setRepo] = useState(repos[0]);
-    const [collectionName, setCollectionName] = useState("");
-    const [jobId, setJobId] = useState("");
-    const [statusMessage, setStatusMessage] = useState("");
-    const [statusClasses, setStatusClasses] = useState("");
-    const [resultMessage, setResultMessage] = useState("");
-
-    const pollUpdates = async () => {
-        if(jobId == "") {
-            return
-        }
-        await new Promise(r => setTimeout(r, 5000));
-        console.log(`Polling ${jobId}`)
-        const res = await pollJob(jobId)
-        setStatusMessage(res.status.replace("_", " "))
-        bounceText()
-        setStatusClasses("bg-sky-500/10")
-        if(res.status == "in_progress") {
-            await pollUpdates()
-        } else if(res.status == "complete") {
-            setResultMessage(res.result)
-        }
+  const pollUpdates = async () => {
+    if (jobId == "") {
+      return;
     }
-    useEffect(() => {pollUpdates(jobId)}, [jobId])
-
-    const submitForm = async () => {
-        const jobId = await putCollection(repo, collectionName)
-        setJobId(jobId)
-        setStatusMessage("Started")
-        setResultMessage("")
-
+    await new Promise((r) => setTimeout(r, 5000));
+    console.log(`Polling ${jobId}`);
+    const res = await pollJob(jobId);
+    setStatusMessage(res.status.replace("_", " "));
+    bounceText();
+    setStatusClasses("bg-sky-500/10");
+    if (res.status == "in_progress") {
+      await pollUpdates();
+    } else if (res.status == "complete") {
+      setResultMessage(res.result);
     }
+  };
+  useEffect(() => {
+    pollUpdates(jobId);
+  }, [jobId]);
 
-    const bounceText = () => {
-        setStatusClasses("bg-sky-500/10")
-    }
+  const submitForm = async () => {
+    const jobId = await putCollection(repo, collectionName);
+    setJobId(jobId);
+    setStatusMessage("Started");
+    setResultMessage("");
+  };
+
+  const bounceText = () => {
+    setStatusClasses("bg-sky-500/10");
+  };
 
-    useEffect(() => {setStatusClasses("duration-1000")}, [statusClasses])
+  useEffect(() => {
+    setStatusClasses("duration-1000");
+  }, [statusClasses]);
 
-    return (
-        <div className="p-2">
-            <select className="p-1 m-2" value={repo} onChange={(e) => {
-                  setRepo(e.target.value);
-            }}>
-                {repos.map(
-                    (repo) => <option value={repo} key={repo}>{repo}</option>
-                )}
-            </select>
-            <input className="m-2 border-2" type="text" size={40} value={collectionName} onChange={(e) => setCollectionName(e.target.value)} />
-            <button className="p-2 px-4 m-2 rounded-md text-white bg-sky-600" onClick={submitForm}>Add</button>
-            <div className={`m-2 p-2 px-4 inline-block ${statusClasses}`}>{statusMessage}</div>
-            <div className={`m-2 p-2 px-4 inline-block `}>{resultMessage}</div>
-        { /*
+  return (
+    <div className="p-2">
+      <select
+        className="p-1 m-2"
+        value={repo}
+        onChange={(e) => {
+          setRepo(e.target.value);
+        }}
+      >
+        {repos.map((repo) => (
+          <option value={repo} key={repo}>
+            {repo}
+          </option>
+        ))}
+      </select>
+      <input
+        className="m-2 border-2"
+        type="text"
+        size={40}
+        value={collectionName}
+        onChange={(e) => setCollectionName(e.target.value)}
+      />
+      <button
+        className="p-2 px-4 m-2 rounded-md text-white bg-sky-600"
+        onClick={submitForm}
+      >
+        Add
+      </button>
+      <div className={`m-2 p-2 px-4 inline-block ${statusClasses}`}>
+        {statusMessage}
+      </div>
+      <div className={`m-2 p-2 px-4 inline-block `}>{resultMessage}</div>
+      {/*
             <button className="p-2 px-4 m-2 rounded-md text-white bg-sky-600" onClick={bounceText}>Bounce</button>
-            */ }
-        </div>
-    )
+            */}
+    </div>
+  );
 }
-

app/_components/bandSelector.js

@@ -1,26 +1,32 @@
+"use client";
 
-'use client'
+import React from "react";
+import { useState } from "react";
 
-import React from 'react';
-import { useState } from 'react'
-
-export default function BandSelector({selectedBands, onBandUpdated}) {
-
-    const bandOrder = ['u', 'g', 'r', 'i', 'z', 'y']
-
-    return (
-        <div className="flex flex-row">
-            { bandOrder.map((band, n) =>
-                <label key={n}>
-                    <div className={"p-2 border-2 -ml-1 " + (n==0 ? "rounded-l-lg" : "") + (n== (bandOrder.length - 1) ? "rounded-r-lg" : "")}>
-                            <input type="checkbox" className="m-1"
-                                checked={selectedBands[band]}
-                            onChange={(event) => onBandUpdated(band, event.target.checked)} />
-                            {band}
-                    </div>
-                </label>
-            )}
-        </div>
-    )
+export default function BandSelector({ selectedBands, onBandUpdated }) {
+  const bandOrder = ["u", "g", "r", "i", "z", "y"];
 
+  return (
+    <div className="flex flex-row">
+      {bandOrder.map((band, n) => (
+        <label key={n}>
+          <div
+            className={
+              "p-2 border-2 -ml-1 " +
+              (n == 0 ? "rounded-l-lg" : "") +
+              (n == bandOrder.length - 1 ? "rounded-r-lg" : "")
+            }
+          >
+            <input
+              type="checkbox"
+              className="m-1"
+              checked={selectedBands[band]}
+              onChange={(event) => onBandUpdated(band, event.target.checked)}
+            />
+            {band}
+          </div>
+        </label>
+      ))}
+    </div>
+  );
 }

app/_components/dualPlotPager.js

@@ -3,8 +3,7 @@
 import React from "react";
 import { useState, useEffect } from "react";
 import BandSelector from "./bandSelector.js";
-import { DataIdSortFunc } from '@/lib/dataIdFuncs'
-
+import { DataIdSortFunc } from "@/lib/dataIdFuncs";
 
 /*
  * TODO:
@@ -52,19 +51,25 @@ export default function DualPlotPager({
     );
 
     const indexedEntries = uniqDataIds
-          .filter((dataId) => 'band' in dataId ? selectedBands[dataId.band] : true)
-          .map((dataId, n) => ({
-      dataId: dataId,
-      index: n,
-      plotA:
-        plotEntriesA[dataIdStringsA.findIndex((x) => x === JSON.stringify(dataId))]?.plot ??
-        null,
-      plotB:
-        plotEntriesB[dataIdStringsB.findIndex((x) => x === JSON.stringify(dataId))]?.plot ??
-        null,
-    }));
+      .filter((dataId) =>
+        "band" in dataId ? selectedBands[dataId.band] : true,
+      )
+      .map((dataId, n) => ({
+        dataId: dataId,
+        index: n,
+        plotA:
+          plotEntriesA[
+            dataIdStringsA.findIndex((x) => x === JSON.stringify(dataId))
+          ]?.plot ?? null,
+        plotB:
+          plotEntriesB[
+            dataIdStringsB.findIndex((x) => x === JSON.stringify(dataId))
+          ]?.plot ?? null,
+      }));
 
-    const sortedEntries = indexedEntries.sort((a,b) => DataIdSortFunc(a.dataId, b.dataId))
+    const sortedEntries = indexedEntries.sort((a, b) =>
+      DataIdSortFunc(a.dataId, b.dataId),
+    );
     return sortedEntries;
   };
 
@@ -185,12 +190,22 @@ export default function DualPlotPager({
         <div className="w-[35rem] p-1 m-0 font-bold">{collectionA}</div>
         <div className="w-[35rem] p-1 m-0 font-bold">{collectionB}</div>
       </div>
-      {plotEntriesA.length == 0 || plotEntriesB.length == 0 ?
-          <div className="flex flex-row justify-center">
-            <div className="w-[35rem] p-1 m-0 font-bold">{plotEntriesA.length == 0 ? "No plots of this type in this collection" : ""}</div>
-            <div className="w-[35rem] p-1 m-0 font-bold">{plotEntriesB.length == 0 ? "No plots of this type in this collection" : ""}</div>
+      {plotEntriesA.length == 0 || plotEntriesB.length == 0 ? (
+        <div className="flex flex-row justify-center">
+          <div className="w-[35rem] p-1 m-0 font-bold">
+            {plotEntriesA.length == 0
+              ? "No plots of this type in this collection"
+              : ""}
           </div>
-      : "" }
+          <div className="w-[35rem] p-1 m-0 font-bold">
+            {plotEntriesB.length == 0
+              ? "No plots of this type in this collection"
+              : ""}
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
       <div className="">
         {getSlice(currentPage).map((indexedEntry, n) => (
           <div key={n} className="flex flex-row justify-center">