From 699da7675c81ec726da42e66d8791a3862014456 Mon Sep 17 00:00:00 2001
From: Colin Slater <ctslater@uw.edu>
Date: Sun, 20 Oct 2024 22:28:55 -0700
Subject: [PATCH] Add front end for caching new collections.

---
 app/_components/AddCollectionSelectServer.js | 25 ++++++++
 app/_components/addCollectionSelect.js       | 67 ++++++++++++++++++++
 app/addcollection/page.js                    | 23 +++++++
 app/layout.js                                |  5 +-
 app/page.js                                  | 46 ++++++++------
 env.local.example                            |  1 +
 tailwind.config.js                           |  4 ++
 7 files changed, 151 insertions(+), 20 deletions(-)
 create mode 100644 app/_components/AddCollectionSelectServer.js
 create mode 100644 app/_components/addCollectionSelect.js
 create mode 100644 app/addcollection/page.js

diff --git a/app/_components/AddCollectionSelectServer.js b/app/_components/AddCollectionSelectServer.js
new file mode 100644
index 0000000..453dc68
--- /dev/null
+++ b/app/_components/AddCollectionSelectServer.js
@@ -0,0 +1,25 @@
+
+'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
+}
+
+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)}`)
+
+    return data.jobId
+
+}
diff --git a/app/_components/addCollectionSelect.js b/app/_components/addCollectionSelect.js
new file mode 100644
index 0000000..bb5bb64
--- /dev/null
+++ b/app/_components/addCollectionSelect.js
@@ -0,0 +1,67 @@
+'use client'
+
+import React from 'react';
+import { useState, useEffect } from 'react'
+
+import {putCollection, pollJob} from './AddCollectionSelectServer.js'
+
+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 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)
+        }
+    }
+    useEffect(() => {pollUpdates(jobId)}, [jobId])
+
+    const submitForm = async () => {
+        const jobId = await putCollection(repo, collectionName)
+        setJobId(jobId)
+        setStatusMessage("Started")
+
+    }
+
+    const bounceText = () => {
+        setStatusClasses("bg-sky-500/10")
+    }
+
+    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>
+        { /*
+            <button className="p-2 px-4 m-2 rounded-md text-white bg-sky-600" onClick={bounceText}>Bounce</button>
+            */ }
+        </div>
+    )
+}
+
diff --git a/app/addcollection/page.js b/app/addcollection/page.js
new file mode 100644
index 0000000..bcdd1cf
--- /dev/null
+++ b/app/addcollection/page.js
@@ -0,0 +1,23 @@
+
+export const dynamic = 'force-dynamic'
+
+import Link from 'next/link'
+
+import AddCollectionSelect from '@/components/addCollectionSelect'
+
+export default async function AddCollection() {
+
+
+    const repoUrls = JSON.parse(process.env.REPO_URLS ?? "[]")
+
+    /* REPO_URLS */
+    return (
+        <div>
+            <div className="text-m m-5"><Link href={"/"}>&lt;- Back to collections</Link></div>
+            <div className="text-2xl m-5">Add a Collection:</div>
+            <AddCollectionSelect repos={Object.keys(repoUrls)} />
+        </div>
+
+    )
+
+}
diff --git a/app/layout.js b/app/layout.js
index 820bbe2..643077a 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -20,8 +20,9 @@ export default function RootLayout({ children }) {
           <div className="bg-black text-rubin-blue text-3xl p-2">Rubin Plot Navigator</div>
           <ul className="flex flex-row p-2">
             <li className="p-2 px-3 text-xl"><a href="/plot-navigator">Plots</a></li>
-            <li className="p-2 px-3 text-xl"><a href="/plot-navigator/metrics">Metrics</a></li>
-            <li className="p-2 px-3 text-xl"><a href="/plot-navigator/bokeh">Bokeh</a></li>
+            {(process.env.PAGE_LINKS ?? "").split(',').map((page) =>
+                <li className="p-2 px-3 text-xl" key={page}><a href={`/plot-navigator/${page.toLowerCase()}`}>{page}</a></li>
+            )}
           </ul>
         </div>
         {children}
diff --git a/app/page.js b/app/page.js
index da959da..f29a6fe 100644
--- a/app/page.js
+++ b/app/page.js
@@ -31,24 +31,34 @@ export default async function Collections() {
 
     return (
         <div>
-            <h1 className="text-2xl m-5">Official Collections</h1>
-            <div className="m-5 border-2 rounded px-2 inline-block my-0" >
-                <table className="divide-y">
-                <thead>
-                    <tr>
-                        <td className={cellClassNames}>Collection</td>
-                        <td className={cellClassNames}>Repo</td>
-                        <td className={`text-right ${cellClassNames}`}>Last Updated</td>
-                    </tr>
-                </thead>
-                <tbody>
-                    {officialSummaryRefs.map((summary, n) =>
-                    (<tr key={n}><td className={cellClassNames}><Link href={`/collection/${encodeURIComponent(summary.repo)}/${encodeURIComponent(summary.collection)}`}>{summary.collection}</Link></td>
-                         <td className={`${cellClassNames}`}>{summary.repo}</td>
-                         <td className={`text-right ${cellClassNames}`}>{summary.lastModified.toDateString()}</td>
-                        </tr>))}
-                </tbody>
-                </table>
+            <div className="m-5 inline-block">
+                <div className="flex flex-row items-end">
+                    <div className="">
+                        <h1 className="text-2xl py-4">Official Collections</h1>
+                    </div>
+                    <div className="grow text-right">
+                            <div className="py-4"><Link className="p-2 px-4 m-2 rounded-md text-white bg-sky-600" href="/addcollection">Add Collection</Link></div>
+                    </div>
+                </div>
+                <div className="clear-both"></div>
+                <div className="border-2 rounded px-2 inline-block my-0 " >
+                    <table className="divide-y">
+                    <thead>
+                        <tr>
+                            <td className={cellClassNames}>Collection</td>
+                            <td className={cellClassNames}>Repo</td>
+                            <td className={`text-right ${cellClassNames}`}>Last Updated</td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {officialSummaryRefs.map((summary, n) =>
+                        (<tr key={n}><td className={cellClassNames}><Link href={`/collection/${encodeURIComponent(summary.repo)}/${encodeURIComponent(summary.collection)}`}>{summary.collection}</Link></td>
+                             <td className={`${cellClassNames}`}>{summary.repo}</td>
+                             <td className={`text-right ${cellClassNames}`}>{summary.lastModified.toDateString()}</td>
+                            </tr>))}
+                    </tbody>
+                    </table>
+                </div>
             </div>
 
             <h1 className="text-2xl m-5">User Collections</h1>
diff --git a/env.local.example b/env.local.example
index 6636405..4cbefce 100644
--- a/env.local.example
+++ b/env.local.example
@@ -3,5 +3,6 @@ BASE_URL=
 BUTLER_URL=
 BUCKET_NAME=
 BUCKET_URL=
+PAGE_LINKS=
 S3_KEY=
 S3_SECRET=
diff --git a/tailwind.config.js b/tailwind.config.js
index c3c864f..10abca4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,10 @@ module.exports = {
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  safelist: [
+      'duration-1000',
+      'bg-sky-500/10',
+  ],
   theme: {
     extend: {
       colors: {