extended docs

src/app/ClientRoot.tsx

@@ -5,14 +5,28 @@ import MobileUIHider from "@/components/ui/MobileUIHider";
 import { Footer } from "@/components/ui";
 import { BrowZarrPopover } from "./BrowZarrPopover";
 import { VersionSelector } from "@/components/ui";
+import Link from "next/link";
+import ThemeSwitch from "@/components/ui/ThemeSwitch";
+import HomeButton from "@/components/ui/HomeButton";
+import GithubButton from "@/components/ui/GithubButton";
 
 export default function ClientRoot({ children }: { children: React.ReactNode }) {
 	return (
 		<ThemeProvider attribute="data-theme" enableSystem defaultTheme="system" disableTransitionOnChange>
 			<MobileUIHider />
-			<div className="fixed top-2 right-2 z-50 flex items-center gap-0">
-				<VersionSelector />
+			{/* left menu */}
+			<div className="fixed top-2 left-2 z-50 flex items-center gap-2">
+				<HomeButton />
 				<BrowZarrPopover />
+				<Link href="/docs" className="text-sm underline sm:inline-block" target="_blank" rel="noopener noreferrer">
+					docs
+				</Link>
+			</div>
+			{/* right menu */}
+			<div className="fixed top-2 right-4 z-50 flex items-center gap-2">
+				<VersionSelector />
+				<GithubButton />
+				<ThemeSwitch />
 			</div>
 			<main className="min-h-screen">
 				{children}

src/app/docs/page.tsx

@@ -0,0 +1,97 @@
+import Link from "next/link";
+
+export const metadata = {
+  title: "browzarr.io/docs",
+  description: "Tutorial and documentation for Browzarr",
+};
+
+import { FaStar, FaThumbtack, FaGithub } from "react-icons/fa";
+import { IoCloseCircleSharp, IoImage } from "react-icons/io5";
+import { RxReset } from "react-icons/rx";
+import { FaPlus, FaMinus } from "react-icons/fa";
+import { HiHomeModern } from "react-icons/hi2";
+import { HiInformationCircle } from "react-icons/hi";
+import { MdFlipCameraIos, MdOutlineRocketLaunch, MdOutlineSwapVert, MdOutlineSquare } from "react-icons/md";
+import { FaCarSide } from "react-icons/fa6";
+import { VscGraphLine } from "react-icons/vsc";
+import { BsMoonStarsFill, BsSunFill, BsFillQuestionCircleFill, BsTags } from "react-icons/bs";
+import { FaCheck, FaPlay, FaPause, FaForwardStep, FaBackwardStep } from "react-icons/fa6";
+import { LuChevronDown, LuSettings } from "react-icons/lu";
+import { PiMathOperationsBold, PiPlayPauseFill, PiSphereThin, PiCubeLight } from "react-icons/pi";
+import { CiUndo } from "react-icons/ci";
+import { CgMenuGridO } from "react-icons/cg";
+import { TbDatabasePlus, TbVariable } from "react-icons/tb";
+
+export default function DocsPage() {
+  return (
+    <div className="px-4 py-8 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold mb-4 mt-8">Browzarr&rsquo;s features</h1>
+      <div className="mb-6 text-2xl flex flex-wrap gap-4">
+        <BsFillQuestionCircleFill />
+        <FaBackwardStep />
+        <FaForwardStep />
+        <PiPlayPauseFill />
+        <LuSettings />
+        <LuChevronDown />
+        <FaCheck />
+        <BsTags />
+        <TbVariable />
+        <TbDatabasePlus />
+        <CiUndo />
+        <PiMathOperationsBold />
+        <VscGraphLine />
+        <FaCarSide />
+        <MdOutlineSwapVert />
+        <MdOutlineRocketLaunch />
+        <MdFlipCameraIos />
+        <BsSunFill />
+        <BsMoonStarsFill />
+        <HiInformationCircle />
+        <HiHomeModern />
+        <FaPlus />
+        <FaMinus />
+        <RxReset />
+        <IoImage />
+        <IoCloseCircleSharp />
+        <FaGithub />
+        <FaThumbtack />
+        <FaStar />
+        <PiCubeLight />
+        <CgMenuGridO />
+        <PiSphereThin />
+        <MdOutlineSquare />
+        <FaPlay />
+        <FaPause />
+      </div>
+      <section className="mb-6">
+        <h2 className="text-xl font-semibold">Getting started</h2>
+        <p className="mt-2">
+          Open a dataset via the UI, pick a variable and use the controls to pan, zoom and animate.
+          This page is a good place to add step-by-step guides and screenshots.
+        </p>
+      </section>
+
+      <section className="mb-6">
+        <h2 className="text-xl font-semibold">Animation</h2>
+        <ol className="list-decimal ml-5 mt-2">
+          <li>Click the play icon in the top-right to open animation controls.</li>
+          <li>Use the slider or FPS controls to adjust playback.</li>
+          <li>Use &quot;Grab Prev/Next Chunk&quot; to load additional time chunks.</li>
+        </ol>
+      </section>
+
+      <section className="mb-6">
+        <h2 className="text-xl font-semibold">Contributing</h2>
+        <p className="mt-2">
+          Add docs in this folder (src/app/docs). For larger docs, add sub-pages or a layout at <code>src/app/docs/layout.tsx</code>.
+        </p>
+      </section>
+
+      <div className="mt-8">
+        <Link href="/" className="text-sm text-primary underline">
+        ← Back to app
+        </Link>
+      </div>
+    </div>
+  );
+}

src/components/plots/CountryBorders.tsx

@@ -29,14 +29,10 @@ function Spherize([lon, lat] : [number, number]){
 
 function Borders({features}:{features: any}){
     const {xRange, yRange, plotType, borderColor, lonExtent, latExtent, lonResolution, latResolution} = usePlotStore(useShallow(state => ({
-        xRange: state.xRange,
-        yRange: state.yRange,
-        plotType: state.plotType,
-        borderColor: state.borderColor,
-        lonExtent: state.lonExtent,
-        latExtent: state.latExtent,
-        lonResolution: state.lonResolution,
-        latResolution: state.latResolution
+        xRange: state.xRange, yRange: state.yRange,
+        plotType: state.plotType, borderColor: state.borderColor,
+        lonExtent: state.lonExtent, latExtent: state.latExtent,
+        lonResolution: state.lonResolution, latResolution: state.latResolution,
     })))
     const {flipY, shape } = useGlobalStore(useShallow(state => ({
         flipY: state.flipY,
@@ -52,7 +48,6 @@ function Borders({features}:{features: any}){
           return [newLonBounds as [number, number], newLatBounds as [number, number]]
         },[latExtent, lonExtent, lonResolution, latResolution])
 
-
     const [spherize, setSpherize] = useState<boolean>(false)
 
     useEffect(()=>{
@@ -192,11 +187,10 @@ const CountryBorders = () => {
         dataShape: state.dataShape,
         is4D: state.is4D
     })))
-    const {zRange, plotType, showBorders, timeScale} = usePlotStore(useShallow(state => ({
-        zRange: state.zRange,
-        plotType: state.plotType,
-        showBorders: state.showBorders,
-        timeScale: state.timeScale
+    const {zRange, plotType, showBorders, timeScale, rotateFlat, pointSize} = usePlotStore(useShallow(state => ({
+        zRange: state.zRange, plotType: state.plotType,
+        showBorders: state.showBorders, timeScale: state.timeScale,
+        rotateFlat: state.rotateFlat, pointSize:state.pointSize
     })))
     const {analysisMode, axis} = useAnalysisStore(useShallow(state => ({
         analysisMode: state.analysisMode,
@@ -238,10 +232,20 @@ const CountryBorders = () => {
     const isPC = plotType == 'point-cloud'
     const isFlatMap = plotType == "flat"
     const depthScale = dataShape[0]/dataShape[2]*timeScale
+    const globalScale = isPC ? dataShape[2]/500 : 1
+
     return(
-        <group visible={showBorders && !(analysisMode && axis != 0)} position={(spherize || isFlatMap) ? [0,0,0] : [0, 0, swapSides ? zRange[0]*(isPC ? depthScale : 1) : zRange[1]*(isPC ? depthScale : 1)]}>
-            {coastLines && <Borders features={coastLines} />}
-            {borders && <Borders features={borders} />}
+        <group
+            rotation={[rotateFlat ? -Math.PI/2 : 0, 0, 0]}
+            scale={[globalScale, globalScale, globalScale]}
+        >
+            <group 
+                visible={showBorders && !(analysisMode && axis != 0)} 
+                position={(spherize || isFlatMap) ? [0,0,(isFlatMap ? 0.001 : 0)] : [0, 0, swapSides ? zRange[0]*(isPC ? depthScale + pointSize/10000 : 1) : zRange[1]*(isPC ? depthScale + pointSize/10000 : 1)]} // I don't know what value to use here. THis seems okay but not perfect
+            >
+                {coastLines && <Borders features={coastLines} />}
+                {borders && <Borders features={borders} />}
+            </group>
         </group>
     )
 }

src/components/ui/GithubButton.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { FaGithub } from "react-icons/fa";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+export default function GithubButton() {
+  return (
+    <Tooltip delayDuration={500}>
+      <TooltipTrigger asChild>
+        <Link href="https://github.com/EarthyScience/Browzarr" aria-label="github" target="_blank" rel="noopener noreferrer">
+          <Button variant="ghost" size="icon" className="cursor-pointer hover:scale-90 transition-transform duration-100 ease-out">
+            <FaGithub className="size-6"/>
+          </Button>
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" align="start">
+        github
+      </TooltipContent>
+    </Tooltip>
+  );
+}

src/components/ui/HomeButton.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { HiHomeModern } from "react-icons/hi2";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { usePathname } from "next/navigation";
+
+export default function HomeButton() {
+  const pathname = usePathname();
+  // Don't show Home button on home page
+  if (pathname === "/") {
+    return null;
+  }
+  return (
+    <Tooltip delayDuration={500}>
+      <TooltipTrigger asChild>
+        <Link href="/" aria-label="Home">
+          <Button variant="ghost" size="icon" className="cursor-pointer hover:scale-90 transition-transform duration-100 ease-out">
+            <HiHomeModern className="size-6"/>
+          </Button>
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" align="start">
+        Home
+      </TooltipContent>
+    </Tooltip>
+  );
+}

src/components/ui/Navbar.tsx

@@ -113,8 +113,6 @@ const Navbar = React.memo(function Navbar(){
               <PerformanceMode/>
             </>
           }
-
-          <ThemeSwitch />
         </div>
       </div>
     </nav>

src/components/ui/ThemeSwitch.tsx

@@ -36,13 +36,13 @@ const ThemeSwitch = () => {
     <Button
       variant="ghost"
       size="icon"
-      className="size-10 cursor-pointer"
+      className="cursor-pointer"
       onClick={toggleTheme} 
       >
         {!mounted ? <BsSunFill className="size-6" /> : current === 'dark' ? <BsMoonStarsFill className="size-6"/> : <BsSunFill className="size-6"/>}
     </Button>
     </TooltipTrigger>
-      <TooltipContent side="right" align="start">
+      <TooltipContent side="bottom" align="start">
         {current === 'dark' ? 
           <span>Switch to Light Mode</span> : 
           <span>Switch to Dark Mode</span>

src/components/ui/css/Footer.css

@@ -73,7 +73,7 @@
 }
 
 /* Responsive design for screens below 600px */
-@media (max-width: 600px) {
+@media (max-width: 768px) {
     .footer {
         display: none;
     }

src/components/ui/css/MainPanel.css

@@ -10,7 +10,7 @@
   width: 60px;
   max-height: 500px;
   scroll-behavior: smooth; 
-  right: 1.25rem;
+  right: 8px;
   top: 25vh;
   transform: none;
   user-select: none;

src/components/ui/css/Navbar.css

@@ -6,7 +6,7 @@
   align-content: center;
   left: 8px;
   right: auto;
-  top: 8px;
+  top: 42px;
   z-index: 10;
   user-select: none;
   background: var(--glass-bg);