docstring addition and theory help function move

Only a single help button will appear depending on whether a theory help page exists or not

build error fixes

Author: hamidahoderinwale

packages/frontend/src/App.tsx

@@ -1,10 +1,10 @@
 import { Repo } from "@automerge/automerge-repo";
 import { BrowserWebSocketClientAdapter } from "@automerge/automerge-repo-network-websocket";
 import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb";
-import { useParams } from "@solidjs/router";
 import { type FirebaseOptions, initializeApp } from "firebase/app";
 import invariant from "tiny-invariant";
 import * as uuid from "uuid";
+import { TheoryHelpPage } from "./model/model_editor";
 
 import { MultiProvider } from "@solid-primitives/context";
 import { Navigate, type RouteDefinition, type RouteSectionProps, Router } from "@solidjs/router";
@@ -45,18 +45,6 @@ const Root = (props: RouteSectionProps<unknown>) => {
     );
 };
 
-export function TheoryHelpPage() {
-    const params = useParams();
-    const page = params.page;
-    invariant(page, "Help page must be provided");
-    const Page = lazyMdx(() => import(`./help/theory_documentation/${page}.mdx`));
-    return (
-        <div class="help-container">
-            <Page />
-        </div>
-    );
-}
-
 function CreateModel() {
     const api = useApi();
 

packages/frontend/src/analysis/analysis_editor.tsx

@@ -22,7 +22,7 @@ import {
     NotebookEditor,
     newFormalCell,
 } from "../notebook";
-import { BrandedToolbar, HelpButton } from "../page";
+import { BrandedToolbar } from "../page";
 import { TheoryLibraryContext } from "../stdlib";
 import type { AnalysisMeta } from "../theory";
 import { LiveAnalysisContext } from "./context";
@@ -93,7 +93,6 @@ export function AnalysisDocumentEditor(props: {
                             minSize={0.25}
                         >
                             <BrandedToolbar>
-                                <HelpButton />
                                 <IconButton
                                     onClick={toggleSidePanel}
                                     tooltip={

packages/frontend/src/diagram/diagram_editor.tsx

@@ -14,7 +14,7 @@ import {
     cellShortcutModifier,
     newFormalCell,
 } from "../notebook";
-import { BrandedToolbar, HelpButton } from "../page";
+import { BrandedToolbar } from "../page";
 import { TheoryLibraryContext } from "../stdlib";
 import type { InstanceTypeMeta } from "../theory";
 import { MaybePermissionsButton } from "../user";
@@ -62,7 +62,6 @@ export function DiagramDocumentEditor(props: {
     return (
         <div class="growable-container">
             <BrandedToolbar>
-                <HelpButton />
                 <MaybePermissionsButton permissions={props.liveDiagram?.liveDoc.permissions} />
                 <IconButton
                     onClick={() => props.liveDiagram && onCreateAnalysis(props.liveDiagram.refId)}

packages/frontend/src/model/model_editor.tsx

@@ -1,11 +1,13 @@
 import { useNavigate, useParams } from "@solidjs/router";
 import { BookOpenCheck } from "lucide-solid";
+import { CircleHelp } from "lucide-solid";
 import { Match, Show, Switch, createResource, useContext } from "solid-js";
 import invariant from "tiny-invariant";
 import { createAnalysis } from "../analysis/document";
 import { useApi } from "../api";
 import { IconButton, InlineInput } from "../components";
 import { createDiagram } from "../diagram/document";
+import { lazyMdx } from "../page/help_page";
 
 import {
     type CellConstructor,
@@ -35,7 +37,6 @@ import "./model_editor.css";
 
 import ChartSpline from "lucide-solid/icons/chart-spline";
 import Network from "lucide-solid/icons/network";
-import { HelpButton } from "../page/toolbar";
 import type { TheoryMeta } from "../stdlib/types";
 
 export default function ModelPage() {
@@ -71,7 +72,6 @@ export function ModelDocumentEditor(props: {
     return (
         <div class="growable-container">
             <BrandedToolbar>
-                <HelpButton />
                 <Show when={props?.liveModel?.liveDoc.doc.theory}>
                     <TheoryHelpButton
                         theory={props.liveModel?.theory()}
@@ -220,13 +220,14 @@ function judgmentLabel(judgment: ModelJudgment): string | undefined {
     }
 }
 
+/** Button that navigates to the theory help page if it exists. If not, it naviagtes to the root help page.*/
+
 export function TheoryHelpButton({
     theory,
     help,
 }: { theory: TheoryMeta | undefined; help?: string }) {
     const navigate = useNavigate();
     if (help !== undefined) {
-        // should be if not undefined, but the prop is not passing correctly
         return (
             <IconButton
                 onClick={() => navigate(`/help/theory/${help}`)}
@@ -236,6 +237,22 @@ export function TheoryHelpButton({
             </IconButton>
         );
     } else {
-        return null;
+        return (
+            <IconButton onClick={() => navigate("/help")} tooltip="Get help about CatColab">
+                <CircleHelp />
+            </IconButton>
+        );
     }
 }
+
+export function TheoryHelpPage() {
+    const params = useParams();
+    const page = params.page;
+    invariant(page, "Help page must be provided");
+    const Page = lazyMdx(() => import(`../help/theory_documentation/${page}.mdx`));
+    return (
+        <div class="help-container">
+            <Page />
+        </div>
+    );
+}

packages/frontend/src/page/toolbar.tsx

@@ -1,9 +1,6 @@
-import { A, useNavigate } from "@solidjs/router";
-import CircleHelp from "lucide-solid/icons/circle-help";
+import { A } from "@solidjs/router";
 import type { JSX } from "solid-js";
 
-import { IconButton } from "../components";
-
 import "./toolbar.css";
 
 /** Toolbar component. */
@@ -32,14 +29,3 @@ const Brand = () => (
         <span>CatColab</span>
     </A>
 );
-
-/** Button that navigates to the root help page. */
-export function HelpButton() {
-    const navigate = useNavigate();
-
-    return (
-        <IconButton onClick={() => navigate("/help")} tooltip="Get help about CatColab">
-            <CircleHelp />
-        </IconButton>
-    );
-}