Primitive Delta Demo: got rid of branch names (they are not used for anything, plus we could argue that they are not really branches, but rather just clones of the same "repo")

src/frontend/demo_pd.tsx

@@ -12,10 +12,11 @@ import {
     Card,
     CloseButton,
     Divider,
-    Space, Image
+    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";
@@ -76,7 +77,7 @@ export const demo_PD_description =
             a bold border.
         </Resultblock>
         <Actionblock>
-            5. Press the "Clone"-Button and enter a new branch name!
+            5. Press the "Clone"-Button!
         </Actionblock>
         <Actionblock>
             6. Delete the node in the cloned branch by a click with the middle mouse button!
@@ -109,15 +110,16 @@ import {makeInfoHoverCardIcon} from "./help_icons";
 export function getDemoPD() {
     const primitiveRegistry = new PrimitiveRegistry();
     const generateUUID = mockUuid();
+    const generateBranchID = mockUuid();
 
     const model = newVersionedModel({readonly: false, generateUUID, primitiveRegistry});
 
-    const initialState: [string, VersionedModelState, any][] = [
-        ["master", model.initialState, model],
+    const initialState: [PrimitiveValue, VersionedModelState, any][] = [
+        [generateBranchID().value, model.initialState, model],
     ];
 
     return function () {
-        const [globalState, setGlobalState] = React.useState<[string, VersionedModelState, any][]>(initialState);
+        const [globalState, setGlobalState] = React.useState<[PrimitiveValue, VersionedModelState, any][]>(initialState);
 
         const getSetBranchState = i => {
             return callback => {
@@ -130,7 +132,7 @@ export function getDemoPD() {
             };
         }
 
-        return <>{globalState.map(([branchName, branchState, {
+        return <div style={{minWidth: 1300}}>{globalState.map(([branchName, branchState, {
             getCurrentVersion,
             getReducer,
             getReactComponents
@@ -163,7 +165,8 @@ export function getDemoPD() {
             }
 
             const cloneClicked = () => {
-                const newBranchName = prompt("Branch name: (ESC to cancel)", "branch");
+                {/*const newBranchName = prompt("Branch name: (ESC to cancel)", "branch");*/}
+                const newBranchName = generateBranchID().value;
                 if (newBranchName === null) {
                     return;
                 }
@@ -189,9 +192,8 @@ export function getDemoPD() {
                 });
             }
 
-            return <div key={branchName}>
-                <Divider my="sm" label={"branch: " + branchName} labelPosition="center"/>
-                {/*{<CloseButton/>}*/}
+            return <div key={JSON.stringify(branchName)}>
+                {i > 0 ? <><Space h="md"/><Divider my="sm"/></> : <></>}
                 <SimpleGrid cols={3}>
                     <div>
                         <Text>State</Text>
@@ -215,9 +217,8 @@ export function getDemoPD() {
                     {makeInfoHoverCardIcon(undoButtonHelpText)}
                     <Button onClick={cloneClicked} compact rightIcon={<Icons.IconChevronDown/>}>Clone</Button>
                 </Group>
-                <Space h="md"/>
             </div>
         })
-        }</>;
+        }</div>;
     }
 }