Add lightbox for plots.

lsst-dm · Jul 2, 2024 · 945eb7a · 945eb7a
1 parent 2c98f1e
commit 945eb7a
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 6 deletions.
diff --git a/app/plotDisplay.js b/app/plotDisplay.js
@@ -33,9 +33,9 @@ export default async function PlotDisplay({plotEntry, showDataId = true}) {
     }
 
     return (
-        <div className="w-96 p-5 m-5 float-left">
+        <div>
             { showDataId ? <div className="text-1xl my-5">{dataId}</div> : "" }
-            <a href={await getUrl(uuid)}><img src={await getUrl(uuid)} /></a>
+            <img src={await getUrl(uuid)} />
         </div>
 
     )

diff --git a/app/plotPager.js b/app/plotPager.js
@@ -8,6 +8,8 @@ export default function PlotPager({plotEntries, plotsPerPage = 10}) {
 
 
     const [currentPage, setCurrentPage] = useState(1)
+    const [inLightbox, setInLightbox] = useState(false)
+    const [displayedEntry, setDisplayedEntry] = useState(0)
 
     const totalPages = Math.ceil(plotEntries.length/plotsPerPage)
 
@@ -24,6 +26,34 @@ export default function PlotPager({plotEntries, plotsPerPage = 10}) {
         }
     }
 
+    const showLightboxEntry = (entry)  => {
+        console.log("showLightboxEntry")
+        console.log(entry)
+        setDisplayedEntry(entry)
+        setInLightbox(true)
+    }
+
+    const exitLightbox = ()  => {
+        setInLightbox(false)
+    }
+    const doNothing = (e)  => {
+        e.stopPropagation();
+    }
+
+    const advanceLeft = (e) => {
+        e.stopPropagation();
+        if(displayedEntry > 0) {
+            setDisplayedEntry(displayedEntry - 1)
+        }
+    }
+
+    const advanceRight = (e) => {
+        e.stopPropagation();
+        if(displayedEntry < (plotEntries.length  - 1)) {
+            setDisplayedEntry(displayedEntry + 1)
+        }
+    }
+
     return (
         <div>
             <div className="flex flex-row justify-center">
@@ -38,8 +68,32 @@ export default function PlotPager({plotEntries, plotsPerPage = 10}) {
                     </div>
             </div>
             {plotEntries.slice((currentPage - 1) * plotsPerPage, currentPage * plotsPerPage).map((plotEntry, n) =>
-                plotEntry
+                <div key={n} className="w-96 p-5 m-5 float-left" onClick={() => showLightboxEntry(n)}>
+                    {plotEntry}
+                </div>
             )}
+            { inLightbox ?
+                <div className="fixed top-0 left-0 w-screen h-screen bg-slate-500/75" onClick={exitLightbox}>
+                    <div className="h-32">Top</div>
+                    <div className="w-1/4 float-left h-1">
+                        {displayedEntry > 0 ?
+                            <div className="float-right flex items-center justify-center m-8 h-64 w-16 bg-indigo-100 hover:bg-indigo-600 hover:cursor-pointer" onClick={advanceLeft}>
+                                <div>&lt;&lt;</div>
+                            </div>
+                        : "" }
+                    </div>
+                    <div className="w-1/2 float-left" onClick={doNothing}>
+                        {plotEntries[displayedEntry]}
+                    </div>
+                    <div className="w-1/4 float-left">
+                        {displayedEntry < (plotEntries.length  - 1) ?
+                            <div className="flex items-center justify-center m-8 h-64 w-16 bg-indigo-100 hover:bg-indigo-600 hover:cursor-pointer" onClick={advanceRight}>
+                                <div>&gt;&gt;</div>
+                            </div>
+                        : "" }
+                    </div>
+                </div>
+            : ""}
         </div>
     )
 

diff --git a/app/tract/[tract]/[...path]/page.js b/app/tract/[tract]/[...path]/page.js
@@ -47,7 +47,6 @@ export default async function Collection({params, searchParams}) {
         return matchingNames.map(name => plotEntries[name]).flat()
     }
 
-
     return (
         <div>
             <div className="text-m m-5"><Link href={`/collection/${collection}`}>&lt;- Back to collection</Link></div>
@@ -57,8 +56,8 @@ export default async function Collection({params, searchParams}) {
                 {plotGroups.map( (plotGroup, n) =>
                     <div key={n}>
                         <div className="m-8 text-xl font-medium border-b-2 border-black">{plotGroup}_*</div>
-                    <PlotPager plotEntries={findMatchingPlots(plotEntries, plotGroup).map((entry, n) =>
-                            <PlotDisplay key={n} plotEntry={entry} showDataId={false} />)} plotsPerPage={6} />
+                    <PlotPager plotsPerPage={6} plotEntries={findMatchingPlots(plotEntries, plotGroup).map((entry, n) =>
+                            <PlotDisplay key={n} plotEntry={entry} showDataId={false} />)}  />
                         <div className="clear-both"></div>
                     </div>
                 )}