Live modeling demo UI improvement

src/frontend/demos/demo_live.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Icons from '@tabler/icons';
-import {Button, Divider, Group, Image, SimpleGrid, Space, Text, Title, TextInput, Select, Stack, Paper} from '@mantine/core';
+import {Button, Divider, Group, Image, SimpleGrid, Space, Text, Title, TextInput, Select, Stack, Paper, Alert} from '@mantine/core';
 
 import { Graphviz } from 'graphviz-react';
 
@@ -257,16 +257,23 @@ export function getDemoLive() {
             <Group grow>
               {designModelComponents.undoRedoButtons}
             </Group>
-            <Divider my="xs" label="Design Model Editor" labelPosition="center" />
+            <Divider my="xs" label="(Projectional) Model Editor" labelPosition="center" />
+            {
+            designModelNode === null ?
+              <Alert icon={<Icons.IconAlertCircle/>} title="No design model!" color="blue">
+                Did you undo its creation?
+              </Alert>
+              :<></>
+            }
             <Group grow>
             <Paper shadow="xs" p="xs" withBorder>
             <Group grow>
               <TextInput value={addStateName} onChange={e => setAddStateName(e.currentTarget.value)} label="State Name" withAsterisk/>
-              <Button onClick={addState} disabled={addStateName===""||states.some(([name]) => name ===addStateName)} leftIcon={<Icons.IconPlus/>} color="green">Add</Button>
+              <Button onClick={addState} disabled={addStateName===""||designModelNode===null||states.some(([name]) => name ===addStateName)} leftIcon={<Icons.IconPlus/>} color="green">Add</Button>
             </Group>
             </Paper>
             {/*<Paper shadow="xs" p="xs" withBorder>*/}
-              <Select searchable clearable label="Initial State" data={states.map(([stateName]) => ({value:stateName, label:stateName}))} value={initialState} onChange={onInitialStateChange}/>
+              <Select disabled={designModelNode===null} searchable clearable label="Initial State" data={states.map(([stateName]) => ({value:stateName, label:stateName}))} value={initialState} onChange={onInitialStateChange}/>
             {/*</Paper>*/}
             </Group>
             <Group>
@@ -292,7 +299,7 @@ export function getDemoLive() {
                 })
               }
             </Group>
-            <Divider my="xs" label="Run-time Execution" labelPosition="center" />
+            <Divider my="xs" label="Execution" labelPosition="center" />
             <Group grow>
               <Button disabled={initialState === null || runtimeModelNode !== null} onClick={onInitialize} leftIcon={<Icons.IconPlayerPlay/>}>Init</Button>
               <Button color="red" disabled={runtimeModelNode === null} onClick={onAbort} leftIcon={<Icons.IconPlayerStop/>}>Abort</Button>