Display hash of build commit

frontend/webEditor/.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+src/helpUi/hash.json

frontend/webEditor/package.json

@@ -6,6 +6,7 @@
         "type": "git",
         "url": "https://github.com/DataFlowAnalysis/OnlineEditor.git"
     },
+    "type": "module",
     "devDependencies": {
         "@eslint/eslintrc": "^3.3.3",
         "@eslint/js": "^9.39.1",
@@ -32,7 +33,11 @@
         "preview": "vite preview",
         "format": "prettier --write \"./**/*.{html,css,ts,tsx,json}\"",
         "lint": "eslint --max-warnings 0 --no-warn-ignored",
-        "prepare": "husky"
+        "prepare": "husky",
+        "postprepare": "npm run fetch-hash",
+        "prebuild": "npm run fetch-hash",
+        "predev": "npm run fetch-hash",
+        "fetch-hash": "node ./scripts/fetchHash.js"
     },
     "lint-staged": {
         "*.{html,css,ts,tsx,json}": [

frontend/webEditor/scripts/fetchHash.js

@@ -0,0 +1,13 @@
+import { writeFileSync } from 'fs'
+import { execSync } from 'child_process'
+
+let hash = 'unknown'
+try {
+  hash = execSync('git rev-parse HEAD').toString().trim()
+} catch (e) {
+  // eslint-disable-next-line no-console, no-undef
+  console.warn('Could not retrieve git hash:', e)
+}
+const filePath = 'src/helpUi/hash.json'
+const fileContent = JSON.stringify({ hash })
+writeFileSync(filePath, fileContent)

frontend/webEditor/src/helpUi/helpUi.css

@@ -14,4 +14,11 @@
         vertical-align: text-top;
         margin-right: 4px;
     }
+
+    #hashHolder {
+        font-size: small;
+        margin-top: 4px;
+        display: flex;
+        gap: 2px;
+    }
 }

frontend/webEditor/src/helpUi/helpUi.ts

@@ -1,6 +1,7 @@
 import { injectable } from "inversify";
 import "./helpUi.css";
 import { AccordionUiExtension } from "../accordionUiExtension";
+import hashJson from "./hash.json";
 
 @injectable()
 export class HelpUI extends AccordionUiExtension {
@@ -35,9 +36,26 @@ export class HelpUI extends AccordionUiExtension {
             <p><kbd>Esc</kbd>: Disable current creation tool</p>
             <p>Toggle Creation Tool: Refer to key in the tool palette</p>
         `;
+
+        contentElement.appendChild(this.buildCommitHash());
     }
     protected initializeHeaderContent(headerElement: HTMLElement) {
         headerElement.classList.add("help-accordion-icon");
         headerElement.innerText = "Keyboard Shortcuts | Help";
     }
+
+    private buildCommitHash(): HTMLElement {
+        const holder = document.createElement("div");
+        holder.id = "hashHolder";
+        holder.innerHTML = "Commit:";
+
+        const link = document.createElement("a");
+        link.innerHTML = hashJson.hash.substring(0, 6);
+        link.href = `https://github.com/DataFlowAnalysis/OnlineEditor/tree/${hashJson.hash}`;
+        link.id = "hash";
+        link.target = "_blank";
+
+        holder.appendChild(link);
+        return holder;
+    }
 }