Show git revision in frontend

package.json

@@ -32,16 +32,16 @@
 		"@types/react": "^18.2.6",
 		"@types/react-dom": "^18.2.4",
 		"fork-ts-checker-webpack-plugin": "^7.3.0",
+		"lodash": "^4.17.21",
 		"mocha": "^10.2.0",
 		"nyc": "^15.1.0",
 		"ts-loader": "^9.4.2",
+		"ts-node": "^9.1.1",
+		"typescript": "^4.9.5",
 		"url-loader": "^4.1.1",
 		"webpack": "^5.83.0",
 		"webpack-cli": "^5.1.1",
-		"webpack-dev-server": "^4.11.1",
-		"ts-node": "^9.1.1",
-		"typescript": "^4.9.5",
-		"lodash": "^4.17.21"
+		"webpack-dev-server": "^4.11.1"
 	},
 	"scripts": {
 		"test": "mocha --require ts-node/register",

src/frontend/app.tsx

@@ -14,6 +14,9 @@ import {demo_Welcome_description, Welcome} from "./demos/demo_welcome";
 import {demo_LE_description, getDemoLE} from "./demos/demo_le";
 import {demo_Live_description, getDemoLive} from "./demos/demo_live";
 
+// Set by WebPack during build:
+declare const REVISION: string;
+
 export function getApp() {
     const DemoEditor = getDemoEditor();
     const DemoPD = getDemoPD();
@@ -40,7 +43,7 @@ export function getApp() {
                     <Allotment maxSize={'50%'}>
                         <Allotment.Pane preferredSize={250} minSize={150} snap>
                             <Stack style={{height: '100%', direction: 'column', gap: '0px'}}>
-                                <Title order={4} style={{paddingLeft: '5px'}}>Pick a demo:</Title>
+                                {/* <Title order={4} style={{paddingLeft: '5px'}}>Demo</Title> */}
                                 <Tabs.List>
                                     <Tabs.Tab style={tabStyle} value="welcome">Welcome</Tabs.Tab>
                                     <Tabs.Tab style={tabStyle} value="pd">Primitive Deltas</Tabs.Tab>
@@ -108,13 +111,22 @@ export function getApp() {
                                         <Tabs.Panel value="sem">
                                             <DemoLive/>
                                         </Tabs.Panel>
-                                        <Anchor href="https://msdl.uantwerpen.be/git/jexelmans/onioncollab"
-                                                target="_blank"
-                                                style={{position: "absolute", bottom: 8, right: 8, fontWeight: 'bold'}}
-                                                size={18}
-                                        >
-                                            <IconExternalLink size={20} style={{marginRight: 4}}/>Source Code
-                                        </Anchor>
+                                        <div style={{position: "absolute", bottom: 8, right: 8 }}>{
+                                            // it's possible that the git revision is unknown (e.g., if the source was downloaded as ZIP)
+                                            REVISION === "unknown" ?
+                                            <>
+                                                <Anchor href="https://msdl.uantwerpen.be/git/jexelmans/onioncollab" target="_blank">
+                                                    Source Code
+                                                    <IconExternalLink size={16} style={{marginLeft: 4}}/>
+                                                </Anchor>
+                                            </>
+                                            : <>git revision:&nbsp;
+                                                <Anchor href={"https://msdl.uantwerpen.be/git/jexelmans/onioncollab/src/"+REVISION} target="_blank">
+                                                    {REVISION.substring(0,8)}
+                                                    <IconExternalLink size={16} style={{marginLeft: 4}}/>
+                                                </Anchor>
+                                            </>
+                                        }</div>
                                     </div>
                                 </ScrollArea>
                             </div>

src/frontend/demos/demo_le.tsx

@@ -17,7 +17,7 @@ import {names} from "../../util/names";
 export const demo_LE_description =
     <>
         <Title order={4}>
-            List Editorcom
+            List Editor
         </Title>
         <Text>
             This demo was not mentioned in our (submitted) paper, and was added in response to a question from one of the reviewers. The reviewer wanted to know if we can support data structures other than objects diagrams with primitive values in the objects' slots.

webpack.config.cjs

@@ -1,7 +1,15 @@
 const path = require('path');
-// import * as path from "path";
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-// import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+const child_process = require('child_process');
+const webpack = require('webpack');
+
+let revision;
+try {
+  revision = child_process.execSync('git rev-parse HEAD').toString();
+}
+catch (e) {
+  revision = "unknown";
+}
 
 // export default { 
 module.exports = {
@@ -47,6 +55,9 @@ module.exports = {
     port: 9000,
   },
   plugins: [
-    new ForkTsCheckerWebpackPlugin()
+    new ForkTsCheckerWebpackPlugin(),
+    new webpack.DefinePlugin({
+      REVISION: JSON.stringify(revision),
+    }),
   ]
-};
+};