feat: Add disabled state and tooltip to notebook analysis

Co-authored-by: andershaf <andershaf@gmail.com>

Author: 2 people

src/App.tsx

@@ -73,6 +73,7 @@ function getItem(
   children?: MenuItem[],
   onClick?: () => void,
   disabled?: boolean,
+  title?: string,
 ): MenuItem {
   return {
     key,
@@ -81,6 +82,7 @@ function getItem(
     label,
     onClick,
     disabled,
+    title,
   } as MenuItem;
 }
 
@@ -197,7 +199,15 @@ const App: React.FC = () => {
   const items: MenuItem[] = [
     getItem("View", "view", <AlignLeftOutlined />),
     getItem("Console", "console", <BorderOuterOutlined />),
-    getItem("Notebook", "notebook", <LineChartOutlined />),
+    getItem(
+      "Notebook",
+      "notebook",
+      <LineChartOutlined />,
+      undefined,
+      undefined,
+      running || paused,
+      running || paused ? "Can only analyze in Jupyter notebook after simulation has finished" : undefined,
+    ),
     getItem(
       editMenuLabel,
       "edit",

src/containers/Main.tsx

@@ -1,4 +1,4 @@
-import { Modal, Tabs, Progress, Button, Layout } from "antd";
+import { Modal, Tabs, Progress, Button, Layout, Tooltip } from "antd";
 import { useState, useEffect, useMemo } from "react";
 import View from "./View";
 import Notebook from "./Notebook";
@@ -20,6 +20,7 @@ const Main = ({ isEmbedded }: { isEmbedded: boolean }) => {
   );
   const selectedMenu = useStoreState((state) => state.app.selectedMenu);
   const running = useStoreState((state) => state.simulation.running);
+  const paused = useStoreState((state) => state.simulation.paused);
 
   const setPreferredView = useStoreActions(
     (actions) => actions.app.setPreferredView,
@@ -103,16 +104,21 @@ const Main = ({ isEmbedded }: { isEmbedded: boolean }) => {
           width={"80%"}
           footer={[
             <>
-              <Button
-                key="analyze"
-                onClick={() => {
-                  setShowConsole(false);
-                  setPreferredView(undefined);
-                  setPreferredView("notebook");
-                }}
+              <Tooltip
+                title={running || paused ? "Can only analyze in Jupyter notebook after simulation has finished" : ""}
               >
-                Analyze in notebook
-              </Button>
+                <Button
+                  key="analyze"
+                  disabled={running || paused}
+                  onClick={() => {
+                    setShowConsole(false);
+                    setPreferredView(undefined);
+                    setPreferredView("notebook");
+                  }}
+                >
+                  Analyze in notebook
+                </Button>
+              </Tooltip>
               <Button key="close" onClick={() => setShowConsole(false)}>
                 Close
               </Button>