Manually update color scale

dist/assets/{index-BE9C_h4C.css → index-CBOaLvz3.css}

@@ -1 +1 @@
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-orange-200:oklch(90.1% .076 70.697);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-500:oklch(70.5% .213 47.604);--color-blue-600:oklch(54.6% .245 262.881);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-800:oklch(27.9% .041 260.031);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-950:oklch(13% .028 261.692);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-semibold:600;--tracking-tight:-.025em;--animate-spin:spin 1s linear infinite;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.z-50{z-index:50}.mb-4{margin-bottom:calc(var(--spacing)*4)}.flex{display:flex}.grid{display:grid}.h-16{height:calc(var(--spacing)*16)}.h-dvh{height:100dvh}.h-full{height:100%}.w-16{width:calc(var(--spacing)*16)}.w-full{width:100%}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[2fr_1fr\]{grid-template-columns:2fr 1fr}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-gray-300{border-color:var(--color-gray-300)}.border-orange-500{border-color:var(--color-orange-500)}.border-slate-200{border-color:var(--color-slate-200)}.border-t-blue-600{border-top-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-orange-200{background-color:var(--color-orange-200)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-white{background-color:var(--color-white)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.py-2{padding-block:calc(var(--spacing)*2)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-gray-700{color:var(--color-gray-700)}.text-gray-950{color:var(--color-gray-950)}.text-orange-500{color:var(--color-orange-500)}.text-slate-800{color:var(--color-slate-800)}@media(hover:hover){.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-orange-300:hover{background-color:var(--color-orange-300)}}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-orange-200:oklch(90.1% .076 70.697);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-500:oklch(70.5% .213 47.604);--color-blue-600:oklch(54.6% .245 262.881);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-800:oklch(27.9% .041 260.031);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-950:oklch(13% .028 261.692);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-semibold:600;--tracking-tight:-.025em;--animate-spin:spin 1s linear infinite;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.z-50{z-index:50}.mt-2{margin-top:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.flex{display:flex}.grid{display:grid}.h-16{height:calc(var(--spacing)*16)}.h-dvh{height:100dvh}.h-full{height:100%}.w-16{width:calc(var(--spacing)*16)}.w-full{width:100%}.flex-1{flex:1}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[2fr_1fr\]{grid-template-columns:2fr 1fr}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-gray-300{border-color:var(--color-gray-300)}.border-orange-500{border-color:var(--color-orange-500)}.border-slate-200{border-color:var(--color-slate-200)}.border-t-blue-600{border-top-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-orange-200{background-color:var(--color-orange-200)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-white{background-color:var(--color-white)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.py-2{padding-block:calc(var(--spacing)*2)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-gray-700{color:var(--color-gray-700)}.text-gray-950{color:var(--color-gray-950)}.text-orange-500{color:var(--color-orange-500)}.text-slate-800{color:var(--color-slate-800)}@media(hover:hover){.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-orange-300:hover{background-color:var(--color-orange-300)}}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}

dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Optimization</title>
-    <script type="module" crossorigin src="/assets/index-BePOBmlp.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BE9C_h4C.css">
+    <script type="module" crossorigin src="/assets/index-DyZyiv0F.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CBOaLvz3.css">
   </head>
   <body>
     <div id="root"></div>

frontends/react/src/App.tsx

@@ -22,11 +22,8 @@ export default function App() {
   const [settingsUi, setSettingsUi] = useState<SettingsUi>(INITIAL_SETTINGS_UI);
   const xlimRef = useRef<[number, number]>(INITIAL_XLIM);
   const ylimRef = useRef<[number, number]>(INITIAL_YLIM);
-
   const settings = { ...settingsUi, xlim: xlimRef.current, ylim: ylimRef.current };
 
-  const api = usePyodide(settings);
-
   function handleSettingsUiChange(newSettings: SettingsUi) {
     setSettingsUi(newSettings);
     api.sendInit({ ...newSettings, xlim: xlimRef.current, ylim: ylimRef.current });
@@ -38,6 +35,8 @@ export default function App() {
     api.sendInit({ ...settingsUi, xlim, ylim });
   }
 
+  const api = usePyodide(settings);
+
   if (api.isLoading) {
     return <LoadingScreen message="Loading" />;
   }

frontends/react/src/OptimizationPlot.tsx

@@ -1,6 +1,7 @@
-import { useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import Plot from "react-plotly.js";
 import type { PlotData } from "./types";
+import Button from "./ui/Button";
 
 interface OptimizationPlotProps {
   data: PlotData;
@@ -14,10 +15,54 @@ export default function OptimizationPlot({ data, xlim, ylim, setAxisLimits }: Op
   // data
   let x: number[] = data.functionValues ? data.functionValues.x : [];
   let y: number[] = data.functionValues ? data.functionValues.y : [];
-  let z: number[] = data.functionValues && data.functionValues.z ? data.functionValues.z : [];
+  let z: number[][] = data.functionValues && data.functionValues.z ? data.functionValues.z : [];
   let trajX: number[] = data.trajectoryValues ? data.trajectoryValues.x : [];
   let trajY: number[] = data.trajectoryValues ? data.trajectoryValues.y : [];
-  let trajZ: number[] = data.trajectoryValues && data.trajectoryValues.z ? data.trajectoryValues.z : [];
+  let trajZ: number[][] = data.trajectoryValues && data.trajectoryValues.z ? data.trajectoryValues.z : [];
+
+  const [colorScaleRange, setColorScaleRange] = useState<[number, number] | null>(null);
+  const nextColorScaleRangeRef = useRef<[number, number] | null>(null);
+
+  useEffect(() => {
+    if (z) {
+      if (!z || z.length === 0) {
+        nextColorScaleRangeRef.current = null;
+        return;
+      }
+
+      let zMin = Infinity;
+      let zMax = -Infinity;
+
+      for (let i = 0; i < z.length; i++) {
+        for (let j = 0; j < z[i].length; j++) {
+          const v = z[i][j];
+          if (!Number.isFinite(v)) {
+            continue;
+          }
+          if (v < zMin) {
+            zMin = v;
+          }
+          if (v > zMax) {
+            zMax = v;
+          }
+        }
+      }
+
+      const padding = (zMax - zMin) * 0.1;
+      nextColorScaleRangeRef.current = [zMin - padding, zMax + padding];
+
+      if (colorScaleRange === null) {
+        setColorScaleRange(nextColorScaleRangeRef.current);
+      }
+    }
+  }, [z]);
+
+  function updateColorScaleRange() {
+    if (nextColorScaleRangeRef.current) {
+      setColorScaleRange(nextColorScaleRangeRef.current);
+      nextColorScaleRangeRef.current = null;
+    }
+  }
 
   const plotRef = useRef<any>(null);
   const layoutRef = useRef<any>({
@@ -80,7 +125,7 @@ export default function OptimizationPlot({ data, xlim, ylim, setAxisLimits }: Op
           }
         ]}
         layout={layoutRef.current}
-        className="w-full h-full"
+        className="w-full flex-1"
         config={{ 
           responsive: true,
           displayModeBar: false,
@@ -90,64 +135,71 @@ export default function OptimizationPlot({ data, xlim, ylim, setAxisLimits }: Op
     );
   } else {
     return (
-      <Plot
-        ref={plotRef}
-        onRelayout={(event) => {
-          const x0 = event['xaxis.range[0]'];
-          const x1 = event['xaxis.range[1]'];
-          const y0 = event['yaxis.range[0]'];
-          const y1 = event['yaxis.range[1]'];
+      <div className="w-full h-full flex flex-col">
+        <Plot
+          ref={plotRef}
+          onRelayout={(event) => {
+            const x0 = event['xaxis.range[0]'];
+            const x1 = event['xaxis.range[1]'];
+            const y0 = event['yaxis.range[0]'];
+            const y1 = event['yaxis.range[1]'];
 
-          if (
-            typeof x0 === "number"
-            && typeof x1 === "number"
-            && typeof y0 === "number"
-            && typeof y1 === "number"
-          ) {
-            setAxisLimits([x0, x1], [y0, y1]);
-          }
-        }}
-        data={[
-          {
-            x: x,
-            y: y,
-            z: z,
-            type: 'contour',
-            colorscale: 'Viridis',
-            hoverinfo: "skip",
-            contours: {
-              coloring: "heatmap",
-              showlines: false,
+            if (
+              typeof x0 === "number"
+              && typeof x1 === "number"
+              && typeof y0 === "number"
+              && typeof y1 === "number"
+            ) {
+              setAxisLimits([x0, x1], [y0, y1]);
             }
-          },
-          {
-            x: trajX,
-            y: trajY,
-            z: trajZ,
-            type: 'scatter',
-            mode: 'lines+markers',
-            line: { color: '#d97871', width: 2 },
-            marker: { color: '#d97871', size: 10 },
-            hoverinfo: "skip",
-          },
-          {
-            x: trajX.length > 0 ? [trajX.at(-1)!] : [],
-            y: trajY.length > 0 ? [trajY.at(-1)!] : [],
-            z: trajZ.length > 0 ? [trajZ.at(-1)!] : [],
-            type: 'scatter',
-            mode: 'markers',
-            marker: { color: 'red', size: 12 },
-            hoverinfo: "skip",
-          }
-        ]}
-        layout={layoutRef.current}
-        className="w-full h-full"
-        config={{ 
-          responsive: true,
-          displayModeBar: false,
-          scrollZoom: true,
-        }}
-      />
+          }}
+          data={[
+            {
+              x: x,
+              y: y,
+              z: z,
+              zmin: colorScaleRange?.[0],
+              zmax: colorScaleRange?.[1],
+              type: 'contour',
+              colorscale: 'Viridis',
+              hoverinfo: "skip",
+              contours: {
+                coloring: "heatmap",
+                showlines: false,
+              }
+            },
+            {
+              x: trajX,
+              y: trajY,
+              z: trajZ,
+              type: 'scatter',
+              mode: 'lines+markers',
+              line: { color: '#d97871', width: 2 },
+              marker: { color: '#d97871', size: 10 },
+              hoverinfo: "skip",
+            },
+            {
+              x: trajX.length > 0 ? [trajX.at(-1)!] : [],
+              y: trajY.length > 0 ? [trajY.at(-1)!] : [],
+              z: trajZ.length > 0 ? [trajZ.at(-1)!] : [],
+              type: 'scatter',
+              mode: 'markers',
+              marker: { color: 'red', size: 12 },
+              hoverinfo: "skip",
+            }
+          ]}
+          layout={layoutRef.current}
+          className="w-full flex-1"
+          config={{ 
+            responsive: true,
+            displayModeBar: false,
+            scrollZoom: true,
+          }}
+        />
+        <div className="mt-2 flex justify-end">
+          <Button label="Update Color Scale" onClick={updateColorScaleRange} />
+        </div>
+      </div>
     ); 
   }
-}
+}

frontends/react/src/Sidebar.tsx

@@ -19,7 +19,7 @@ const DEFAULT_HYPERPARAMETERS = {
 
 
 const UNIVARIATE_FUNCTION_OPTIONS = {
-  "--Custom--": "",
+  "--Custom--": "3 * x^2 + x",
   "Quadratic": "x^2",
   "Cubic": "x^3 - 3*x^2 + 2*x",
   "Quartic": "x^4 - 4*x^3 + 6*x^2 - 4*x + 1",
@@ -28,7 +28,7 @@ const UNIVARIATE_FUNCTION_OPTIONS = {
 }
 
 const BIVARIATE_FUNCTION_OPTIONS = {
-  "--Custom--": "",
+  "--Custom--": "x^2 + 3 * y^2",
   "Quadratic": "x^2 + y^2",
   "Ackley": "-20 * exp(-0.2 * sqrt(0.5 * (x^2 + y^2))) - exp(0.5 * (cos(2 * pi * x) + cos(2 * pi * y))) + e + 20",
   "Rasteringin": "20 + (x^2 - 10 * cos(2 * pi * x)) + (y^2 - 10 * cos(2 * pi * y))",

frontends/react/src/types.ts

@@ -28,7 +28,7 @@ export type SettingsUi = Omit<Settings, "xlim" | "ylim">;
 export type PlotValues = {
   x: number[];
   y: number[];
-  z?: number[];
+  z?: number[][];
 }
 
 export type PlotData = {