extra welcome page added, order changed

src/frontend/app.tsx

@@ -9,10 +9,12 @@ import {demo_PD_description, getDemoPD} from "./demo_pd";
 import {demo_Corr_description, getDemoCorr} from "./demo_corr";
 import {demo_BM_description, getDemoBM} from "./demo_bm";
 import {Styledtabs} from "./styledtabs";
-import {demo_Start_description, getDemoStart} from "./demo_start";
+import {demo_Editor_description, getDemoEditor} from "./demo_editor";
+import {demo_Welcome_description, getWelcome} from "./welcome";
 
 export function getApp() {
-    const DemoStart = getDemoStart();
+    const Welcome = getWelcome();
+    const DemoEditor = getDemoEditor();
     const DemoPD = getDemoPD();
     const DemoCorr = getDemoCorr();
     const DemoBM = getDemoBM();
@@ -23,15 +25,16 @@ export function getApp() {
 
         return <>
             <MantineProvider theme={{colorScheme: preferredColorScheme}} withGlobalStyles withNormalizeCSS>
-                <Styledtabs defaultValue="start" orientation="vertical" style={{height: '100%'}}>
+                <Styledtabs defaultValue="welcome" orientation="vertical" style={{height: '100%'}}>
                     <Allotment maxSize={'50%'}>
                         <Allotment.Pane preferredSize={250} minSize={250}>
                             <Stack style={{height: '100%', direction: 'column', gap: '0px'}}>
                                 <Title order={4} style={{paddingLeft: '5px'}}>Pick a demo:</Title>
                                 <Tabs.List>
-                                    <Tabs.Tab style={{width: '100%', border: 0}} value="start">Rountangle
-                                        Editor</Tabs.Tab>
+                                    <Tabs.Tab style={{width: '100%', border: 0}} value="welcome">Welcome</Tabs.Tab>
                                     <Tabs.Tab style={{width: '100%', border: 0}} value="pd">Primitive Delta</Tabs.Tab>
+                                    <Tabs.Tab style={{width: '100%', border: 0}} value="editor">Rountangle
+                                        Editor</Tabs.Tab>
                                     <Tabs.Tab style={{width: '100%', border: 0}} value="corr">Correspondence</Tabs.Tab>
                                     <Tabs.Tab style={{width: '100%', border: 0}} value="bm">Blended Modeling</Tabs.Tab>
                                 </Tabs.List>
@@ -40,12 +43,15 @@ export function getApp() {
                                     {/* @ts-ignore */}
                                     <ScrollArea scrollbarSize='7px' style={{height: '100%'}}>
                                         <div style={{paddingRight: '10px'}}>
-                                            <Tabs.Panel value="start" style={{height: '100%'}}>
-                                                {demo_Start_description}
+                                            <Tabs.Panel value="welcome" style={{height: '100%'}}>
+                                                {demo_Welcome_description}
                                             </Tabs.Panel>
                                             <Tabs.Panel value="pd" style={{height: '100%'}}>
                                                 {demo_PD_description}
                                             </Tabs.Panel>
+                                            <Tabs.Panel value="editor" style={{height: '100%'}}>
+                                                {demo_Editor_description}
+                                            </Tabs.Panel>
                                             <Tabs.Panel value="corr" style={{height: '100%'}}>
                                                 {demo_Corr_description}
                                             </Tabs.Panel>
@@ -62,22 +68,26 @@ export function getApp() {
                                 {/* @ts-ignore */}
                                 <ScrollArea scrollbarSize='7px' style={{height: '100%'}}>
                                     <div style={{padding: '10px 10px 10px 10px'}}>
-                                    <Tabs.Panel value="start">
-                                        <DemoStart/>
-                                    </Tabs.Panel>
-                                    <Tabs.Panel value="pd">
-                                        <DemoPD/>
-                                    </Tabs.Panel>
-                                    <Tabs.Panel value="corr">
-                                        <DemoCorr/>
-                                    </Tabs.Panel>
-                                    <Tabs.Panel value="bm" style={{height: '100%'}}>
-                                        <DemoBM/>
-                                    </Tabs.Panel>
-                                    <Anchor href="https://msdl.uantwerpen.be/git/jexelmans/onioncollab" target="_blank"
-                                            style={{position: "absolute", bottom: 8, right: 8}}>
-                                        <IconExternalLink size={14} style={{marginRight: 4}}/>Source Code
-                                    </Anchor>
+                                        <Tabs.Panel value="welcome">
+                                            <Welcome/>
+                                        </Tabs.Panel>
+                                        <Tabs.Panel value="pd">
+                                            <DemoPD/>
+                                        </Tabs.Panel>
+                                        <Tabs.Panel value="editor">
+                                            <DemoEditor/>
+                                        </Tabs.Panel>
+                                        <Tabs.Panel value="corr">
+                                            <DemoCorr/>
+                                        </Tabs.Panel>
+                                        <Tabs.Panel value="bm" style={{height: '100%'}}>
+                                            <DemoBM/>
+                                        </Tabs.Panel>
+                                        <Anchor href="https://msdl.uantwerpen.be/git/jexelmans/onioncollab"
+                                                target="_blank"
+                                                style={{position: "absolute", bottom: 8, right: 8}}>
+                                            <IconExternalLink size={14} style={{marginRight: 4}}/>Source Code
+                                        </Anchor>
                                     </div>
                                 </ScrollArea>
                             </div>

src/frontend/demo_bm.tsx

@@ -1,5 +1,21 @@
 import * as React from "react";
-import {SimpleGrid, Text, Title, Group, Stack, Button, Space, Textarea, Tabs, HoverCard, ActionIcon, Center, Switch, Grid, Modal} from "@mantine/core";
+import {
+    SimpleGrid,
+    Text,
+    Title,
+    Group,
+    Stack,
+    Button,
+    Space,
+    Textarea,
+    Tabs,
+    HoverCard,
+    ActionIcon,
+    Center,
+    Switch,
+    Grid,
+    Modal
+} from "@mantine/core";
 
 import {PrimitiveRegistry} from "../onion/primitive_delta";
 import {mockUuid} from "../onion/test_helpers";
@@ -9,179 +25,184 @@ import {newCorrespondence} from "./correspondence";
 import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
 
 export const demo_BM_description =
-    <Text>
-      Text Number 1
-    </Text>;
+    <>
+        <Title order={4}>
+            Blended Modeling
+        </Title>
+        <Text>
+            To be done...
+        </Text>
+    </>;
 
 export function getDemoBM() {
-  const generateUUID = mockUuid();
-  const primitiveRegistry = new PrimitiveRegistry();
-
-  const commonStuff = {generateUUID, primitiveRegistry};
-
-  const as = newVersionedModel({readonly: false, ...commonStuff});
-  const cs1 = newVersionedModel({readonly: false, ...commonStuff});
-  const cs2 = newVersionedModel({readonly: false, ...commonStuff});
-  const corr1 = newCorrespondence({cs: cs1, as, ...commonStuff});
-  const corr2 = newCorrespondence({cs: cs2, as, ...commonStuff});
-
-  const {getModalManualRenderer} = newManualRenderer(commonStuff);
-
-  // 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);
-
-    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 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 asComponents = as.getReactComponents(asState, {
-      onUserEdit: (deltas, description) => {
-        const newVersion = asReducer.createAndGotoNewVersion(deltas, description);
-        if (autoRender1) {
-          corr1Reducer.renderExistingVersion(newVersion, setManualRendererState);
+    const generateUUID = mockUuid();
+    const primitiveRegistry = new PrimitiveRegistry();
+
+    const commonStuff = {generateUUID, primitiveRegistry};
+
+    const as = newVersionedModel({readonly: false, ...commonStuff});
+    const cs1 = newVersionedModel({readonly: false, ...commonStuff});
+    const cs2 = newVersionedModel({readonly: false, ...commonStuff});
+    const corr1 = newCorrespondence({cs: cs1, as, ...commonStuff});
+    const corr2 = newCorrespondence({cs: cs2, as, ...commonStuff});
+
+    const {getModalManualRenderer} = newManualRenderer(commonStuff);
+
+    // 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);
+
+        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 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 asComponents = as.getReactComponents(asState, {
+            onUserEdit: (deltas, description) => {
+                const newVersion = asReducer.createAndGotoNewVersion(deltas, description);
+                if (autoRender1) {
+                    corr1Reducer.renderExistingVersion(newVersion, setManualRendererState);
+                }
+                if (autoRender2) {
+                    corr2Reducer.renderExistingVersion(newVersion, setManualRendererState);
+                }
+            },
+            onUndoClicked: asReducer.undo,
+            onRedoClicked: asReducer.redo,
+            onVersionClicked: asReducer.gotoVersion,
+        });
+
+        const cs1Components = cs1.getReactComponents(cs1State, {
+            onUserEdit: (deltas, description) => {
+                const newVersion = cs1Reducer.createAndGotoNewVersion(deltas, description);
+                if (autoParse1) {
+                    corr1Reducer.parseExistingVersion(newVersion);
+                }
+            },
+            onUndoClicked: cs1Reducer.undo,
+            onRedoClicked: cs1Reducer.redo,
+            onVersionClicked: cs1Reducer.gotoVersion,
+        });
+        const cs2Components = cs2.getReactComponents(cs2State, {
+            onUserEdit: (deltas, description) => {
+                const newVersion = cs2Reducer.createAndGotoNewVersion(deltas, description);
+                if (autoParse2) {
+                    corr2Reducer.parseExistingVersion(newVersion);
+                }
+            },
+            onUndoClicked: cs2Reducer.undo,
+            onRedoClicked: cs2Reducer.redo,
+            onVersionClicked: cs2Reducer.gotoVersion,
+        });
+
+        const corr1Components = corr1.getReactComponents(corr1State, {
+            onUndoClicked: corr1Reducer.gotoVersion,
+            onRedoClicked: corr1Reducer.gotoVersion,
+            onVersionClicked: corr1Reducer.gotoVersion,
+        });
+        const corr2Components = corr2.getReactComponents(corr2State, {
+            onUndoClicked: corr2Reducer.gotoVersion,
+            onRedoClicked: corr2Reducer.gotoVersion,
+            onVersionClicked: corr2Reducer.gotoVersion,
+        });
+
+        const csTabs = ["editor", "state", "history", "dependencyL1", "dependencyL0"];
+        const corrTabs = ["state", "history", "dependencyL1", "dependencyL0"];
+        const asTabs = ["state", "history", "dependencyL1", "dependencyL0"];
+
+        function centeredCaption(text) {
+            return <Center><Title order={4}>{text}</Title></Center>;
         }
-        if (autoRender2) {
-          corr2Reducer.renderExistingVersion(newVersion, setManualRendererState);
-        }
-      },
-      onUndoClicked: asReducer.undo,
-      onRedoClicked: asReducer.redo,
-      onVersionClicked: asReducer.gotoVersion,
-    });
-
-    const cs1Components = cs1.getReactComponents(cs1State, {
-      onUserEdit: (deltas, description) => {
-        const newVersion = cs1Reducer.createAndGotoNewVersion(deltas, description);
-        if (autoParse1) {
-          corr1Reducer.parseExistingVersion(newVersion);
-        }
-      },
-      onUndoClicked: cs1Reducer.undo,
-      onRedoClicked: cs1Reducer.redo,
-      onVersionClicked: cs1Reducer.gotoVersion,
-    });
-    const cs2Components = cs2.getReactComponents(cs2State, {
-      onUserEdit: (deltas, description) => {
-        const newVersion = cs2Reducer.createAndGotoNewVersion(deltas, description);
-        if (autoParse2) {
-          corr2Reducer.parseExistingVersion(newVersion);
-        }
-      },
-      onUndoClicked: cs2Reducer.undo,
-      onRedoClicked: cs2Reducer.redo,
-      onVersionClicked: cs2Reducer.gotoVersion,
-    });
-
-    const corr1Components = corr1.getReactComponents(corr1State, {
-      onUndoClicked: corr1Reducer.gotoVersion,
-      onRedoClicked: corr1Reducer.gotoVersion,
-      onVersionClicked: corr1Reducer.gotoVersion,
-    });
-    const corr2Components = corr2.getReactComponents(corr2State, {
-      onUndoClicked: corr2Reducer.gotoVersion,
-      onRedoClicked: corr2Reducer.gotoVersion,
-      onVersionClicked: corr2Reducer.gotoVersion,
-    });
-
-    const csTabs = ["editor", "state", "history", "dependencyL1", "dependencyL0"];
-    const corrTabs = ["state", "history", "dependencyL1", "dependencyL0"];
-    const asTabs = ["state", "history", "dependencyL1", "dependencyL0"];
-
-    function centeredCaption(text) {
-      return <Center><Title order={4}>{text}</Title></Center>;
-    }
 
-    return (<div style={{minWidth:2200}}>
-      {getModalManualRenderer(manualRendererState)}
-
-      <Grid columns={5} grow>
-        <Grid.Col span={1}>
-          {centeredCaption("Concrete Syntax 1")}
-        </Grid.Col>
-        <Grid.Col span={1}>
-          {centeredCaption("Correspondence 1")}
-        </Grid.Col>
-        <Grid.Col span={1}>
-          {centeredCaption("Abstract Syntax")}
-        </Grid.Col>
-        <Grid.Col span={1}>
-          {centeredCaption("Correspondence 2")}
-        </Grid.Col>
-        <Grid.Col span={1}>
-          {centeredCaption("Concrete Syntax 2")}
-        </Grid.Col>
-
-        <Grid.Col span={1}>
-          <Group position="right">
-            {corr1Reducer.getCaptionWithParseButton(autoParse1, setAutoParse1, cs1.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")}
-          </Group>
-        </Grid.Col>
-        <Grid.Col span={1}>
-        </Grid.Col>
-        <Grid.Col span={1}>
-          <Group position="left">
-            {corr2Reducer.getCaptionWithParseButton(autoParse2, setAutoParse2, cs2.getCurrentVersion(), "left")}
-          </Group>
-        </Grid.Col>
-
-        <Grid.Col span={1}>
-          <Stack>
-            {cs1Components.makeTabs("editor", csTabs)}
-            {cs1Components.makeTabs("history", csTabs)}
-            <Center>{cs1Components.undoRedoButtons}</Center>
-          </Stack>
-        </Grid.Col>
-        <Grid.Col span={1}>
-          <Stack>
-            {corr1Components.makeTabs("state", corrTabs)}
-            {corr1Components.makeTabs("history", corrTabs)}
-            <Center>{corr1Components.undoRedoButtons}</Center>
-          </Stack>
-        </Grid.Col>
-        <Grid.Col span={1}>
-          <Stack>
-            {asComponents.makeTabs("state", asTabs)}
-            {asComponents.makeTabs("history", asTabs)}
-            <Center>{asComponents.undoRedoButtons}</Center>
-          </Stack>
-        </Grid.Col>
-        <Grid.Col span={1}>
-          <Stack>
-            {corr2Components.makeTabs("state", corrTabs)}
-            {corr2Components.makeTabs("history", corrTabs)}
-            <Center>{corr2Components.undoRedoButtons}</Center>
-          </Stack>
-        </Grid.Col>
-        <Grid.Col span={1}>
-          <Stack>
-            {cs2Components.makeTabs("editor", csTabs)}
-            {cs2Components.makeTabs("history", csTabs)}
-            <Center>{cs2Components.undoRedoButtons}</Center>
-          </Stack>
-        </Grid.Col>
-      </Grid>
-    </div>);
-  }
+        return (<div style={{minWidth: 2200}}>
+            {getModalManualRenderer(manualRendererState)}
+
+            <Grid columns={5} grow>
+                <Grid.Col span={1}>
+                    {centeredCaption("Concrete Syntax 1")}
+                </Grid.Col>
+                <Grid.Col span={1}>
+                    {centeredCaption("Correspondence 1")}
+                </Grid.Col>
+                <Grid.Col span={1}>
+                    {centeredCaption("Abstract Syntax")}
+                </Grid.Col>
+                <Grid.Col span={1}>
+                    {centeredCaption("Correspondence 2")}
+                </Grid.Col>
+                <Grid.Col span={1}>
+                    {centeredCaption("Concrete Syntax 2")}
+                </Grid.Col>
+
+                <Grid.Col span={1}>
+                    <Group position="right">
+                        {corr1Reducer.getCaptionWithParseButton(autoParse1, setAutoParse1, cs1.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")}
+                    </Group>
+                </Grid.Col>
+                <Grid.Col span={1}>
+                </Grid.Col>
+                <Grid.Col span={1}>
+                    <Group position="left">
+                        {corr2Reducer.getCaptionWithParseButton(autoParse2, setAutoParse2, cs2.getCurrentVersion(), "left")}
+                    </Group>
+                </Grid.Col>
+
+                <Grid.Col span={1}>
+                    <Stack>
+                        {cs1Components.makeTabs("editor", csTabs)}
+                        {cs1Components.makeTabs("history", csTabs)}
+                        <Center>{cs1Components.undoRedoButtons}</Center>
+                    </Stack>
+                </Grid.Col>
+                <Grid.Col span={1}>
+                    <Stack>
+                        {corr1Components.makeTabs("state", corrTabs)}
+                        {corr1Components.makeTabs("history", corrTabs)}
+                        <Center>{corr1Components.undoRedoButtons}</Center>
+                    </Stack>
+                </Grid.Col>
+                <Grid.Col span={1}>
+                    <Stack>
+                        {asComponents.makeTabs("state", asTabs)}
+                        {asComponents.makeTabs("history", asTabs)}
+                        <Center>{asComponents.undoRedoButtons}</Center>
+                    </Stack>
+                </Grid.Col>
+                <Grid.Col span={1}>
+                    <Stack>
+                        {corr2Components.makeTabs("state", corrTabs)}
+                        {corr2Components.makeTabs("history", corrTabs)}
+                        <Center>{corr2Components.undoRedoButtons}</Center>
+                    </Stack>
+                </Grid.Col>
+                <Grid.Col span={1}>
+                    <Stack>
+                        {cs2Components.makeTabs("editor", csTabs)}
+                        {cs2Components.makeTabs("history", csTabs)}
+                        <Center>{cs2Components.undoRedoButtons}</Center>
+                    </Stack>
+                </Grid.Col>
+            </Grid>
+        </div>);
+    }
 }

src/frontend/demo_corr.tsx

@@ -10,129 +10,135 @@ import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
 import {makeInfoHoverCardIcon} from "./help_icons";
 
 export const demo_Corr_description =
-    <Text>
-      Text Number 1
-    </Text>;
+    <>
+        <Title order={4}>
+            Correspondence Model
+        </Title>
+        <Text>
+            To be done.
+        </Text>
+    </>;
 
 export function getDemoCorr() {
-  const generateUUID = mockUuid();
-  const primitiveRegistry = new PrimitiveRegistry();
-
-  const commonStuff = {generateUUID, primitiveRegistry};
-
-  const as = newVersionedModel({readonly: false, ...commonStuff});
-  const cs = newVersionedModel({readonly: false, ...commonStuff});
-  const corr = newCorrespondence({cs, as, ...commonStuff});
-
-  const {getModalManualRenderer} = newManualRenderer(commonStuff);
-
-  // returns functional react component
-  return function() {
-    const [asState, setAsState] = React.useState<VersionedModelState>(as.initialState);
-    const [csState, setCsState] = React.useState<VersionedModelState>(cs.initialState);
-    const [corrState, setCorrState] = React.useState<VersionedModelState>(corr.initialState);
-
-    const [autoParse, setAutoParse] = React.useState<boolean>(true);
-    const [autoRender, setAutoRender] = React.useState<boolean>(false);
-
-    const [manualRendererState, setManualRendererState] = React.useState<null | ManualRendererProps>(null);
-
-    const asReducer = as.getReducer(setAsState);
-    const csReducer = cs.getReducer(setCsState);
-    const corrReducer = corr.getReducer(setCorrState, csReducer, asReducer);
-
-    const csComponents = cs.getReactComponents(csState, {
-      onUserEdit: (deltas, description) => {
-        const newVersion = csReducer.createAndGotoNewVersion(deltas, description);
-        if (autoParse) {
-          corrReducer.parseExistingVersion(newVersion);
-        }
-      },
-      onUndoClicked: csReducer.undo,
-      onRedoClicked: csReducer.redo,
-      onVersionClicked: csReducer.gotoVersion,
-    });
-    const corrComponents = corr.getReactComponents(corrState, {
-      onUndoClicked: corrReducer.gotoVersion,
-      onRedoClicked: corrReducer.gotoVersion,
-      onVersionClicked: corrReducer.gotoVersion,
-    });
-    const asComponents = as.getReactComponents(asState, {
-      onUserEdit: (deltas, description) => {
-        const newVersion = asReducer.createAndGotoNewVersion(deltas, description);
-        if (autoRender) {
-          corrReducer.renderExistingVersion(newVersion, setManualRendererState);
-        }
-      },
-      onUndoClicked: asReducer.undo,
-      onRedoClicked: asReducer.redo,
-      onVersionClicked: asReducer.gotoVersion,
-    });
-
-    const csTabs = ["editor", "state", "history", "dependencyL1", "dependencyL0"];
-    const corrTabs = ["state", "history", "dependencyL1", "dependencyL0"];
-    const asTabs = ["state", "history", "dependencyL1", "dependencyL0"];
-
-    const undoButtonHelpText = "Use the Undo/Redo buttons or the History panel to navigate to any version.";
-
-    return (<div style={{minWidth:1300}}>
-      {getModalManualRenderer(manualRendererState)}
-
-      <SimpleGrid cols={3}>
-        <div>
-          <Group position="apart">
-            <Title order={4}>Concrete Syntax</Title>
-            {corrReducer.getCaptionWithParseButton(
-              autoParse, setAutoParse, cs.getCurrentVersion())}
-          </Group>
-          <Space h="sm" />
-          <Stack>
-            {csComponents.makeTabs("editor", csTabs)}
-            {csComponents.makeTabs("history", csTabs)}
-            <Center>
-              {csComponents.undoRedoButtons}
-              <Space w="sm"/>
-              {makeInfoHoverCardIcon(undoButtonHelpText)}
-            </Center>
-          </Stack>
-        </div>
-        <div>
-          <Group position="center">
-            <Title order={4}>Correspondence</Title>
-          </Group>
-          <Space h="sm" />
-          <Stack>
-            {corrComponents.makeTabs("state", corrTabs)}
-            {corrComponents.makeTabs("history", corrTabs)}
-            <Center>
-              {corrComponents.undoRedoButtons}
-              <Space w="sm"/>
-              {makeInfoHoverCardIcon(<>
-                {undoButtonHelpText}
-                <Space h="sm"/>
-                Navigating to a version in the correspondence model, will also navigate to the embedded concrete and abstract syntax model versions.
-              </>)}
-            </Center>
-          </Stack>
-        </div>
-        <div>
-          <Group position="apart">
-            {corrReducer.getCaptionWithRenderButton(
-              autoRender, setAutoRender, as.getCurrentVersion(), setManualRendererState)}
-            <Title order={4}>Abstract Syntax</Title>
-          </Group>
-          <Space h="sm" />
-          <Stack>
-            {asComponents.makeTabs("state", asTabs)}
-            {asComponents.makeTabs("history", asTabs)}
-            <Center>
-              {asComponents.undoRedoButtons}
-              <Space w="sm"/>
-              {makeInfoHoverCardIcon(undoButtonHelpText)}
-            </Center>
-          </Stack>
-        </div>
-      </SimpleGrid>
-    </div>);
-  }
+    const generateUUID = mockUuid();
+    const primitiveRegistry = new PrimitiveRegistry();
+
+    const commonStuff = {generateUUID, primitiveRegistry};
+
+    const as = newVersionedModel({readonly: false, ...commonStuff});
+    const cs = newVersionedModel({readonly: false, ...commonStuff});
+    const corr = newCorrespondence({cs, as, ...commonStuff});
+
+    const {getModalManualRenderer} = newManualRenderer(commonStuff);
+
+    // returns functional react component
+    return function () {
+        const [asState, setAsState] = React.useState<VersionedModelState>(as.initialState);
+        const [csState, setCsState] = React.useState<VersionedModelState>(cs.initialState);
+        const [corrState, setCorrState] = React.useState<VersionedModelState>(corr.initialState);
+
+        const [autoParse, setAutoParse] = React.useState<boolean>(true);
+        const [autoRender, setAutoRender] = React.useState<boolean>(false);
+
+        const [manualRendererState, setManualRendererState] = React.useState<null | ManualRendererProps>(null);
+
+        const asReducer = as.getReducer(setAsState);
+        const csReducer = cs.getReducer(setCsState);
+        const corrReducer = corr.getReducer(setCorrState, csReducer, asReducer);
+
+        const csComponents = cs.getReactComponents(csState, {
+            onUserEdit: (deltas, description) => {
+                const newVersion = csReducer.createAndGotoNewVersion(deltas, description);
+                if (autoParse) {
+                    corrReducer.parseExistingVersion(newVersion);
+                }
+            },
+            onUndoClicked: csReducer.undo,
+            onRedoClicked: csReducer.redo,
+            onVersionClicked: csReducer.gotoVersion,
+        });
+        const corrComponents = corr.getReactComponents(corrState, {
+            onUndoClicked: corrReducer.gotoVersion,
+            onRedoClicked: corrReducer.gotoVersion,
+            onVersionClicked: corrReducer.gotoVersion,
+        });
+        const asComponents = as.getReactComponents(asState, {
+            onUserEdit: (deltas, description) => {
+                const newVersion = asReducer.createAndGotoNewVersion(deltas, description);
+                if (autoRender) {
+                    corrReducer.renderExistingVersion(newVersion, setManualRendererState);
+                }
+            },
+            onUndoClicked: asReducer.undo,
+            onRedoClicked: asReducer.redo,
+            onVersionClicked: asReducer.gotoVersion,
+        });
+
+        const csTabs = ["editor", "state", "history", "dependencyL1", "dependencyL0"];
+        const corrTabs = ["state", "history", "dependencyL1", "dependencyL0"];
+        const asTabs = ["state", "history", "dependencyL1", "dependencyL0"];
+
+        const undoButtonHelpText = "Use the Undo/Redo buttons or the History panel to navigate to any version.";
+
+        return (<div style={{minWidth: 1300}}>
+            {getModalManualRenderer(manualRendererState)}
+
+            <SimpleGrid cols={3}>
+                <div>
+                    <Group position="apart">
+                        <Title order={4}>Concrete Syntax</Title>
+                        {corrReducer.getCaptionWithParseButton(
+                            autoParse, setAutoParse, cs.getCurrentVersion())}
+                    </Group>
+                    <Space h="sm"/>
+                    <Stack>
+                        {csComponents.makeTabs("editor", csTabs)}
+                        {csComponents.makeTabs("history", csTabs)}
+                        <Center>
+                            {csComponents.undoRedoButtons}
+                            <Space w="sm"/>
+                            {makeInfoHoverCardIcon(undoButtonHelpText)}
+                        </Center>
+                    </Stack>
+                </div>
+                <div>
+                    <Group position="center">
+                        <Title order={4}>Correspondence</Title>
+                    </Group>
+                    <Space h="sm"/>
+                    <Stack>
+                        {corrComponents.makeTabs("state", corrTabs)}
+                        {corrComponents.makeTabs("history", corrTabs)}
+                        <Center>
+                            {corrComponents.undoRedoButtons}
+                            <Space w="sm"/>
+                            {makeInfoHoverCardIcon(<>
+                                {undoButtonHelpText}
+                                <Space h="sm"/>
+                                Navigating to a version in the correspondence model, will also navigate to the embedded
+                                concrete and abstract syntax model versions.
+                            </>)}
+                        </Center>
+                    </Stack>
+                </div>
+                <div>
+                    <Group position="apart">
+                        {corrReducer.getCaptionWithRenderButton(
+                            autoRender, setAutoRender, as.getCurrentVersion(), setManualRendererState)}
+                        <Title order={4}>Abstract Syntax</Title>
+                    </Group>
+                    <Space h="sm"/>
+                    <Stack>
+                        {asComponents.makeTabs("state", asTabs)}
+                        {asComponents.makeTabs("history", asTabs)}
+                        <Center>
+                            {asComponents.undoRedoButtons}
+                            <Space w="sm"/>
+                            {makeInfoHoverCardIcon(undoButtonHelpText)}
+                        </Center>
+                    </Stack>
+                </div>
+            </SimpleGrid>
+        </div>);
+    }
 }

src/frontend/demo_start.tsx

@@ -11,20 +11,11 @@ import {makeInfoHoverCardIcon} from "./help_icons";
 import {MdOutlineDraw} from "react-icons/md";
 import {Actionblock, Resultblock} from "./blocks";
 
-export const demo_Start_description =
+export const demo_Editor_description =
     <>
         <Title order={4}>
-            Welcome to our demonstrator!
+            Rountangle Editor
         </Title>
-        <Text>
-            First, we would like to show the basic possibilities of the graphical editor and then dive into the
-            different aspects of our new collaboration framework approach step by step.
-        </Text>
-        <Text>
-            Every block with an <Text span c='darkorange'>orange</Text> mark on the left side contains an action that
-            you should do. Each block with a <Text span c="royalblue">blue</Text> border describes what you can observe,
-            once the action has been executed.
-        </Text>
         <Text>
             Next to this text you can see three columns <strong>Rountangle Editor</strong>, <strong>Deltas</strong>,
             and <strong>State Graph</strong>. In the Rountangle Editor, you can create (unnamed) rountangles by
@@ -69,7 +60,7 @@ export const demo_Start_description =
         </Text>
     </>;
 
-export function getDemoStart() {
+export function getDemoEditor() {
     const generateUUID = mockUuid();
     const primitiveRegistry = new PrimitiveRegistry();
 

src/frontend/welcome.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as Icons from "@tabler/icons";
+import {
+    Title,
+    Text,
+    Grid,
+    Button,
+    SimpleGrid,
+    Group,
+    Center,
+    ScrollArea,
+    Card,
+    CloseButton,
+    Divider,
+    Space
+} from "@mantine/core";
+
+import {PrimitiveRegistry} from "../onion/primitive_delta";
+import {mockUuid} from "../onion/test_helpers";
+import {Actionblock, Resultblock} from "./blocks";
+
+export const demo_Welcome_description =
+    <>
+        <Title order={4}>
+            Welcome to our demonstrator!
+        </Title>
+        <Text>
+            First, we would like to show the basic possibilities of the graphical editor and then dive into the
+            different aspects of our new collaboration framework approach step by step.
+        </Text>
+        <Text>
+            Every block with an <Text span c='darkorange'>orange</Text> mark on the left side contains an action
+            that
+            you should do. Each block with a <Text span c="royalblue">blue</Text> border describes what you can
+            observe,
+            once the action has been executed.
+        </Text>
+        <Text fw={700}>
+            Example:
+        </Text>
+        <Actionblock>
+            1. Perform this action!
+        </Actionblock>
+        <Resultblock>
+            This block describes the generated output.
+        </Resultblock>
+        <Space h='5px'/>
+        <Text>
+            Please select one of the demos above. We recommend that you complete the demos in the order listed.
+        </Text>
+    </>;
+
+
+import {
+    newVersionedModel,
+    VersionedModelState,
+} from "./versioned_model";
+
+export function getWelcome() {
+    return function () {
+        return <></>
+    }
+}
+