Display help icon next to undo/redo buttons in all demos

pnpm-lock.yaml

@@ -34,6 +34,7 @@ specifiers:
   ts-loader: ^9.4.2
   ts-node: ^10.9.1
   typescript: ^4.9.4
+  url-loader: ^4.1.1
   uuid: ^9.0.0
   webpack: ^5.75.0
   webpack-cli: ^4.10.0
@@ -76,6 +77,7 @@ devDependencies:
   mocha: 10.2.0
   nyc: 15.1.0
   ts-loader: 9.4.2_3fkjkrd3audxnith3e7fo4fnxi
+  url-loader: 4.1.1_webpack@5.75.0
   webpack: 5.75.0_webpack-cli@4.10.0
   webpack-cli: 4.10.0_uaydpeuxkjjcxdbyfgk36cjdxi
   webpack-dev-server: 4.11.1_pda42hcaj7d62cr262fr632kue
@@ -1327,6 +1329,10 @@ packages:
   /batch/0.6.1:
     resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
 
+  /big.js/5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+    dev: true
+
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -2164,6 +2170,11 @@ packages:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
 
+  /emojis-list/3.0.0:
+    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
+    engines: {node: '>= 4'}
+    dev: true
+
   /encodeurl/1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
@@ -2947,6 +2958,15 @@ packages:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
 
