Jp/UI

src/components/LandingHome.tsx

@@ -4,7 +4,7 @@ THREE.Cache.enabled = true;
 import { DataStores } from '@/components/zarr/DataStores'
 import { ZarrDataset, GetStore } from '@/components/zarr/ZarrLoaderLRU';
 import { useState } from 'react';
-
+import VariableScroller from './ui/VariableScroller';
 import { useEffect, useMemo } from 'react';
 import { Analysis, PlotArea, Plot } from '@/components/plots';
 import { GetColorMapTexture } from '@/components/textures';
@@ -13,7 +13,6 @@ import { Metadata, ShowAnalysis, Loading } from '@/components/ui';
 import { useGlobalStore } from '@/utils/GlobalStates';
 import { useShallow } from 'zustand/shallow';
 import { PaneStore } from '@/components/zarr/PaneStore';
-import WelcomeText from '@/components/ui/WelcomeText';
 import useCSSVariable from '@/components/ui/useCSSVariable';
 import { GetTitleDescription } from '@/components/zarr/GetMetadata';
 
@@ -82,17 +81,8 @@ export function LandingHome() {
     {canvasWidth > 10 && <MiddleSlider canvasWidth={canvasWidth} setCanvasWidth={setCanvasWidth}/>}
     <Loading showLoading={showLoading} />
     {canvasWidth > 10 && <Analysis values={analysisObj.values} variables={variables} />}
-    {variable === "Default" ? (
-        <WelcomeText
-          title={title ?? ''}
-          description={description ?? ''}
-          variablesPromise={fullmetadata}
-          fogColor={fogColor}
-          textColor={textColor}
-        />
-      ) : (
-        <Plot values={plotObj} setShowLoading={setShowLoading} />
-      )}
+    {variable === "Default" && <VariableScroller vars={variables} zarrDS={ZarrDS}/>}
+    {variable != "Default" && <Plot values={plotObj} setShowLoading={setShowLoading} />}
     {metadata && <Metadata data={metadata} /> }
     {timeSeries.length > 2 && <PlotArea />}
     </>

src/components/ui/Navbar.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-import { logoSeasFire } from "@/assets/index";
 import { AboutButton } from "@/components/ui";
 import ThemeSwitch  from "@/components/ui/ThemeSwitch";
 import logo from "@/app/logo.png"
@@ -46,7 +45,7 @@ const Navbar = () => {
             <DropdownMenuContent className="w-56" align="start">
               <DropdownMenuLabel>My Account</DropdownMenuLabel>
               <DropdownMenuGroup>
-                <DropdownMenuItem>
+                <DropdownMenuItem >
                   Profile
                   <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
                 </DropdownMenuItem>

src/components/ui/OptionsMenu.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+
+const OptionsMenu = () => {
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default OptionsMenu

src/components/ui/VariableScroller.tsx

@@ -0,0 +1,116 @@
+import React, {useState, useEffect, useMemo, useRef} from 'react'
+import { useGlobalStore } from '@/utils/GlobalStates'
+import { GetStore, ZarrDataset } from '../zarr/ZarrLoaderLRU';
+import { GetZarrMetadata } from '../zarr/GetMetadata';
+import './css/VariableScroller.css'
+
+const formatArray = (value: string | number[]): string => {
+    if (typeof value === 'string') return value
+    return Array.isArray(value) ? value.join(', ') : String(value)
+  }
+
+const MetaDataInfo = ({meta} : {meta : any}) =>{ 
+    const [show, setShow] = useState<boolean>(false)
+
+    const setVariable = useGlobalStore(state=> state.setVariable)
+    return(
+        <div className='meta-container'>
+            <div className='meta-info'>
+                <b>Long Name:</b> {`${meta.long_name}`}<br/>
+                <div 
+                    style={{
+                        maxHeight: show ? '500px' : '0px',
+                        overflow: 'hidden',
+                        transition: '0.3s'
+                    }}
+                >
+
+                    <b>Shape:</b> {`[${formatArray(meta.shape)}]`}<br/>
+                    <b>dType: </b> {`${meta.dtype}`}<br/>
+                    <b>Total Size: </b>{`${meta.totalSizeFormatted}`}<br/> 
+                    {/* Need to conditionally color the above line if totalsize is greater than specific threshold. Also add an info when hovering the red text to explain the issue*/}
+                    <b>Chunk Shape:</b> {`[${formatArray(meta.chunks)}]`}<br/>
+                    <b>Chunk Count:</b> {`${meta.chunkCount}`}<br/>
+                    <b>Chunk Size:</b> {`${meta.chunkSizeFormatted}`}
+                </div>
+                <div className='meta-hidden'
+                    style={{display:'flex', justifyContent:'center'}}
+                    onClick={()=>setShow(x=>!x)}
+                >{show ? 'Λ' : 'V' }</div>
+            </div>
+            <button onClick={()=>setVariable(meta.name)}><b>Plot</b></button>
+        </div>
+    )
+}
+
+
+const VariableScroller = ({vars, zarrDS} : {vars : Promise<string[]>, zarrDS : ZarrDataset}) => {
+  const [variables, setVariables] = useState<string[]>([])
+  const [selectedIndex, setSelectedIndex] = useState(Math.floor(variables.length / 2));
+  const [variable, setVariable] = useState<string>("Default")
+  const [meta, setMeta] = useState<any>(null) //This is the individual metadata for the element
+  const [zMeta, setZMeta] = useState<any>(null) //This is all the metadata. 
+
+  const handleScroll = (event: any) => {
+    const newIndex =
+      selectedIndex + (event.deltaY > 0 ? 1 : -1);
+    if (newIndex >= 0 && newIndex < variables.length) {
+      setSelectedIndex(newIndex);
+    }
+  };
+
+  useEffect(()=>{ //Update variable onScroll
+    if (variables){
+        setVariable(variables[selectedIndex])
+    }
+  },[selectedIndex, variables])
+
+  useEffect(()=>{
+    vars.then(e=>setVariables(e))
+  },[vars])
+
+  useEffect(()=>{
+    if(zarrDS){
+        //@ts-expect-error
+        GetZarrMetadata(zarrDS.groupStore).then(e=>{setZMeta(e)}) //groupStore is private but I really don't care
+    }
+  },[zarrDS])
+
+  useEffect(()=>{
+    if(zMeta){
+        const relevant = zMeta.find((e : any) => e.name === variable)
+        setMeta(relevant)
+    }
+  },[variable])
+
+  return (
+    <div className="scroll-container" onScroll={handleScroll} onWheel={handleScroll}>
+        {meta && <MetaDataInfo meta={meta} />}
+        <div className='scroll-element' 
+            style={{
+                transform: `translateY(calc(50% + ${-selectedIndex * 82}px))` //Need to figure out why it's 82 pixels
+            }}
+        >
+            {variables.map((variable, index) => {
+                const distance = Math.abs(selectedIndex - index);
+                return (
+                <div
+                    key={index}
+                    className="scroll-item"
+                    style={{
+                    opacity: 1 - distance * 0.3,
+                    fontWeight: selectedIndex === index ? "bold" : "normal",
+                    }}
+                    onClick={(()=>setSelectedIndex(index))}
+                >
+                    {variable}
+                </div>
+                );
+            })}
+       </div>
+    </div>
+  );
+};
+
+
+export default VariableScroller

src/components/ui/css/VariableScroller.css

@@ -0,0 +1,66 @@
+.scroll-container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.scroll-item {
+  transition: opacity 0.3s, transform 0.3s;
+  font-size: 48px;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.scroll-element{
+    transition: transform 0.2s;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.meta-container{
+    text-align: left;
+    position: absolute;
+    min-width: 400px;
+    max-width: 500px;
+    left: 70%;
+    top: 50%;
+    z-index: 3;
+    font-size: 18px;
+    border-radius: 10px;
+    padding: 10px;
+    background-color: rgba(160, 160, 160, 0.11);
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.144);
+}
+
+.meta-container button{
+    margin-top: 10px;
+    width: 100%;
+    background-color: rgba(170, 217, 255, 0.171);
+    border-radius: 6px;
+    cursor: pointer;
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.342);
+}
+
+.meta-hidden{
+    display: flex;
+    justify-content: center;
+    transition: 0.3s;
+    border-radius: 20px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.199);
+    cursor: pointer;
+    font-size: 10px;
+    margin-top: 5px;
+}

src/components/zarr/GetMetadata.tsx

@@ -46,9 +46,9 @@ export async function GetZarrMetadata(groupStore: Promise<zarr.Group<zarr.FetchS
     const variables: ZarrMetadata[] = [];
 
     for (const item of contents) {
+
         if (item.path && item.path.length > 1 && item.kind === 'array') {
             const array = await zarr.open(group.resolve(item.path.substring(1)), {kind: "array"});
-
             const dtypeSize = getDtypeSize(array.dtype);
             const totalElements = calculateTotalElements(array.shape);
             const chunkCount = calculateChunkCount(array.shape, array.chunks);
@@ -59,6 +59,8 @@ export async function GetZarrMetadata(groupStore: Promise<zarr.Group<zarr.FetchS
 
             variables.push({
                 name: item.path.substring(1),
+                //@ts-expect-error It doesn't know this exists
+                long_name: array.attrs.long_name,
                 shape: array.shape,
                 chunks: array.chunks,
                 dtype: array.dtype,