display hash of build commit

Author: Kr0nox

frontend/webEditor/.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+src/settings/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
+  console.warn('Could not retrieve git hash:', e)
+}
+const filePath = 'src/settings/hash.json'
+const fileContent = JSON.stringify({ hash })
+writeFileSync(filePath, fileContent)

frontend/webEditor/src/settings/SettingsUi.ts

@@ -6,6 +6,7 @@ import { HideEdgeNames, SETTINGS, SimplifyNodeNames } from "./Settings";
 import { EditorModeController } from "./editorMode";
 import { Theme, ThemeManager } from "./Theme";
 import { ShownLabels, ShownLabelsValue } from "./ShownLabels";
+import hashJson from './hash.json'
 
 @injectable()
 export class SettingsUI extends AccordionUiExtension {
@@ -42,13 +43,29 @@ export class SettingsUI extends AccordionUiExtension {
         this.addBooleanSwitch(grid, "Hide Edge Names", this.hideEdgeNames);
         this.addBooleanSwitch(grid, "Simplify Node Names", this.simplifyNodeNames);
         this.addSwitch(grid, "Read Only", this.editorModeController, { true: "view", false: "edit" });
+        contentElement.appendChild(this.buildCommitHash())
     }
 
     protected initializeHeaderContent(headerElement: HTMLElement): void {
         headerElement.classList.add("settings-accordion-icon");
         headerElement.innerText = "Settings";
     }
 
+    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
+    }
+
     private addBooleanSwitch(container: HTMLElement, title: string, value: SettingsValue<boolean>): void {
         this.addSwitch<boolean>(container, title, value, { true: true, false: false });
     }

frontend/webEditor/src/settings/settingsUi.css

@@ -108,3 +108,11 @@ input:checked + .slider:before {
 .slider.round:before {
     border-radius: 50%;
 }
+
+.settings-ui #hashHolder {
+    font-size: small;
+    margin-top: 8px;
+    display: flex;
+    gap: 2px;
+}
+