ENH: Extend diagram editor to support analyses of diagrams.

Author: epatters

packages/frontend/src/analysis/analysis_editor.tsx

@@ -1,12 +1,20 @@
 import Resizable, { type ContextValue } from "@corvu/resizable";
 import { useParams } from "@solidjs/router";
-import { Show, createEffect, createResource, createSignal, useContext } from "solid-js";
+import {
+    Match,
+    Show,
+    Switch,
+    createEffect,
+    createResource,
+    createSignal,
+    useContext,
+} from "solid-js";
 import { Dynamic } from "solid-js/web";
 import invariant from "tiny-invariant";
 
-import { getLiveDoc, useApi } from "../api";
+import { useApi } from "../api";
 import { IconButton, ResizableHandle } from "../components";
-import { LiveModelContext, type ModelDocument, enlivenModelDocument } from "../model";
+import { DiagramPane } from "../diagram/diagram_editor";
 import { ModelPane } from "../model/model_editor";
 import {
     type CellConstructor,
@@ -17,7 +25,13 @@ import {
 import { BrandedToolbar, HelpButton } from "../page";
 import { TheoryLibraryContext } from "../stdlib";
 import type { AnalysisMeta } from "../theory";
-import type { LiveModelAnalysisDocument, ModelAnalysisDocument } from "./document";
+import { LiveAnalysisContext } from "./context";
+import {
+    type LiveAnalysisDocument,
+    type LiveDiagramAnalysisDocument,
+    type LiveModelAnalysisDocument,
+    getLiveAnalysis,
+} from "./document";
 import type { Analysis } from "./types";
 
 import PanelRight from "lucide-solid/icons/panel-right";
@@ -32,22 +46,9 @@ export default function AnalysisPage() {
     const theories = useContext(TheoryLibraryContext);
     invariant(theories, "Must provide theory library as context to analysis page");
 
-    const [liveAnalysis] = createResource<LiveModelAnalysisDocument>(async () => {
-        const liveDoc = await getLiveDoc<ModelAnalysisDocument>(api, refId);
-        const { doc } = liveDoc;
-        invariant(doc.type === "analysis", () => `Expected analysis, got type: ${doc.type}`);
-
-        const liveModelDoc = await getLiveDoc<ModelDocument>(api, doc.analysisOf.refId);
-        const liveModel = enlivenModelDocument(doc.analysisOf.refId, liveModelDoc, theories);
-
-        return { refId, liveDoc, liveModel };
-    });
+    const [liveAnalysis] = createResource(() => getLiveAnalysis(refId, api, theories));
 
-    return (
-        <Show when={liveAnalysis()}>
-            {(liveAnalysis) => <AnalysisDocumentEditor liveAnalysis={liveAnalysis()} />}
-        </Show>
-    );
+    return <AnalysisDocumentEditor liveAnalysis={liveAnalysis()} />;
 }
 
 /** Editor for a model of a double theory.
@@ -56,7 +57,7 @@ The editor includes a notebook for the model itself plus another pane for
 performing analysis of the model.
  */
 export function AnalysisDocumentEditor(props: {
-    liveAnalysis: LiveModelAnalysisDocument;
+    liveAnalysis?: LiveAnalysisDocument;
 }) {
     const [resizableContext, setResizableContext] = createSignal<ContextValue>();
     const [isSidePanelOpen, setSidePanelOpen] = createSignal(true);
@@ -106,7 +107,7 @@ export function AnalysisDocumentEditor(props: {
                                     </Show>
                                 </IconButton>
                             </BrandedToolbar>
-                            <ModelPane liveModel={props.liveAnalysis.liveModel} />
+                            <AnalysisOfPane liveAnalysis={props.liveAnalysis} />
                         </Resizable.Panel>
                         <ResizableHandle hidden={!isSidePanelOpen()} />
                         <Resizable.Panel
@@ -120,7 +121,11 @@ export function AnalysisDocumentEditor(props: {
                         >
                             <div class="notebook-container">
                                 <h2>Analysis</h2>
-                                <AnalysisNotebookEditor liveAnalysis={props.liveAnalysis} />
+                                <Show when={props.liveAnalysis}>
+                                    {(liveAnalysis) => (
+                                        <AnalysisNotebookEditor liveAnalysis={liveAnalysis()} />
+                                    )}
+                                </Show>
                             </div>
                         </Resizable.Panel>
                     </>
@@ -130,48 +135,94 @@ export function AnalysisDocumentEditor(props: {
     );
 }
 
+const AnalysisOfPane = (props: {
+    liveAnalysis?: LiveAnalysisDocument;
+}) => (
+    <Switch>
+        <Match when={props.liveAnalysis?.analysisType === "model" && props.liveAnalysis.liveModel}>
+            {(liveModel) => <ModelPane liveModel={liveModel()} />}
+        </Match>
+        <Match
+            when={props.liveAnalysis?.analysisType === "diagram" && props.liveAnalysis.liveDiagram}
+        >
+            {(liveDiagram) => <DiagramPane liveDiagram={liveDiagram()} />}
+        </Match>
+    </Switch>
+);
+
 /** Notebook editor for analyses of models of double theories.
  */
 export function AnalysisNotebookEditor(props: {
-    liveAnalysis: LiveModelAnalysisDocument;
+    liveAnalysis: LiveAnalysisDocument;
 }) {
     const liveDoc = () => props.liveAnalysis.liveDoc;
 
-    const cellConstructors = () =>
-        (props.liveAnalysis.liveModel.theory()?.modelAnalyses ?? []).map(analysisCellConstructor);
+    const cellConstructors = () => {
+        let meta = undefined;
+        if (props.liveAnalysis.analysisType === "model") {
+            meta = props.liveAnalysis.liveModel.theory()?.modelAnalyses;
+        } else if (props.liveAnalysis.analysisType === "diagram") {
+            meta = props.liveAnalysis.liveDiagram.liveModel.theory()?.diagramAnalyses;
+        }
+        return (meta ?? []).map(analysisCellConstructor);
+    };
 
     return (
-        <LiveModelContext.Provider value={props.liveAnalysis.liveModel}>
+        <LiveAnalysisContext.Provider value={props.liveAnalysis}>
             <NotebookEditor
                 handle={liveDoc().docHandle}
                 path={["notebook"]}
                 notebook={liveDoc().doc.notebook}
                 changeNotebook={(f) => liveDoc().changeDoc((doc) => f(doc.notebook))}
-                formalCellEditor={ModelAnalysisCellEditor}
+                formalCellEditor={AnalysisCellEditor}
                 cellConstructors={cellConstructors()}
                 noShortcuts={true}
             />
-        </LiveModelContext.Provider>
+        </LiveAnalysisContext.Provider>
     );
 }
 
-function ModelAnalysisCellEditor(props: FormalCellEditorProps<Analysis<unknown>>) {
-    const liveModel = useContext(LiveModelContext);
-    invariant(liveModel, "Live model should be provided as context for analysis");
+function AnalysisCellEditor(props: FormalCellEditorProps<Analysis<unknown>>) {
+    const liveAnalysis = useContext(LiveAnalysisContext);
+    invariant(liveAnalysis, "Live analysis should be provided as context for cell editor");
 
     return (
-        <Show when={liveModel.theory()?.modelAnalysis(props.content.id)}>
-            {(analysis) => (
-                <Dynamic
-                    component={analysis().component}
-                    liveModel={liveModel}
-                    content={props.content.content}
-                    changeContent={(f: (c: unknown) => void) =>
-                        props.changeContent((content) => f(content.content))
-                    }
-                />
-            )}
-        </Show>
+        <Switch>
+            <Match
+                when={
+                    liveAnalysis.analysisType === "model" &&
+                    liveAnalysis.liveModel.theory()?.modelAnalysis(props.content.id)
+                }
+            >
+                {(analysis) => (
+                    <Dynamic
+                        component={analysis().component}
+                        liveModel={(liveAnalysis as LiveModelAnalysisDocument).liveModel}
+                        content={props.content.content}
+                        changeContent={(f: (c: unknown) => void) =>
+                            props.changeContent((content) => f(content.content))
+                        }
+                    />
+                )}
+            </Match>
+            <Match
+                when={
+                    liveAnalysis.analysisType === "diagram" &&
+                    liveAnalysis.liveDiagram.liveModel.theory()?.diagramAnalysis(props.content.id)
+                }
+            >
+                {(analysis) => (
+                    <Dynamic
+                        component={analysis().component}
+                        liveDiagram={(liveAnalysis as LiveDiagramAnalysisDocument).liveDiagram}
+                        content={props.content.content}
+                        changeContent={(f: (c: unknown) => void) =>
+                            props.changeContent((content) => f(content.content))
+                        }
+                    />
+                )}
+            </Match>
+        </Switch>
     );
 }
 

packages/frontend/src/analysis/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from "solid-js";
+
+import type { LiveAnalysisDocument } from "./document";
+
+/** Context for a live analysis. */
+export const LiveAnalysisContext = createContext<LiveAnalysisDocument>();

packages/frontend/src/analysis/document.ts

@@ -1,7 +1,10 @@
-import type { ExternRef, LiveDoc } from "../api";
-import type { LiveDiagramDocument } from "../diagram";
-import type { LiveModelDocument } from "../model";
+import invariant from "tiny-invariant";
+
+import { type Api, type ExternRef, type LiveDoc, getLiveDoc } from "../api";
+import { type LiveDiagramDocument, getLiveDiagram } from "../diagram";
+import { type LiveModelDocument, getLiveModel } from "../model";
 import { type Notebook, newNotebook } from "../notebook";
+import type { TheoryLibrary } from "../stdlib";
 import type { Analysis } from "./types";
 
 /** Common base type for all analysis documents. */
@@ -62,6 +65,8 @@ export const newDiagramAnalysisDocument = (refId: string): DiagramAnalysisDocume
 
 /** A model analysis document "live" for editing. */
 export type LiveModelAnalysisDocument = {
+    analysisType: "model";
+
     /** The ref for which this is a live document. */
     refId: string;
 
@@ -74,6 +79,8 @@ export type LiveModelAnalysisDocument = {
 
 /** A diagram analysis document "live" for editing. */
 export type LiveDiagramAnalysisDocument = {
+    analysisType: "diagram";
+
     /** The ref for which this is a live document. */
     refId: string;
 
@@ -83,3 +90,38 @@ export type LiveDiagramAnalysisDocument = {
     /** Live diagarm that the analysis is of. */
     liveDiagram: LiveDiagramDocument;
 };
+
+/** An analysis document "live" for editing. */
+export type LiveAnalysisDocument = LiveModelAnalysisDocument | LiveDiagramAnalysisDocument;
+
+/** Retrieve an analysis and make it "live" for editing. */
+export async function getLiveAnalysis(
+    refId: string,
+    api: Api,
+    theories: TheoryLibrary,
+): Promise<LiveAnalysisDocument> {
+    const liveDoc = await getLiveDoc<AnalysisDocument>(api, refId);
+    const { doc } = liveDoc;
+    invariant(doc.type === "analysis", () => `Expected analysis, got type: ${doc.type}`);
+
+    const analysisOf = doc.analysisOf;
+    if (analysisOf.taxon === "model") {
+        const liveModel = await getLiveModel(analysisOf.refId, api, theories);
+        return {
+            analysisType: "model",
+            refId,
+            liveDoc: liveDoc as LiveDoc<ModelAnalysisDocument>,
+            liveModel,
+        };
+    } else if (analysisOf.taxon === "diagram") {
+        const liveDiagram = await getLiveDiagram(analysisOf.refId, api, theories);
+        return {
+            analysisType: "diagram",
+            refId,
+            liveDoc: liveDoc as LiveDoc<DiagramAnalysisDocument>,
+            liveDiagram,
+        };
+    } else {
+        throw new Error(`Analysis of unknown document: ${analysisOf}`);
+    }
+}

packages/frontend/src/analysis/index.ts

@@ -1,2 +1,3 @@
 export * from "./types";
 export * from "./document";
+export * from "./context";

packages/frontend/src/analysis/types.ts

@@ -1,5 +1,6 @@
 import type { Component } from "solid-js";
 
+import type { LiveDiagramDocument } from "../diagram";
 import type { LiveModelDocument } from "../model";
 
 /** An analysis of a formal object.
@@ -35,3 +36,12 @@ export type ModelAnalysisProps<T> = AnalysisProps<T> & {
 
 /** Component that renders an analysis of a model. */
 export type ModelAnalysisComponent<T> = Component<ModelAnalysisProps<T>>;
+
+/** Props passed to a diagram analysis component. */
+export type DiagramAnalysisProps<T> = AnalysisProps<T> & {
+    /** The diagram being analyzed. */
+    liveDiagram: LiveDiagramDocument;
+};
+
+/** Component that renders an analysis of diagram model. */
+export type DiagramAnalysisComponent<T> = Component<DiagramAnalysisProps<T>>;