Continue refactor

src/frontend/app.tsx

@@ -103,9 +103,7 @@ export function getApp() {
                                             <DemoCorr/>
                                         </Tabs.Panel>
                                         <Tabs.Panel value="bm" style={{height: '100%'}}>
-                                            <OnionContextProvider>
-                                                <DemoBM/>
-                                            </OnionContextProvider>
+                                            <DemoBM/>
                                         </Tabs.Panel>
                                         <Tabs.Panel value="le">
                                             <DemoLE/>

src/frontend/demos/demo_bm.tsx

@@ -5,8 +5,8 @@ import {OnionContext} from "../onion_context";
 import {PrimitiveRegistry} from 'onion/primitive_delta';
 import {mockUuid} from 'onion/test_helpers';
 import {InfoHoverCard} from '../info_hover_card';
-import {newVersionedModel, undoButtonHelpText, VersionedModelState} from '../versioned_model/single_model';
-import {newCorrespondence, undoButtonHelpTextCorr} from '../versioned_model/correspondence';
+import {newOnion, undoButtonHelpText} from "../versioned_model/single_model2";
+import {newCorrespondence, undoButtonHelpTextCorr} from '../versioned_model/correspondence2';
 import {ManualRendererProps, ModalManualRenderer} from '../versioned_model/manual_renderer';
 import {Actionblock, Resultblock} from './blocks';
 
@@ -113,85 +113,52 @@ export const demo_BM_description =
     </>;
 
 export function getDemoBM() {
-    const as = newVersionedModel({readonly: false});
-    const cs1 = newVersionedModel({readonly: false});
-    const cs2 = newVersionedModel({readonly: false});
-    const corr1 = newCorrespondence({cs: cs1, as});
-    const corr2 = newCorrespondence({cs: cs2, as});
+    const primitiveRegistry = new PrimitiveRegistry();
+    const generateUUID = mockUuid();
 
-    // const {getModalManualRenderer} = newManualRenderer();
+    const as = newOnion({readonly: false, primitiveRegistry});
 
-    // returns functional react component
-    return function () {
-        const [asState, setAsState] = React.useState<VersionedModelState>(as.initialState);
-        const [cs1State, setCs1State] = React.useState<VersionedModelState>(cs1.initialState);
-        const [cs2State, setCs2State] = React.useState<VersionedModelState>(cs2.initialState);
-        const [corr1State, setCorr1State] = React.useState<VersionedModelState>(corr1.initialState);
-        const [corr2State, setCorr2State] = React.useState<VersionedModelState>(corr2.initialState);
-
-        const [manualRendererState, setManualRendererState] = React.useState<null | ManualRendererProps>(null);
+    function createCs() {
+        const cs = newOnion({readonly: false, primitiveRegistry});
+        const corr = newCorrespondence({cs, as, primitiveRegistry, generateUUID});
+        return {cs, corr};
+    }
 
-        const [autoParse1, setAutoParse1] = React.useState<boolean>(true);
-        const [autoParse2, setAutoParse2] = React.useState<boolean>(true);
-        const [autoRender1, setAutoRender1] = React.useState<boolean>(false);
-        const [autoRender2, setAutoRender2] = React.useState<boolean>(false);
+    const css = [createCs(), createCs()];
 
-        const onionContext = React.useContext(OnionContext);
+    // returns functional react component
+    return function () {
 
-        const asReducer = as.getReducer(setAsState);
-        const cs1Reducer = cs1.getReducer(setCs1State);
-        const cs2Reducer = cs2.getReducer(setCs2State);
-        const corr1Reducer = corr1.getReducer(setCorr1State, cs1Reducer, asReducer);
-        const corr2Reducer = corr2.getReducer(setCorr2State, cs2Reducer, asReducer);
+        // const [autoParse, setAutoParse] = React.useState(css.map(()=>true));
+        // const [autoRender, setAutoRender] = React.useState(css.map(()=>false));
 
-        const asComponents = as.getReactComponents(asState, setAsState, {
+        const onionAs = as.useOnion(reducer => ({
             onUserEdit: (deltas, description) => {
-                const newVersion = asReducer.createAndGotoNewVersion(deltas, description);
-                if (autoRender1) {
-                    corr1Reducer.renderExistingVersion(newVersion, setManualRendererState, onionContext);
-                }
-                if (autoRender2) {
-                    corr2Reducer.renderExistingVersion(newVersion, setManualRendererState, onionContext);
-                }
+                const newVersion = onionAs.reducer.createAndGotoNewVersion(deltas, description);
+                onions.forEach(o => {
+                    if (o.autoRender) {
+                        o.onionCorr.reducer.renderExistingVersion(newVersion, setManualRendererState);
+                    }
+                });
             },
-            onUndoClicked: asReducer.undo,
-            onRedoClicked: asReducer.redo,
-            onVersionClicked: asReducer.gotoVersion,
-        });
+        }));
+        const onions = css.map(({cs, corr}, i) => {
+            const [autoParse, setAutoParse] = React.useState(true);
+            const [autoRender, setAutoRender] = React.useState(false);
 
-        const cs1Components = cs1.getReactComponents(cs1State, setCs1State, {
-            onUserEdit: (deltas, description) => {
-                const newVersion = cs1Reducer.createAndGotoNewVersion(deltas, description);
-                if (autoParse1) {
-                    corr1Reducer.parseExistingVersion(newVersion, onionContext);
-                }
-            },
-            onUndoClicked: cs1Reducer.undo,
-            onRedoClicked: cs1Reducer.redo,
-            onVersionClicked: cs1Reducer.gotoVersion,
-        });
-        const cs2Components = cs2.getReactComponents(cs2State, setCs2State, {
-            onUserEdit: (deltas, description) => {
-                const newVersion = cs2Reducer.createAndGotoNewVersion(deltas, description);
-                if (autoParse2) {
-                    corr2Reducer.parseExistingVersion(newVersion, onionContext);
-                }
-            },
-            onUndoClicked: cs2Reducer.undo,
-            onRedoClicked: cs2Reducer.redo,
-            onVersionClicked: cs2Reducer.gotoVersion,
+            const onionCs = cs.useOnion(reducer => ({
+                onUserEdit: (deltas, description) => {
+                    const newVersion = reducer.createAndGotoNewVersion(deltas, description);
+                    if (autoParse) {
+                        onionCorr.reducer.parseExistingVersion(newVersion);
+                    }
+                },
+            }));
+            const onionCorr = corr.useCorrespondence(onionCs.reducer, onionAs.reducer);
+            return {onionCs, onionCorr, autoParse, setAutoParse, autoRender, setAutoRender};
         });
 
-        const corr1Components = corr1.getReactComponents(corr1State, setCorr1State, {
-            onUndoClicked: corr1Reducer.gotoVersion,
-            onRedoClicked: corr1Reducer.gotoVersion,
-            onVersionClicked: corr1Reducer.gotoVersion,
-        });
-        const corr2Components = corr2.getReactComponents(corr2State, setCorr2State, {
-            onUndoClicked: corr2Reducer.gotoVersion,
-            onRedoClicked: corr2Reducer.gotoVersion,
-            onVersionClicked: corr2Reducer.gotoVersion,
-        });
+        const [manualRendererState, setManualRendererState] = React.useState<null | ManualRendererProps>(null);
 
         const csTabs = ["editor", "state", "history", "deltaL1", "deltaL0"];
         const corrTabs = ["state", "history", "deltaL1", "deltaL0"];
@@ -202,52 +169,52 @@ export function getDemoBM() {
         }
 
         return (<div style={{minWidth: 2200}}>
+            <OnionContext.Provider value={{generateUUID, primitiveRegistry}}>
             <ModalManualRenderer manualRendererState={manualRendererState}/>
-
             <Grid columns={5} grow>
                 <Grid.Col span={1}>
-                    {centeredCaption("Concrete Syntax 1")}
+                    {centeredCaption("Concrete Syntax 0")}
                 </Grid.Col>
                 <Grid.Col span={1}>
-                    {centeredCaption("Correspondence 1")}
+                    {centeredCaption("Correspondence 0")}
                 </Grid.Col>
                 <Grid.Col span={1}>
                     {centeredCaption("Abstract Syntax")}
                 </Grid.Col>
                 <Grid.Col span={1}>
-                    {centeredCaption("Correspondence 2")}
+                    {centeredCaption("Correspondence 1")}
                 </Grid.Col>
                 <Grid.Col span={1}>
-                    {centeredCaption("Concrete Syntax 2")}
+                    {centeredCaption("Concrete Syntax 1")}
                 </Grid.Col>
 
                 <Grid.Col span={1}>
                     <Group position="right">
-                        {corr1Reducer.getCaptionWithParseButton(autoParse1, setAutoParse1, cs1.getCurrentVersion())}
+                        {onions[0].onionCorr.components.getCaptionWithParseButton(onions[0].autoParse, onions[0].setAutoParse, css[0].cs.getCurrentVersion())}
                     </Group>
                 </Grid.Col>
                 <Grid.Col span={1}>
                 </Grid.Col>
                 <Grid.Col span={1}>
                     <Group position="apart">
-                        {corr1Reducer.getCaptionWithRenderButton(autoRender1, setAutoRender1, as.getCurrentVersion(), setManualRendererState)}
-                        {corr2Reducer.getCaptionWithRenderButton(autoRender2, setAutoRender2, as.getCurrentVersion(), setManualRendererState, "right")}
+                        {onions[0].onionCorr.components.getCaptionWithRenderButton(onions[0].autoRender, onions[0].setAutoRender, as.getCurrentVersion(), setManualRendererState)}
+                        {onions[1].onionCorr.components.getCaptionWithRenderButton(onions[1].autoRender, onions[1].setAutoRender, as.getCurrentVersion(), setManualRendererState, "right")}
                     </Group>
                 </Grid.Col>
                 <Grid.Col span={1}>
                 </Grid.Col>
                 <Grid.Col span={1}>
                     <Group position="left">
-                        {corr2Reducer.getCaptionWithParseButton(autoParse2, setAutoParse2, cs2.getCurrentVersion(), "left")}
+                        {onions[1].onionCorr.components.getCaptionWithParseButton(onions[1].autoParse, onions[1].setAutoParse, css[1].cs.getCurrentVersion(), "left")}
                     </Group>
                 </Grid.Col>
 
                 <Grid.Col span={1}>
                     <Stack>
-                        {cs1Components.makeTabs("editor", csTabs)}
-                        {cs1Components.makeTabs("history", csTabs)}
+                        {onions[0].onionCs.components.makeTabs("editor", csTabs)}
+                        {onions[0].onionCs.components.makeTabs("history", csTabs)}
                         <Center>
-                            {cs1Components.undoRedoButtons}
+                            {onions[0].onionCs.components.undoRedoButtons}
                             <Space w="sm"/>
                             <InfoHoverCard>
                                 {undoButtonHelpText}
@@ -257,10 +224,10 @@ export function getDemoBM() {
                 </Grid.Col>
                 <Grid.Col span={1}>
                     <Stack>
-                        {corr1Components.makeTabs("state", corrTabs)}
-                        {corr1Components.makeTabs("history", corrTabs)}
+                        {onions[0].onionCorr.components.makeTabs("state", corrTabs)}
+                        {onions[0].onionCorr.components.makeTabs("history", corrTabs)}
                         <Center>
-                            {corr1Components.undoRedoButtons}
+                            {onions[0].onionCorr.components.undoRedoButtons}
                             <Space w="sm"/>
                             <InfoHoverCard>
                                 {undoButtonHelpText}
@@ -272,10 +239,10 @@ export function getDemoBM() {
                 </Grid.Col>
                 <Grid.Col span={1}>
                     <Stack>
-                        {asComponents.makeTabs("state", asTabs)}
-                        {asComponents.makeTabs("history", asTabs)}
+                        {onionAs.components.makeTabs("state", asTabs)}
+                        {onionAs.components.makeTabs("history", asTabs)}
                         <Center>
-                            {asComponents.undoRedoButtons}
+                            {onionAs.components.undoRedoButtons}
                             <Space w="sm"/>
                             <InfoHoverCard>
                                 {undoButtonHelpText}
@@ -285,10 +252,10 @@ export function getDemoBM() {
                 </Grid.Col>
                 <Grid.Col span={1}>
                     <Stack>
-                        {corr2Components.makeTabs("state", corrTabs)}
-                        {corr2Components.makeTabs("history", corrTabs)}
+                        {onions[1].onionCorr.components.makeTabs("state", corrTabs)}
+                        {onions[1].onionCorr.components.makeTabs("history", corrTabs)}
                         <Center>
-                            {corr2Components.undoRedoButtons}
+                            {onions[1].onionCorr.components.undoRedoButtons}
                             <Space w="sm"/>
                             <InfoHoverCard>
                                 {undoButtonHelpText}
@@ -300,10 +267,10 @@ export function getDemoBM() {
                 </Grid.Col>
                 <Grid.Col span={1}>
                     <Stack>
-                        {cs2Components.makeTabs("editor", csTabs)}
-                        {cs2Components.makeTabs("history", csTabs)}
+                        {onions[1].onionCs.components.makeTabs("editor", csTabs)}
+                        {onions[1].onionCs.components.makeTabs("history", csTabs)}
                         <Center>
-                            {cs2Components.undoRedoButtons}
+                            {onions[1].onionCs.components.undoRedoButtons}
                             <Space w="sm"/>
                             <InfoHoverCard>
                                 {undoButtonHelpText}
@@ -312,6 +279,7 @@ export function getDemoBM() {
                     </Stack>
                 </Grid.Col>
             </Grid>
+            </OnionContext.Provider>
         </div>);
     }
 }

src/frontend/demos/demo_corr.tsx

@@ -4,7 +4,7 @@ import {SimpleGrid, Text, Title, Stack, Center, Image, Group, Space} from "@mant
 import {PrimitiveRegistry} from "onion/primitive_delta";
 import {mockUuid} from "onion/test_helpers";
 import {OnionContext} from "../onion_context";
-import {newOnion, VersionedModelState, undoButtonHelpText} from "../versioned_model/single_model2";
+import {newOnion, undoButtonHelpText} from "../versioned_model/single_model2";
 import {newCorrespondence, undoButtonHelpTextCorr} from "../versioned_model/correspondence2";
 import {ModalManualRenderer, ManualRendererProps} from "../versioned_model/manual_renderer";
 import {InfoHoverCard} from "../info_hover_card";
@@ -119,7 +119,7 @@ export function getDemoCorr() {
 
     const as = newOnion({readonly: false, primitiveRegistry});
     const cs = newOnion({readonly: false, primitiveRegistry});
-    const corr = newCorrespondence({cs, as, primitiveRegistry});
+    const corr = newCorrespondence({cs, as, primitiveRegistry, generateUUID});
 
     // returns functional react component
     return function () {
@@ -127,7 +127,7 @@ export function getDemoCorr() {
             onUserEdit: (deltas, description) => {
                 const newVersion = onionAs.reducer.createAndGotoNewVersion(deltas, description);
                 if (autoRender) {
-                    onionCorr.reducer.renderExistingVersion(newVersion, setManualRendererState, onionContext);
+                    onionCorr.reducer.renderExistingVersion(newVersion, setManualRendererState);
                 }
             },
         }));
@@ -135,7 +135,7 @@ export function getDemoCorr() {
             onUserEdit: (deltas, description) => {
                 const newVersion = reducer.createAndGotoNewVersion(deltas, description);
                 if (autoParse) {
-                    onionCorr.reducer.parseExistingVersion(newVersion, onionContext);
+                    onionCorr.reducer.parseExistingVersion(newVersion);
                 }
             },
         }));
@@ -145,8 +145,6 @@ export function getDemoCorr() {
         const [autoParse, setAutoParse] = React.useState<boolean>(true);
         const [autoRender, setAutoRender] = React.useState<boolean>(false);
 
-        const onionContext = React.useContext(OnionContext);
-
         const [manualRendererState, setManualRendererState] = React.useState<null | ManualRendererProps>(null);
 
         const csTabs = ["editor", "state", "history", "deltaL1", "deltaL0"];
@@ -154,8 +152,8 @@ export function getDemoCorr() {
         const asTabs = ["state", "history", "deltaL1", "deltaL0"];
 
         return (<div style={{minWidth: 1300}}>
+            <OnionContext.Provider value={{generateUUID, primitiveRegistry}}>
             <ModalManualRenderer manualRendererState={manualRendererState}/>
-
             <SimpleGrid cols={3}>
                 <div>
                     <Group position="apart">
@@ -215,6 +213,7 @@ export function getDemoCorr() {
                     </Stack>
                 </div>
             </SimpleGrid>
+            </OnionContext.Provider>
         </div>);
     }
 }

src/frontend/versioned_model/correspondence2.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import * as Mantine from "@mantine/core";
 import * as Icons from "@tabler/icons";
 
-import {OnionContext, OnionContextType} from "../onion_context";
 import {newOnion} from "./single_model2";
 import {emptyGraph} from "../d3graph/d3graph";
 import {D3GraphUpdater} from "../d3graph/reducers/onion_graph";
@@ -31,7 +30,7 @@ function getGraphState(version: Version, listener?): GraphState {
   return graphState;
 }
 
-export function newCorrespondence({cs, as, primitiveRegistry}) {
+export function newCorrespondence({cs, as, primitiveRegistry, generateUUID}) {
   const {useOnion, ...onion} = newOnion({readonly: true, primitiveRegistry});
 
   // Mapping from correspondence model version to CS and AS model version.
@@ -61,14 +60,14 @@ export function newCorrespondence({cs, as, primitiveRegistry}) {
 
     // Reducer
 
-    const parseExistingVersion = (csVersion: Version, context: OnionContextType) => {
+    const parseExistingVersion = (csVersion: Version) => {
       for (const [csParentVersion, compositeDelta] of csVersion.parents) {
 
         const csDeltas = (compositeDelta as CompositeDelta).deltas;
         const description = compositeDelta.getDescription();
 
         if (!cs2corr.has(csParentVersion)) {
-          parseExistingVersion(csParentVersion, context);
+          parseExistingVersion(csParentVersion);
         }
 
         const corrParentVersion = cs2corr.get(csParentVersion);
@@ -84,7 +83,7 @@ export function newCorrespondence({cs, as, primitiveRegistry}) {
 
         const [csGS, corrGS, asGS] = [csParentVersion, corrParentVersion, asParentVersion].map(v => getGraphState(v));
 
-        const parser = new RountangleParser(context.primitiveRegistry, context.generateUUID);
+        const parser = new RountangleParser(primitiveRegistry, generateUUID);
         const {corrDeltas, asDeltas} = parser.parse(csDeltas, csGS, corrGS, asGS);
         const corrVersion = reducer.createAndGotoNewVersion(corrDeltas, "cs:"+description, corrParentVersion);
         const asVersion = asDeltas.length > 0 ? asReducer.createAndGotoNewVersion(asDeltas, "parse:"+description, asParentVersion) : asParentVersion;
@@ -94,7 +93,7 @@ export function newCorrespondence({cs, as, primitiveRegistry}) {
         as2corr.set(asVersion, corrVersion);
       }
     };
-    const renderExistingVersion = async (asVersion: Version, setManualRendererState, context: OnionContextType) => {
+    const renderExistingVersion = async (asVersion: Version, setManualRendererState) => {
       const [asParentVersion, compositeDelta] = asVersion.parents[0];
 
       const asDeltas = (compositeDelta as CompositeDelta).deltas;
@@ -114,7 +113,7 @@ export function newCorrespondence({cs, as, primitiveRegistry}) {
 
         const [csGS, corrGS, asGS] = [csParentVersion, corrParentVersion, asParentVersion].map(v => getGraphState(v));
 
-        const parser = new RountangleParser(context.primitiveRegistry, context.generateUUID);
+        const parser = new RountangleParser(primitiveRegistry, generateUUID);
         const {corrDeltas, csDeltas, complete} = parser.render(asDeltas, csGS, corrGS, asGS);
 
         function finishRender({corrDeltas, csDeltas}) {
@@ -187,7 +186,7 @@ export function newCorrespondence({cs, as, primitiveRegistry}) {
       }
 
       if (!as2corr.has(asParentVersion)) {
-        return renderExistingVersion(asParentVersion, setManualRendererState, context)
+        return renderExistingVersion(asParentVersion, setManualRendererState)
         .then(render);
       }
       else {
@@ -198,19 +197,17 @@ export function newCorrespondence({cs, as, primitiveRegistry}) {
     // React components
 
     const getParseButton = (csVersion, dir: "left"|"right" = "right") => {
-      const onionContext = React.useContext<OnionContextType>(OnionContext);
       return <Mantine.Button compact
           disabled={cs2corr.has(csVersion)}
-          onClick={() => parseExistingVersion(csVersion, onionContext)}
+          onClick={() => parseExistingVersion(csVersion)}
           rightIcon={dir === "right" ? <Icons.IconChevronsRight/>: null}
           leftIcon={dir === "left" ? <Icons.IconChevronsLeft/>: null}
         >Parse</Mantine.Button>;
     };
     const getRenderButton = (asVersion, setManualRendererState, dir: "left"|"right" = "left") => {
-      const onionContext = React.useContext<OnionContextType>(OnionContext);
       return <Mantine.Button compact
           disabled={as2corr.has(asVersion)}
-          onClick={() => renderExistingVersion(asVersion, setManualRendererState, onionContext)}
+          onClick={() => renderExistingVersion(asVersion, setManualRendererState)}
           rightIcon={dir === "right" ? <Icons.IconChevronsRight/>: null}
           leftIcon={dir === "left" ? <Icons.IconChevronsLeft/>: null}
         >Render</Mantine.Button>;

src/frontend/versioned_model/single_model2.tsx

@@ -266,7 +266,7 @@ export function newOnion({readonly, primitiveRegistry}) {
         graph={state.graph}
         graphState={graphState}
         onUserEdit={callbacks.onUserEdit}
-      />,
+      />
     </InfoHoverCardOverlay>;
 
     const makeUndoOrRedoButton = (parentsOrChildren, text, leftIcon?, rightIcon?, callback?) => {