change some css styles related to the sidebar, revise demos PD, Welcome, and Editor

src/frontend/app.tsx

@@ -25,14 +25,14 @@ export function getApp() {
 
         return <>
             <MantineProvider theme={{colorScheme: preferredColorScheme}} withGlobalStyles withNormalizeCSS>
-                <Styledtabs defaultValue="welcome" orientation="vertical" style={{height: '100%'}}>
+                <Styledtabs defaultValue="editor" 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="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="pd">Primitive Deltas</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>

src/frontend/demo_editor.tsx

@@ -19,26 +19,25 @@ 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). You can move these rountangle and resize them.
+            of each canvas). You can move these rountangle around and resize them.
         </Text>
         <Text>
             In this demo, the editable state graph of the "Primitive Delta"-demo is replaced by a Rountangle Editor.
-            Again, any action in the Rountangle Editor results in a set of primitive deltas (shown in the center) that are applied to the (empty) state graph (on the right).
+            Again, any action in the Rountangle Editor results in a set of deltas (shown at the center) that are applied to the (empty) state graph (on the right).
             Note that this state graph is no longer (directly) editable. The current model state is visualized in the Rountangle Editor from which the user interaction originated.
         </Text>
         <Text>
             In technical terms, the Rountangle Editor is a <em>projectional editor</em> for the state graph (on the right).
         </Text>
         <Image src={editor}/>
-        <Space h="10px"/>
         <Actionblock>
             1. Create a rountangle!
         </Actionblock>
         <Resultblock>
-            In the second column, one composite delta "createRountangle" was created.
+            In the center column, one composite delta (or L1 delta) "createRountangle" was created.
         </Resultblock>
         <Resultblock>
-            In the second tab "Deltas (L0)" of the second column you can see the primitive deltas a "createRountangle" consists of.
+            In the second tab "Deltas (L0)" of the center column, you can see the primitive deltas a "createRountangle" composite delta consists of.
         </Resultblock>
         <Resultblock>
             The result of an application of all primitive deltas to an empty initial state is shown in the third column "State Graph".
@@ -67,10 +66,10 @@ export const demo_Editor_description =
         <Resultblock>
             In the "Delta (L1)" and "Delta (L0)" tabs, the deltas corresponding to the current version are also highlighted.
         </Resultblock>
+        <Space h="5px"/>
         <Text>
             Feel free to play around with the editor and watch the changes in the other views.
         </Text>
-        <Space h="20px"/>
     </>;
 
 export function getDemoEditor() {

src/frontend/demo_pd.tsx

@@ -1,45 +1,32 @@
-import * as React from "react";
-import * as Icons from "@tabler/icons";
-import {
-    Title,
-    Text,
-    Grid,
-    Button,
-    SimpleGrid,
-    Group,
-    Center,
-    ScrollArea,
-    Card,
-    CloseButton,
-    Divider,
-    Space, Image,
-} from "@mantine/core";
-
-import {PrimitiveRegistry} from "../onion/primitive_delta";
-import {PrimitiveValue} from "../onion/types";
-import {mockUuid} from "../onion/test_helpers";
-import {GrContactInfo} from "react-icons/all";
-import {Actionblock, Resultblock} from "./blocks";
+import * as React from 'react';
+import * as Icons from '@tabler/icons';
+import {Button, Divider, Group, Image, SimpleGrid, Space, Text, Title,} from '@mantine/core';
+
+import {PrimitiveRegistry} from '../onion/primitive_delta';
+import {PrimitiveValue} from '../onion/types';
+import {mockUuid} from '../onion/test_helpers';
+import {Actionblock, Resultblock} from './blocks';
 import pdImage from './assets/pd.svg';
+import {newVersionedModel, undoButtonHelpText, VersionedModelState,} from './versioned_model';
+import {makeInfoHoverCardIcon} from './help_icons';
 
 export const demo_PD_description =
     <>
         <Title order={4}>
-            Primitive deltas
+            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)".
+            On the right side, you see three canvases "State", "History", and "Deltas(L0)".
         </Text>
         <Text>
-            "State" shows the state graph, which represents the state of our model. If you now e.g. click with the right
-            mouse button on a free area in the canvas, then this action is converted into a "Delta". The set of deltas
+            "State" shows the state graph, which represents the state of our model. If you click with the right
+            mouse button on a free area in the canvas, this action is converted into a "Delta". The set of one or many Deltas
             is then in turn applied to the state graph, resulting in the visualization of a new node. The following image visualizes this.
         </Text>
         <Image src={pdImage}/>
-        <Space h="10px"/>
         <Actionblock>
             1. Click with your right mouse button into the "State" canvas!
         </Actionblock>
@@ -56,7 +43,7 @@ export const demo_PD_description =
             2. Hover with your mouse over the circle with an (i) inside the "State" canvas!
         </Actionblock>
         <Resultblock>
