added download options for 3d plot

src/app/results/ResultsTabbedPanel.tsx

@@ -16,6 +16,8 @@ import SteadyState3DPanel from "./SteadyState3DPanel";
 
 import DownloadPlotButton from "./downloadButtons/DownloadPlotButton";
 import DownloadTableButton from "./downloadButtons/DownloadTableButton";
+import DownloadPlot3DButton from "./downloadButtons/DownloadPlot3DButton";
+import DownloadSteadyState3DButton from "./downloadButtons/DownloadSteadyState3DButton";
 
 import { simulationResultAtom } from "@/globals/simulation";
 import IconButton from "@/components/IconButton";
@@ -50,6 +52,7 @@ const ResultTabbedPanel = ({ onClose }: ResultTabbedPanelProps) => {
             <IconButton label="Close" onClick={onClose}>
               <CrossIcon width="1em" height="1em" />
             </IconButton>
+            <DownloadSteadyState3DButton />
           </>
         ),
       },
@@ -91,6 +94,7 @@ const ResultTabbedPanel = ({ onClose }: ResultTabbedPanelProps) => {
             <IconButton label="Close" onClick={onClose}>
               <CrossIcon width="1em" height="1em" />
             </IconButton>
+            <DownloadPlot3DButton />
           </>
         ),
       },

src/app/results/SteadyState3DPanel.tsx

@@ -1,12 +1,17 @@
-import { useState } from "react";
-import { useAtomValue } from "jotai";
+import { useAtomValue, useAtom } from "jotai";
 
 import styles from "./results.module.css";
 
 import SelectProperty from "@/components/property-list/SelectProperty";
+import BooleanProperty from "@/components/property-list/BooleanProperty";
+import NumericProperty from "@/components/property-list/NumericProperty";
+import PropertyList from "@/components/property-list/PropertyList";
 import ArrayBarChart3D from "./visuals/ArrayBarChart3D";
+import { Allotment } from "allotment";
 
 import { simulationResultAtom } from "@/globals/simulation";
+import { graphSettingsAtom, steadyState3DItemAtom } from "@/globals/settings";
+import { PALETTES } from "@/features/colors";
 
 const ITEMS = [
   "Jacobian",
@@ -24,12 +29,25 @@ const AXES: { [name: string]: { x: string; y: string; z: string } } = {
 
 const ITEM_OPTIONS = Object.fromEntries(ITEMS.map((i) => [i, i]));
 
-type Item = (typeof ITEMS)[number];
-
 const SteadyState3DPanel = () => {
   const result = useAtomValue(simulationResultAtom);
+  const [graphSettings, setGraphSettings] = useAtom(graphSettingsAtom);
+  const [item, setItem] = useAtom(steadyState3DItemAtom);
+
+  const handleZAxisChangeFor = (
+    setting: keyof Pick<
+      typeof graphSettings,
+      "isAutoscaledZ" | "minZ" | "maxZ" | "colorScheme3D"
+    >,
+  ): ((newValue: unknown) => void) => {
+    return (newValue) => {
+      setGraphSettings({ ...graphSettings, [setting]: newValue });
+    };
+  };
 
-  const [item, setItem] = useState<Item>("Jacobian");
+  const colorSchemeOptions = Object.fromEntries(
+    Object.keys(PALETTES).map((name) => [name, name]),
+  );
 
   if (result?.type !== "steadyState") {
     return null;
@@ -44,22 +62,66 @@ const SteadyState3DPanel = () => {
 
   return (
     <div className={styles.panel}>
-      <div className={styles.steadyState3DPanel}>
-        <SelectProperty
-          name="Item"
-          value={item}
-          options={ITEM_OPTIONS}
-          onChange={setItem}
-        />
+      <Allotment vertical>
+        <div className={styles.plotContainer}>
+          <div className={styles.steadyState3DPanel}>
+            <SelectProperty
+              name="Item"
+              value={item}
+              options={ITEM_OPTIONS}
+              onChange={(newValue) => setItem(newValue as typeof item)}
+            />
+
+            <ArrayBarChart3D
+              name={item}
+              data={resultItem}
+              x={AXES[item].x}
+              y={AXES[item].y}
+              z={AXES[item].z}
+              isAutoscaledZ={graphSettings.isAutoscaledZ}
+              minZ={graphSettings.minZ}
+              maxZ={graphSettings.maxZ}
+              colorScheme={graphSettings.colorScheme3D}
+            />
+          </div>
+        </div>
 
-        <ArrayBarChart3D
-          name={item}
-          data={resultItem}
-          x={AXES[item].x}
-          y={AXES[item].y}
-          z={AXES[item].z}
-        />
-      </div>
+        <Allotment.Pane preferredSize={200}>
+          <div className={styles.quickActionsContainer}>
+            <div className={styles.quickActionsSettings}>
+              <PropertyList alignment="leftSmall">
+                <BooleanProperty
+                  name="Autoscale Z"
+                  value={graphSettings.isAutoscaledZ}
+                  onChange={handleZAxisChangeFor("isAutoscaledZ")}
+                />
+                {!graphSettings.isAutoscaledZ && (
+                  <NumericProperty
+                    name="Z Minimum"
+                    value={graphSettings.minZ}
+                    onChange={handleZAxisChangeFor("minZ")}
+                    validator={(newValue) => newValue < graphSettings.maxZ}
+                  />
+                )}
+                {!graphSettings.isAutoscaledZ && (
+                  <NumericProperty
+                    name="Z Maximum"
+                    value={graphSettings.maxZ}
+                    onChange={handleZAxisChangeFor("maxZ")}
+                    validator={(newValue) => newValue > graphSettings.minZ}
+                  />
+                )}
+                <SelectProperty
+                  name="Color Scheme"
+                  value={graphSettings.colorScheme3D}
+                  options={colorSchemeOptions}
+                  onChange={handleZAxisChangeFor("colorScheme3D") as (newValue: string) => void}
+                />
+              </PropertyList>
+            </div>
+          </div>
+        </Allotment.Pane>
+      </Allotment>
     </div>
   );
 };