Spaces:

elvis-hf
/

optimization

Running

App Files Files Community

joel-woodfield commited on Feb 13

Commit

e048104

1 Parent(s): 303a85e

Refactor axis ranges to avoid re-rendering

Browse files

Files changed (5) hide show

dist/assets/{index-BSZlS5Yr.js → index-BePOBmlp.js} +0 -0
dist/index.html +1 -1
frontends/react/src/App.tsx +22 -20
frontends/react/src/Sidebar.tsx +7 -7
frontends/react/src/types.ts +2 -0

dist/assets/{index-BSZlS5Yr.js → index-BePOBmlp.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <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-BSZlS5Yr.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BE9C_h4C.css">
   </head>
   <body>

     <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">
   </head>
   <body>

frontends/react/src/App.tsx CHANGED Viewed

@@ -1,39 +1,41 @@
-import { useState } from "react";
 import OptimizationPlot from "./OptimizationPlot.tsx";
 import Sidebar from "./Sidebar.tsx";
-import type { Settings } from "./types.ts";
 import usePyodide from "./usePyodide.ts";
 import LoadingScreen from "./ui/LoadingScreen.tsx";
-const INITIAL_SETTINGS: Settings = {
     mode: "Univariate",
     functionExpr: "x^2",
     algorithm: "Gradient Descent",
-    xlim: [-1, 1],
-    ylim: [-1, 1],
     x0: "0.5",
     y0: "0.5",
     learningRate: "0.1",
     momentum: "0.0",
 };
 export default function App() {
-  const api = usePyodide(INITIAL_SETTINGS);
-  const [settings, setSettings] = useState<Settings>(INITIAL_SETTINGS);
-  function handleSettingsChange(newSettings: Settings) {
-    setSettings(newSettings);
-    api.sendInit(newSettings);
   }
   function setAxisLimits(xlim: [number, number], ylim: [number, number]) {
-    const newSettings = {
-      ...settings,
-      xlim: xlim,
-      ylim: ylim,
-    };
-    handleSettingsChange(newSettings);
   }
   if (api.isLoading) {
@@ -45,13 +47,13 @@ export default function App() {
       <div className="grid grid-cols-[2fr_1fr] h-dvh">
         <OptimizationPlot
           data={api.plotData}
-          xlim={settings.xlim}
-          ylim={settings.ylim}
           setAxisLimits={setAxisLimits}
         />
         <Sidebar
-          settings={settings}
-          setSettings={handleSettingsChange}
           onReset={() => api.sendReset()}
           onNextStep={() => api.sendNextStep()}

+import { useState, useRef } from "react";
 import OptimizationPlot from "./OptimizationPlot.tsx";
 import Sidebar from "./Sidebar.tsx";
+import type { SettingsUi } from "./types.ts";
 import usePyodide from "./usePyodide.ts";
 import LoadingScreen from "./ui/LoadingScreen.tsx";
+const INITIAL_SETTINGS_UI: SettingsUi = {
     mode: "Univariate",
     functionExpr: "x^2",
     algorithm: "Gradient Descent",
     x0: "0.5",
     y0: "0.5",
     learningRate: "0.1",
     momentum: "0.0",
 };
+const INITIAL_XLIM: [number, number] = [-1, 1];
+const INITIAL_YLIM: [number, number] = [-1, 1];
 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 });
   }
   function setAxisLimits(xlim: [number, number], ylim: [number, number]) {
+    xlimRef.current = xlim;
+    ylimRef.current = ylim;
+    api.sendInit({ ...settingsUi, xlim, ylim });
   }
   if (api.isLoading) {
       <div className="grid grid-cols-[2fr_1fr] h-dvh">
         <OptimizationPlot
           data={api.plotData}
+          xlim={xlimRef.current}
+          ylim={ylimRef.current}
           setAxisLimits={setAxisLimits}
         />
         <Sidebar
+          settings={settingsUi}
+          setSettings={handleSettingsUiChange}
           onReset={() => api.sendReset()}
           onNextStep={() => api.sendNextStep()}

frontends/react/src/Sidebar.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import Tabs from "./ui/Tabs.tsx";
 import Dropdown from "./ui/Dropdown.tsx";
 import Button from "./ui/Button.tsx";
 import Radio from "./ui/Radio.tsx";
-import { SUPPORTED_MODES, SUPPORTED_ALGORITHMS, type Settings } from "./types.ts";
 const DEFAULT_HYPERPARAMETERS = {
@@ -37,8 +37,8 @@ const BIVARIATE_FUNCTION_OPTIONS = {
 interface SidebarProps {
-  settings: Settings,
-  setSettings: (settings: Settings) => void,
   onReset?: () => void,
   onNextStep?: () => void,
@@ -59,10 +59,10 @@ export default function Sidebar({
   const tabs = ["Settings", "Optimize"] as const;
   const [activeTab, setActiveTab] = useState<(typeof tabs)[number]>("Settings");
-  function updateSettings(key: keyof Settings, value: string) {
     if (key === "algorithm") {
       const defaults = DEFAULT_HYPERPARAMETERS[value as keyof typeof DEFAULT_HYPERPARAMETERS];
-      setSettings({ ...settings, algorithm: value as Settings["algorithm"], ...defaults });
     } else {
       setSettings({ ...settings, [key]: value });
     }
@@ -76,7 +76,7 @@ export default function Sidebar({
     updateSettings("functionExpr", expr);
   }
-  function handleModeChange(mode: Settings["mode"]) {
     // When changing modes, reset function to Quadratic as some options are mode-specific
     const newFunctionOption = "Quadratic";
@@ -127,7 +127,7 @@ export default function Sidebar({
             label="Algorithm"
             options={SUPPORTED_ALGORITHMS}
             activeOption={settings.algorithm}
-            onChange={(value: Settings["algorithm"]) => updateSettings("algorithm", value)}
           />
           <div className={`${settings.mode === "Bivariate" ? "grid grid-cols-2 gap-2" : ""}`}>
             <InputField

 import Dropdown from "./ui/Dropdown.tsx";
 import Button from "./ui/Button.tsx";
 import Radio from "./ui/Radio.tsx";
+import { SUPPORTED_MODES, SUPPORTED_ALGORITHMS, type SettingsUi } from "./types.ts";
 const DEFAULT_HYPERPARAMETERS = {
 interface SidebarProps {
+  settings: SettingsUi,
+  setSettings: (settings: SettingsUi) => void,
   onReset?: () => void,
   onNextStep?: () => void,
   const tabs = ["Settings", "Optimize"] as const;
   const [activeTab, setActiveTab] = useState<(typeof tabs)[number]>("Settings");
+  function updateSettings(key: keyof SettingsUi, value: string) {
     if (key === "algorithm") {
       const defaults = DEFAULT_HYPERPARAMETERS[value as keyof typeof DEFAULT_HYPERPARAMETERS];
+      setSettings({ ...settings, algorithm: value as SettingsUi["algorithm"], ...defaults });
     } else {
       setSettings({ ...settings, [key]: value });
     }
     updateSettings("functionExpr", expr);
   }
+  function handleModeChange(mode: SettingsUi["mode"]) {
     // When changing modes, reset function to Quadratic as some options are mode-specific
     const newFunctionOption = "Quadratic";
             label="Algorithm"
             options={SUPPORTED_ALGORITHMS}
             activeOption={settings.algorithm}
+            onChange={(value: SettingsUi["algorithm"]) => updateSettings("algorithm", value)}
           />
           <div className={`${settings.mode === "Bivariate" ? "grid grid-cols-2 gap-2" : ""}`}>
             <InputField

frontends/react/src/types.ts CHANGED Viewed

@@ -23,6 +23,8 @@ export interface Settings {
   epsilon?: string;
 }
 export type PlotValues = {
   x: number[];
   y: number[];

   epsilon?: string;
 }
+export type SettingsUi = Omit<Settings, "xlim" | "ylim">;
 export type PlotValues = {
   x: number[];
   y: number[];