+  /loader-utils/2.0.4:
+    resolution: {integrity: sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==}
+    engines: {node: '>=8.9.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 2.2.1
+    dev: true
+
   /locate-path/5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -4133,6 +4153,22 @@ packages:
     dependencies:
       punycode: 2.1.1
 
+  /url-loader/4.1.1_webpack@5.75.0:
+    resolution: {integrity: sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      file-loader: '*'
+      webpack: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      file-loader:
+        optional: true
+    dependencies:
+      loader-utils: 2.0.4
+      mime-types: 2.1.35
+      schema-utils: 3.1.1
+      webpack: 5.75.0_webpack-cli@4.10.0
+    dev: true
+
   /use-composed-ref/1.3.0_react@18.2.0:
     resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
     peerDependencies:

src/frontend/correspondence.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as Mantine from "@mantine/core";
 import * as Icons from "@tabler/icons";
 
-import {newVersionedModel, VersionedModelState} from "./versioned_model";
+import {newVersionedModel, VersionedModelState, undoButtonHelpText} from "./versioned_model";
 import {emptyGraph, graphForces} from "./constants";
 import {ManualRendererProps} from "./manual_renderer";
 import {D3GraphStateUpdater} from "./d3_state";
@@ -12,6 +12,10 @@ import {GraphState} from "../onion/graph_state";
 import {CompositeDelta} from "../onion/composite_delta";
 import {PrimitiveDelta} from "../onion/primitive_delta";
 
+export const undoButtonHelpTextCorr =
+  `Navigating to a version in the correspondence model,
+   will also navigate to the embedded concrete and abstract syntax model versions.`;
+
 // Pure function
 // Replays all deltas in a version to compute the graph state of that version.
 function getGraphState(version: Version, listener?): GraphState {

src/frontend/demo_bm.tsx

@@ -19,9 +19,9 @@ import {
 
 import {PrimitiveRegistry} from "../onion/primitive_delta";
 import {mockUuid} from "../onion/test_helpers";
-
-import {newVersionedModel, VersionedModelState} from "./versioned_model";
-import {newCorrespondence} from "./correspondence";
+import {makeInfoHoverCardIcon} from "./help_icons";
+import {newVersionedModel, VersionedModelState, undoButtonHelpText} from "./versioned_model";
+import {newCorrespondence, undoButtonHelpTextCorr} from "./correspondence";
 import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
 import corr_csImage from "./assets/corr_cs.svg";
 import corr_asImage from "./assets/corr_as.svg";
@@ -264,35 +264,63 @@ export function getDemoBM() {
                     <Stack>
                         {cs1Components.makeTabs("editor", csTabs)}
                         {cs1Components.makeTabs("history", csTabs)}
-                        <Center>{cs1Components.undoRedoButtons}</Center>
+                        <Center>
+                            {cs1Components.undoRedoButtons}
+                            <Space w="sm"/>
+                            {makeInfoHoverCardIcon(undoButtonHelpText)}
+                        </Center>
                     </Stack>
                 </Grid.Col>
                 <Grid.Col span={1}>
                     <Stack>
                         {corr1Components.makeTabs("state", corrTabs)}
                         {corr1Components.makeTabs("history", corrTabs)}
-                        <Center>{corr1Components.undoRedoButtons}</Center>
+                        <Center>
+                            {corr1Components.undoRedoButtons}
+                            <Space w="sm"/>
+                            {makeInfoHoverCardIcon(<>
+                                {undoButtonHelpText}
+                                <Space h="sm"/>
+                                {undoButtonHelpTextCorr}
+                            </>)}
+                        </Center>
                     </Stack>
                 </Grid.Col>
                 <Grid.Col span={1}>
                     <Stack>
                         {asComponents.makeTabs("state", asTabs)}
                         {asComponents.makeTabs("history", asTabs)}
-                        <Center>{asComponents.undoRedoButtons}</Center>
+                        <Center>
+                            {asComponents.undoRedoButtons}
+                            <Space w="sm"/>
+                            {makeInfoHoverCardIcon(undoButtonHelpText)}
+                        </Center>
                     </Stack>
                 </Grid.Col>
                 <Grid.Col span={1}>
                     <Stack>
                         {corr2Components.makeTabs("state", corrTabs)}
                         {corr2Components.makeTabs("history", corrTabs)}
-                        <Center>{corr2Components.undoRedoButtons}</Center>
+                        <Center>
+                            {corr2Components.undoRedoButtons}
+                            <Space w="sm"/>
+                            {makeInfoHoverCardIcon(<>
+                                {undoButtonHelpText}
+                                <Space h="sm"/>
+                                {undoButtonHelpTextCorr}
+                            </>)}
+                        </Center>
                     </Stack>
                 </Grid.Col>
                 <Grid.Col span={1}>
                     <Stack>
                         {cs2Components.makeTabs("editor", csTabs)}
                         {cs2Components.makeTabs("history", csTabs)}
-                        <Center>{cs2Components.undoRedoButtons}</Center>
+                        <Center>
+                            {cs2Components.undoRedoButtons}
+                            <Space w="sm"/>
+                            {makeInfoHoverCardIcon(undoButtonHelpText)}
+                        </Center>
                     </Stack>
                 </Grid.Col>
             </Grid>

src/frontend/demo_corr.tsx

@@ -4,8 +4,8 @@ import {SimpleGrid, Text, Title, Stack, Center, Image, Group, Space} from "@mant
 import {PrimitiveRegistry} from "../onion/primitive_delta";
 import {mockUuid} from "../onion/test_helpers";
 
-import {newVersionedModel, VersionedModelState} from "./versioned_model";
-import {newCorrespondence} from "./correspondence";
+import {newVersionedModel, VersionedModelState, undoButtonHelpText} from "./versioned_model";
+import {newCorrespondence, undoButtonHelpTextCorr} from "./correspondence";
 import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
 import {makeInfoHoverCardIcon} from "./help_icons";
 import corr_csImage from './assets/corr_cs.svg';
@@ -176,8 +176,6 @@ export function getDemoCorr() {
         const corrTabs = ["state", "history", "dependencyL1", "dependencyL0"];
         const asTabs = ["state", "history", "dependencyL1", "dependencyL0"];
 
-        const undoButtonHelpText = "Use the Undo/Redo buttons or the History panel to navigate to any version.";
-
         return (<div style={{minWidth: 1300}}>
             {getModalManualRenderer(manualRendererState)}
 
@@ -213,8 +211,7 @@ export function getDemoCorr() {
                             {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.
+                                {undoButtonHelpTextCorr}
                             </>)}
                         </Center>
                     </Stack>

src/frontend/demo_pd.tsx

@@ -102,7 +102,9 @@ export const demo_PD_description =
 import {
     newVersionedModel,
     VersionedModelState,
+    undoButtonHelpText,
 } from "./versioned_model";
+import {makeInfoHoverCardIcon} from "./help_icons";
 
 export function getDemoPD() {
     const primitiveRegistry = new PrimitiveRegistry();
@@ -198,14 +200,6 @@ export function getDemoPD() {
                     <div>
                         <Text>History</Text>
                         {components.historyComponent}
-                        <Space h="md"/>
-                        <SimpleGrid cols={4} spacing="xs">
-                            <Button onClick={unionClicked} compact disabled={i === 0}
-                                    leftIcon={<Icons.IconChevronUp/>}>Union </Button>
-                            {components.undoButton}
-                            {components.redoButton}
-                            <Button onClick={cloneClicked} compact rightIcon={<Icons.IconChevronDown/>}>Clone</Button>
-                        </SimpleGrid>
                     </div>
                     <div>
                         <Text>Deltas (L0)</Text>
@@ -213,6 +207,15 @@ export function getDemoPD() {
                     </div>
                 </SimpleGrid>
                 <Space h="md"/>
+                <Group position="center">
+                    <Button onClick={unionClicked} compact disabled={i === 0}
+                            leftIcon={<Icons.IconChevronUp/>}>Union </Button>
+                    {components.undoButton}
+                    {components.redoButton}
+                    {makeInfoHoverCardIcon(undoButtonHelpText)}
+                    <Button onClick={cloneClicked} compact rightIcon={<Icons.IconChevronDown/>}>Clone</Button>
+                </Group>
+                <Space h="md"/>
             </div>
         })
         }</>;

src/frontend/versioned_model.tsx

@@ -108,6 +108,8 @@ const helpText = {
   </>,
 };
 
+export const undoButtonHelpText = "Use the Undo/Redo buttons or the History panel to navigate to any version.";
+
 export interface VersionedModelState {
   version: Version; // the 'current version'
   graph: GraphType; // the state what is displayed in the leftmost panel