-            A tooltip with information about possible interactions of this canvas is shown.
+            A tooltip with information about possible interactions with this canvas is shown.
         </Resultblock>
         <Actionblock>
             3. Create an edge to a value by right-dragging from the created node into the canvas!
@@ -64,8 +51,10 @@ export const demo_PD_description =
         <Resultblock>
             The generated delta "EDG(..)" depends on the creation (NEW(0)) of the node from which the edge originates.
         </Resultblock>
-        This detailed recording of each action allows to easily detect conflicts between two versions or to merge
-        conflict-free versions.
+        <Space h="10px"/>
+        <Text>This detailed recording of each action allows to easily detect conflicts between two versions or to merge
+            conflict-free versions.</Text>
+        <Space h="10px"/>
         <Actionblock>
             4. Press the button "Undo" once!
         </Actionblock>
@@ -73,7 +62,7 @@ export const demo_PD_description =
             The version before creating the edge is selected in the "History" canvas.
         </Resultblock>
         <Resultblock>
-            In the "Delta"-view the set of Deltas that are associated with the currently selected version is drawn with
+            In the "Delta"-view, the set of Deltas that are associated with the currently selected version are drawn with
             a bold border.
         </Resultblock>
         <Actionblock>
@@ -96,17 +85,9 @@ export const demo_PD_description =
         <Resultblock>
             In the History, you can now choose between two "Restore" actions, but they cannot be applied simultaneously due to the conflict.
         </Resultblock>
-        <Space h="20px"/>
     </>;
 
 
-import {
-    newVersionedModel,
-    VersionedModelState,
-    undoButtonHelpText,
-} from "./versioned_model";
-import {makeInfoHoverCardIcon} from "./help_icons";
-
 export function getDemoPD() {
     const primitiveRegistry = new PrimitiveRegistry();
     const generateUUID = mockUuid();

src/frontend/demo_welcome.tsx

@@ -1,23 +1,6 @@
-import * as React from "react";
-import * as Icons from "@tabler/icons";
-import {
-    Title,
-    Text,
-    Grid,
-    Button,
-    SimpleGrid,
-    Group,
-    Center,
-    ScrollArea,
-    Card,
-    CloseButton,
-    Divider,
-    Space, List
-} from "@mantine/core";
-
-import {PrimitiveRegistry} from "../onion/primitive_delta";
-import {mockUuid} from "../onion/test_helpers";
-import {Actionblock, Resultblock} from "./blocks";
+import * as React from 'react';
+import {List, Space, Text, Title} from '@mantine/core';
+import {Actionblock, Resultblock} from './blocks';
 
 export const demo_Welcome_description =
     <>
@@ -28,17 +11,17 @@ export const demo_Welcome_description =
             This demo site performs two tasks:
         </Text>
         <List type="ordered">
-            <List.Item>Presenting the possibilites of our approach.</List.Item>
+            <List.Item>Presenting the possibilities of our approach.</List.Item>
             <List.Item>Improving the understandability by example walk-throughs.</List.Item>
         </List>
         <Text>
-            In our explanations of the different views we use the following blocks:
-            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.
+            In our explanations of the different views we use the following styled text-boxes:
+            <List type="unordered">
+                <List.Item>Every block with an <Text span c='darkorange'><strong>orange</strong></Text> mark on the left side contains an <strong>action</strong> that <strong>you should do.</strong></List.Item>
+                <List.Item>Each block with a <Text span c="royalblue"><strong>blue</strong></Text> border describes what <strong>you can observe</strong>, once the action has been executed.</List.Item>
+            </List>
         </Text>
+        <Space h='15px'/>
         <Text fw={700}>
             Example:
         </Text>
@@ -46,21 +29,16 @@ export const demo_Welcome_description =
             1. Perform this action!
         </Actionblock>
         <Resultblock>
-            This block describes the generated output.
+            This block describes the generated output you can observe.
         </Resultblock>
         <Space h='5px'/>
         <Text>
-            Please select one of the demos above. We recommend that you complete the demos in the order listed.
+            Please select one of the demos above. We recommend that you complete the demos in the listed order.
         </Text>
         <Space h="20px"/>
     </>;
 
 
-import {
-    newVersionedModel,
-    VersionedModelState,
-} from "./versioned_model";
-
 export function getWelcome() {
     return function () {
         return <></>

src/frontend/index.css

@@ -62,5 +62,16 @@ html,body, #root {
 }
 
 .mantine-ScrollArea-scrollbar {
-    padding: 0px;
+    padding: 0;
 }
+
+.mantine-Tabs-panel {
+    user-select: text;
+    padding-left: 5px;
+    padding-bottom: 10px;
+}
+
+.mantine-Tabs-panel img {
+    margin: 20px auto;
+    max-width: 400px;
+}