revise demos BM and Corr

src/frontend/demo_bm.tsx

@@ -1,32 +1,13 @@
-import * as React from "react";
-import {
-    SimpleGrid,
-    Text,
-    Title,
-    Group,
-    Stack,
-    Button,
-    Space,
-    Textarea,
-    Tabs,
-    HoverCard,
-    ActionIcon,
-    Center,
-    Switch,
-    Grid,
-    Modal, Image
-} from "@mantine/core";
+import * as React from 'react';
+import {Center, Grid, Group, Space, Stack, Text, Title} from '@mantine/core';
 
-import {PrimitiveRegistry} from "../onion/primitive_delta";
-import {mockUuid} from "../onion/test_helpers";
-import {makeInfoHoverCardIcon} from "./help_icons";
-import {newVersionedModel, VersionedModelState, undoButtonHelpText} from "./versioned_model";
-import {newCorrespondence, undoButtonHelpTextCorr} 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";
+import {PrimitiveRegistry} from '../onion/primitive_delta';
+import {mockUuid} from '../onion/test_helpers';
+import {makeInfoHoverCardIcon} from './help_icons';
+import {newVersionedModel, undoButtonHelpText, VersionedModelState} from './versioned_model';
+import {newCorrespondence, undoButtonHelpTextCorr} from './correspondence';
+import {ManualRendererProps, newManualRenderer} from './manual_renderer';
+import {Actionblock, Resultblock} from './blocks';
 
 export const demo_BM_description =
     <>
@@ -34,42 +15,46 @@ export const demo_BM_description =
             Blended Modeling
         </Title>
         <Text>
-            This demo now introduces a second concrete syntax which is for sake of simplicity the same as the first one:
+            This demo 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
+            The difference to the previous 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
+            The connection between the different canvas on the right side is as follows:
+        </Text>
+        <Text>
+            CS1 &harr; Corr1 &harr; AS &harr; Corr2 &harr; CS2
+        </Text>
+        <Text>
+            Thus, we have now two Correspondence models which 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
+            In consequence, we also have two independent parsing and rendering functions for each CS which 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.
+            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.
+            information, such as 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 -
+            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!
+            Since all models are built upon our versioning approach, all changes are kept in Deltas and, thus, each step
+            can be undone or redone: One can navigate 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
@@ -79,18 +64,18 @@ export const demo_BM_description =
             One possible walk-through of this demo is very similar to the steps of the Correspondence demo:
         </Text>
         <Actionblock>
-            1. Create a Rountangle!
+            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
+            As visualized in the picture above, 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
+            2. Draw a second rountangle and move and resize it such that the new rountangle completely surrounds the
             first one!
         </Actionblock>
         <Resultblock>
@@ -105,7 +90,7 @@ export const demo_BM_description =
             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.
+            A new dialog appears where one can position and resize the rectangles in the second CS.
         </Resultblock>
         <Actionblock>
             4. Position the new state according to the given constraints!
@@ -124,7 +109,6 @@ export const demo_BM_description =
             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

@@ -21,41 +21,38 @@ export const demo_Corr_description =
         </Title>
         <Text>
             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
+            The second row is just a copy of the upper one and shows exactly the same model(s). This allows 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)
+            The following figure 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.
+            The two abstraction levels of Deltas L1 and L0 are combined as "CS Delta(s)" and the History is omitted in the
+            figure.
         </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).
+            a single 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:
+            editor for editing the state. Instead, the state graph can be manipulated directly as already introduced in the first
+            demo "Primitive Deltas". This way of manipulation is also illustrated 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
+            Between 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.
+            In turn, changes to the AS model are taken into account in the rendering process. Since the CS can contain
+            information the AS does not contain, such as layout information, some user interaction
+            may be required to add this missing 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
@@ -64,7 +61,7 @@ export const demo_Corr_description =
             the models.
         </Text>
         <Text>
-            The interesting part is now the parsing (CS &rarr; AS) and rendering (AS &rarr; CS).
+            This demo focuses on the parsing (CS &rarr; AS) and rendering (AS &rarr; CS).
         </Text>
         <Actionblock>
             1. Create a Rountangle!
@@ -78,7 +75,7 @@ export const demo_Corr_description =
         </Resultblock>
         <Resultblock>
             As visualized in the above picture, the Correspondence model contains the complete CS and AS model plus some
-            more information.
+            more information relevant to maintain the relations between elements contained in the AS and the CS.
         </Resultblock>
         <Actionblock>
             2. Draw a second Rountangle and move and resize it such that the new rountangle completely surrounds the
@@ -99,7 +96,7 @@ export const demo_Corr_description =
             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.
+            A new dialog appears where one can position and resize 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).
@@ -110,7 +107,6 @@ export const demo_Corr_description =
         <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!