first draft of all descriptions.

src/frontend/demo_bm.tsx

@@ -14,7 +14,7 @@ import {
     Center,
     Switch,
     Grid,
-    Modal
+    Modal, Image
 } from "@mantine/core";
 
 import {PrimitiveRegistry} from "../onion/primitive_delta";
@@ -23,6 +23,10 @@ import {mockUuid} from "../onion/test_helpers";
 import {newVersionedModel, VersionedModelState} from "./versioned_model";
 import {newCorrespondence} from "./correspondence";
 import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
+import corr_csImage from "./assets/corr_cs.svg";
+import corr_asImage from "./assets/corr_as.svg";
+import corr_corrImage from "./assets/corr_corr.svg";
+import {Actionblock, Resultblock} from "./blocks";
 
 export const demo_BM_description =
     <>
@@ -30,8 +34,97 @@ export const demo_BM_description =
             Blended Modeling
         </Title>
         <Text>
-            To be done...
+            This demo now introduces a second concrete syntax which is for sake of simplicity the same as the first one:
+            a rountangle editor.
+            The difference to the Correspondence demo is that the AS can not be edited directly anymore, but only
+            indirectly via one of the two concrete syntaxes.
         </Text>
+        <Text>
+            The connection between the different canvas on the right side is as follows:<br/>
+            CS1 &harr; Corr1 &harr; AS &harr; Corr2 &harr; CS2<br/>
+            Thus, we have now two Correspondence models that both creates correspondences between elements of the
+            central AS and their linked CS.
+        </Text>
+        <Text>
+            In consequence, now we also have two independent parsing and rendering functions for each CS that can be
+            triggered automatically or manually.
+        </Text>
+        <Text>
+            With this scenario we simulate a blended modeling environment: One can create rountangles in the first CS.
+            All changes are reflected immediately in the AS. At some point, the user switches over to the other CS. At
+            this point, the rendering from the AS to the second CS has to be triggered and, if necessary, missing
+            information (e. g., layout information) has to be entered.
+        </Text>
+        <Text>
+            Note, that the layout in the second CS can (and most likely will) differ from the layout of the first CS.
+            Nevertheless, both models are parsed into the same AS model and are thus semantically equivalent.
+        </Text>
+        <Text>
+            From now on, the user can edit the rountangles in the second CS and - if the auto parsing is switched on -
+            all changes are reflected in the AS.
+            At some point, the user can switch back to CS 1, likely involving another rendering step to enter missing
+            information.
+        </Text>
+        <Text>
+            Since all models are built upon our versioning approach, all changes are kept in Deltas and thus, each step
+            can be undone/redone, one can jump to any previous version on any side and all conflicts on any level are
+            detected and properly handled. This includes simultaneous changes on both sides! That means, collaborative
+            blended modeling is directly supported!
+        </Text>
+        <Text>
+            Switching off the "auto parsing" simulates asynchronous collaboration where several changes are accumulated
+            and applied to the AS at once at a later point in time.
+        </Text>
+        <Text>
+            One possible walk-through of this demo is very similar to the steps of the Correspondence demo:
+        </Text>
+        <Actionblock>
+            1. Create a Rountangle!
+        </Actionblock>
+        <Resultblock>
+            Automatic parsing recognizes this rountangle as a state in the AS with ID = 2 and connects both via the
+            Correspondence model by introducing a "connection node" with ID = 1.
+        </Resultblock>
+        <Resultblock>
+            As visualized in the above picture, the Correspondence model contains the complete CS and AS model plus some
+            more information.
+        </Resultblock>
+        <Actionblock>
+            2. Draw a second Rountangle and move and resize it such that the new rountangle completely surrounds the
+            first one!
+        </Actionblock>
+        <Resultblock>
+            The parser recognizes the (visual) containment relation between the two rountangles and translates this to a
+            "has-parent" relation between the two (abstract) states. Again, you can find this relation also in the
+            correspondence model.
+        </Resultblock>
+        <Actionblock>
+            3. Press the "Render &gt;&gt; "-button at the top of the AS!
+        </Actionblock>
+        <Resultblock>
+            The rendering process detects missing information while it tries to create a model for the second CS.
+        </Resultblock>
+        <Resultblock>
+            A new dialog appears where one can position/size the rectangles in the second CS.
+        </Resultblock>
+        <Actionblock>
+            4. Position the new state according to the given constraints!
+        </Actionblock>
+        <Resultblock>
+            Your CS 2 model is updated and the rountangles are visualized accordingly.
+        </Resultblock>
+        <Actionblock>
+            5. Add, move, resize, or delete the rountangles in either of the two CS and press from time to time the
+            "Render"-buttons for any of the both directions.
+        </Actionblock>
+        <Resultblock>
+            The changes are exchanged properly, where necessary, the system asks for missing information.
+        </Resultblock>
+        <Resultblock>
+            Any conflicting Deltas are identified and the user has to choose, which of the non-conflicting version he/she wants to apply.
+            A merging view that allows to combine changes (merge action) is in preparation.
+        </Resultblock>
+        <Space h="20px"/>
     </>;
 
 export function getDemoBM() {

src/frontend/demo_corr.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {SimpleGrid, Text, Title, Stack, Center, Switch, Group, Space} from "@mantine/core";
+import {SimpleGrid, Text, Title, Stack, Center, Image, Group, Space} from "@mantine/core";
 
 import {PrimitiveRegistry} from "../onion/primitive_delta";
 import {mockUuid} from "../onion/test_helpers";
@@ -8,6 +8,11 @@ import {newVersionedModel, VersionedModelState} from "./versioned_model";
 import {newCorrespondence} from "./correspondence";
 import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
 import {makeInfoHoverCardIcon} from "./help_icons";
+import corr_csImage from './assets/corr_cs.svg';
+import corr_asImage from './assets/corr_as.svg';
+import corr_corrImage from './assets/corr_corr.svg';
+import {Actionblock, Resultblock} from "./blocks";
+
 
 export const demo_Corr_description =
     <>
@@ -15,8 +20,101 @@ export const demo_Corr_description =
             Correspondence Model
         </Title>
         <Text>
-            To be done.
+            The different parts we have seen in the previous demos, are now in combined in different tabs in one column.
+            The second row is just a copy of the upper one to enable the simultaneous observation of changes in the
+            different models.
+        </Text>
+        <Text>
+            The following picture shows the connection of the different models combined in the "Concrete Syntax" (CS)
+            column.
+            The two abstraction levels of Deltas L1 and L0 are combined as "Delta(s)" and the History is ommitted in the
+            picture.
+        </Text>
+        <Image src={corr_csImage}/>
+        <Space h="10px"/>
+        <Text>
+            Analogously, the third column combines the different models shown in the first demo "Primitive Delta" into
+            one view, representing the "Abstract Syntax model" (AS).
+            The difference to the Concrete Syntax in the first column is, that there is no additional "user-friendly"
+            editor for editing the state. Instead, the state graph can be manipulated directly as reflected in the
+            following picture:
+        </Text>
+        <Image src={corr_asImage}/>
+        <Space h="10px"/>
+        <Text>
+            Inbetween the CS and AS the "Correspondence model" (Corr) encapsulates and connects the Deltas of the CS and
+            AS models as visualized in the following picture.
+        </Text>
+        <Image src={corr_corrImage}/>
+        <Space h="10px"/>
+        <Text>
+            The creation of Deltas of the Correspondence model and AS Deltas is triggered by the "Parsing" process.
+            Parsing can either be automatically started after each user interaction or interactively at specific points
+            in time, simulated by pressing the "Parse &gt;&gt;" button in the upper right corner of the first column.
+        </Text>
+        <Text>
+            In turn, changes to the AS model are taken into account in the rendering process. As some user interaction
+            may be required due to missing information such as layout information, this process is not automatically
+            triggered by default.
+        </Text>
+        <Text>
+            Common to all these three models (CS, Corr, AS) is the central foundation in Deltas encoding any change of
+            the state graph. On this generic basis all other functionality is built on: conflict detection, versioning,
+            undo/redo, etc. That is also the reason why these features can be presented in a homogeneous way for each of
+            the models.
+        </Text>
+        <Text>
+            The interesting part is now the parsing (CS &rarr; AS) and rendering (AS &rarr; CS).
         </Text>
+        <Actionblock>
+            1. Create a Rountangle!
+        </Actionblock>
+        <Resultblock>
+            Below the rountangle editor, the new State graph of the CS is shown.
+        </Resultblock>
+        <Resultblock>
+            Automatic parsing recognizes this rountangle as a state in the AS with ID = 2 and connects both via the
+            Correspondence model by introducing a "connection node" with ID = 1.
+        </Resultblock>
+        <Resultblock>
+            As visualized in the above picture, the Correspondence model contains the complete CS and AS model plus some
+            more information.
+        </Resultblock>
+        <Actionblock>
+            2. Draw a second Rountangle and move and resize it such that the new rountangle completely surrounds the
+            first one!
+        </Actionblock>
+        <Resultblock>
+            The parser recognizes the (visual) containment relation between the two rountangles and translates this to a
+            "has-parent" relation between the two (abstract) states. Again, you can find this relation also in the correspondence
+            model.
+        </Resultblock>
+        <Actionblock>
+            3. Create a new State in the AS by a right click in the canvas!
+        </Actionblock>
+        <Actionblock>
+            4. Press the "&lt;&lt; Render"-button at the top!
+        </Actionblock>
+        <Resultblock>
+            The rendering process detects missing information while it tries to create a CS model for the new state.
+        </Resultblock>
+        <Resultblock>
+            A new dialog appears where one can position/size the new rectangle.
+        </Resultblock>
+        <Resultblock>
+            The system does not allow any position/size whose parsing would result in a different AS (e.g., additional or missing "hasParent" relation).
+        </Resultblock>
+        <Actionblock>
+            5. Position the new state according to the given constraints!
+        </Actionblock>
+        <Resultblock>
+            Your CS model is updated and the rountangles are visualized accordingly.
+        </Resultblock>
+        <Space h="20px"/>
+        {/* TODO: remove z-index!
+            TODO: deleted nodes/Rountangles are still considered in the "Missing information"-dialog
+            TODO: everywhere: Arrows with directions!
+        */}
     </>;
 
 export function getDemoCorr() {
@@ -93,7 +191,7 @@ export function getDemoCorr() {
                     <Space h="sm"/>
                     <Stack>
                         {csComponents.makeTabs("editor", csTabs)}
-                        {csComponents.makeTabs("history", csTabs)}
+                        {csComponents.makeTabs("state", csTabs)}
                         <Center>
                             {csComponents.undoRedoButtons}
                             <Space w="sm"/>

src/frontend/demo_editor.tsx

@@ -1,14 +1,12 @@
 import * as React from "react";
-import {SimpleGrid, Text, Title, Stack, Center, Switch, Group, Space, Blockquote, Image} from "@mantine/core";
+import {SimpleGrid, Text, Title, Stack, Center, Group, Space, Image} from "@mantine/core";
 
 import {PrimitiveRegistry} from "../onion/primitive_delta";
 import {mockUuid} from "../onion/test_helpers";
 
 import {newVersionedModel, VersionedModelState} from "./versioned_model";
-import {newCorrespondence} from "./correspondence";
 import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
 import {makeInfoHoverCardIcon} from "./help_icons";
-import {MdOutlineDraw} from "react-icons/md";
 import {Actionblock, Resultblock} from "./blocks";
 import editor from './assets/editor.svg';
 
@@ -21,7 +19,7 @@ export const demo_Editor_description =
             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
             left-clicking on the grey area with the alt-key pressed (see also the small info in the upper right corner
-            of each canvas).
+            of each canvas). You can move these rountangle and resize them.
         </Text>
         <Text>
             In this demo, the editable state graph of the "Primitive Delta"-demo is replaced by a Rountangle Editor.
@@ -42,6 +40,9 @@ export const demo_Editor_description =
         <Resultblock>
             The result of an application of all primitive deltas to an empty initial state is shown in the third column "State Graph".
         </Resultblock>
+        <Resultblock>
+            The ID<sub>CS</sub> in each rountangle indicates the node ID of the state graph that is responsible for the rendering of this rountangle.
+        </Resultblock>
         <Actionblock>
             2. Move your created rountangle!
         </Actionblock>

src/frontend/demo_pd.tsx

@@ -26,6 +26,9 @@ export const demo_PD_description =
         <Title order={4}>
             Primitive deltas
         </Title>
+        { /*
+            TODO: elaborate more on the structure of the state graph.
+        */ }
         <Text>
             On the right side you will see three canvases "State", "History", and "Deltas(L0)".
         </Text>