Small fixes

src/frontend/versioned_model/merge_view.tsx

@@ -51,6 +51,8 @@ export function MergeView({history, setHistory, forces, versionRegistry, onMerge
     </Mantine.ActionIcon>
   );
 
+  const [showTooltip, setShowTooltip] = React.useState<any>(null);
+
   return <>
     <GraphView graphData={historyHighlighted} help={historyGraphHelpText} 
         mouseUpHandler={(e, {x, y}, node) => {
@@ -72,32 +74,47 @@ export function MergeView({history, setHistory, forces, versionRegistry, onMerge
           }
         }}
       />
-    <Mantine.Group>
-      { inputs.length === 0 ? <></> :
-        <>
-          {inputs.map(version => <Mantine.Badge key={fullVersionId(version)} pr={3} variant="outline" color="dark" style={{backgroundColor: inputColor}} rightSection={removeButton(version)}>
-            {fullVersionId(version).slice(0,8)}
-            </Mantine.Badge>)}
-        </> }
+    <Mantine.Group style={{minHeight: 30}}>
+      {inputs.map(version => <Mantine.Badge key={fullVersionId(version)} pr={3} variant="outline" color="dark" style={{backgroundColor: inputColor}} rightSection={removeButton(version)}>
+        {fullVersionId(version).slice(0,8)}
+        </Mantine.Badge>)}
       { outputs.length === 0 ? <></> :
         <>
           <Icons.IconArrowNarrowRight/>
           {/*Merge Outputs:*/}
-          {outputs.map(version => <Mantine.Badge key={fullVersionId(version)} variant="outline" color="dark" style={{backgroundColor: outputColor}}>
-            {fullVersionId(version).slice(0,8)}
+          {outputs.map(version => <Mantine.Badge key={fullVersionId(version)} variant="outline" color="dark"
+            style={{backgroundColor: outputColor, cursor: "pointer"}} onClick={() => {
+              setInputs([version]);
+              setOutputs([]);
+            }}>
+              {fullVersionId(version).slice(0,8)}
             </Mantine.Badge>)}
         </> }
     </Mantine.Group>
     <Mantine.Group grow>
-      <Mantine.Button compact variant="light" disabled={inputs.length===0 && outputs.length===0} onClick={() => {
+      <Mantine.Button compact variant="outline" leftIcon={<Icons.IconX/>} disabled={inputs.length===0 && outputs.length===0} onClick={() => {
         setInputs([]);
         setOutputs([]);
       }}>Clear Selection</Mantine.Button>
-      <Mantine.Button compact leftIcon={<Icons.IconArrowMerge/>} disabled={inputs.length===0} onClick={() => {
+      <Mantine.Button compact leftIcon={<Icons.IconArrowMerge/>} onClick={() => {
         const outputs = versionRegistry.merge(inputs, d => d.getDescription());
         setOutputs(outputs);
         onMerge(outputs);
       }}>Merge</Mantine.Button>
+      <Mantine.Button compact leftIcon={<Icons.IconNavigation/>} disabled={inputs.length!==1} onClick={() => {
+        onGoto(inputs[0]);
+      }}>Goto</Mantine.Button>
+      <Mantine.Tooltip label="Copied to clipboard!" opened={showTooltip !== null} withArrow>
+        <Mantine.Button compact leftIcon={<Icons.IconDatabaseExport/>} disabled={inputs.length!==1} onClick={() => {
+          const type = "application/json";
+          const blob = new Blob([], {type});
+          navigator.clipboard.writeText(
+            JSON.stringify([...inputs[0]].reverse().map(delta => delta.serialize()), null, 2)
+          );
+          if (showTooltip !== null) clearTimeout(showTooltip);
+          setShowTooltip(setTimeout(()=>setShowTooltip(null), 1500));
+        }}>Export</Mantine.Button>
+      </Mantine.Tooltip>
     </Mantine.Group>
   </>
 }

src/frontend/versioned_model/single_model.tsx

@@ -229,8 +229,14 @@ export function newVersionedModel({readonly}, vReg?: VersionRegistry) {
             />
           </InfoHoverCardOverlay>;
 
-    const deltaGraphL0Component = <GraphView graphData={state.deltaGraphL0} help={helpText.deltaGraph} mouseUpHandler={()=>{}} />;
-    const deltaGraphL1Component = <GraphView graphData={state.deltaGraphL1} help={helpText.deltaGraph} mouseUpHandler={()=>{}} />;
+    // Serialize delta
+    const onDeltaClick = (e, {x,y}, node) => {
+      if (node) {
+        alert(JSON.stringify(node.obj.serialize(), null, 2));
+      }
+    }
+    const deltaGraphL0Component = <GraphView graphData={state.deltaGraphL0} help={helpText.deltaGraph} mouseUpHandler={onDeltaClick} />;
+    const deltaGraphL1Component = <GraphView graphData={state.deltaGraphL1} help={helpText.deltaGraph} mouseUpHandler={onDeltaClick} />;
     const historyComponent = <GraphView graphData={state.historyGraph} help={helpText.historyGraph}
       mouseUpHandler={(e, {x, y}, node) => node ? callbacks.onVersionClicked?.(node.obj) : undefined} />;
 

src/onion/composite_delta.ts

@@ -43,6 +43,7 @@ export class CompositeDelta implements Delta {
     return {
       type: "CompositeDelta",
       deltas: this.deltas.map(d => d.serialize()),
+      description: this.description,
     }
   }