Fix dark mode CSS + add more info hover panes

src/frontend/demo_corr.tsx

@@ -6,6 +6,7 @@ import {mockUuid} from "../onion/test_helpers";
 
 import {newVersionedModel, VersionedModelState} from "./versioned_model";
 import {newCorrespondence} from "./correspondence";
+import {makeInfoHoverCardIcon} from "./help_icons";
 
 export function getDemoCorr() {
   const generateUUID = mockUuid();
@@ -24,7 +25,7 @@ export function getDemoCorr() {
     const [corrState, setCorrState] = React.useState<VersionedModelState>(corr.initialState);
 
     const [autoParse, setAutoParse] = React.useState<boolean>(true);
-    const [autoRender, setAutoRender] = React.useState<boolean>(true);
+    const [autoRender, setAutoRender] = React.useState<boolean>(false);
 
     const asReducer = as.getReducer(setAsState);
     const csReducer = cs.getReducer(setCsState);
@@ -67,6 +68,8 @@ export function getDemoCorr() {
 
     const {parseButton, renderButton} = corrReducer.getParseRenderButtons(csState, asState);
 
+    const undoButtonHelpText = "Use the Undo/Redo buttons or the History panel to navigate to any version.";
+
     return (<>
           <Group position="right">
           </Group>
@@ -82,7 +85,11 @@ export function getDemoCorr() {
           <Stack>
             {csComponents.makeTabs("editor", csTabs)}
             {csComponents.makeTabs("history", csTabs)}
-            <Center>{csComponents.undoRedoButtons}</Center>
+            <Center>
+              {csComponents.undoRedoButtons}
+              <Space w="sm"/>
+              {makeInfoHoverCardIcon(undoButtonHelpText)}
+            </Center>
           </Stack>
         </div>
         <div>
@@ -93,7 +100,15 @@ export function getDemoCorr() {
           <Stack>
             {corrComponents.makeTabs("state", corrTabs)}
             {corrComponents.makeTabs("history", corrTabs)}
-            <Center>{corrComponents.undoRedoButtons}</Center>
+            <Center>
+              {corrComponents.undoRedoButtons}
+              <Space w="sm"/>
+              {makeInfoHoverCardIcon(<>
+                {undoButtonHelpText}
+                <Space h="sm"/>
+                Navigating to a version in the correspondence model, will also navigate to the embedded concrete and abstract syntax model versions.
+              </>)}
+            </Center>
           </Stack>
         </div>
         <div>
@@ -107,7 +122,11 @@ export function getDemoCorr() {
           <Stack>
             {asComponents.makeTabs("state", asTabs)}
             {asComponents.makeTabs("history", asTabs)}
-            <Center>{asComponents.undoRedoButtons}</Center>
+            <Center>
+              {asComponents.undoRedoButtons}
+              <Space w="sm"/>
+              {makeInfoHoverCardIcon(undoButtonHelpText)}
+            </Center>
           </Stack>
         </div>
       </SimpleGrid>

src/frontend/graph.css

@@ -27,5 +27,4 @@
   font-size: 8pt;
   font-style: italic;
   fill: #000;
-
 }

src/frontend/index.css

@@ -13,3 +13,9 @@ html,body, #root {
   height: 350px;
   vertical-align:top;
 }
+
+@media (prefers-color-scheme: dark) {
+  .canvas {
+    background-color: #888;
+  }
+}

src/frontend/versioned_model.tsx

@@ -256,7 +256,7 @@ export function newVersionedModel({generateUUID, primitiveRegistry, readonly}) {
 
     const undoRedoButtons = <>
       {undoButton}
-      <Mantine.Space w="md"/>
+      <Mantine.Space w="sm"/>
       {redoButton}
     </>;