Merge pull request #2407 from beyonnex-io/feature/ui-history-exploration

Add history exploration capabilities to Explorer UI

Author: thjaeckle

ui/index.html

@@ -96,7 +96,7 @@
         <div class="collapse show" id="collapseThings" data-bs-parent="#page-content">
             <div id="thingsHTML"></div>
             <div id="featuresHTML"></div>
-            <div id="messagesIncomingHTML"></div>
+            <div id="thingUpdatesHTML"></div>
         </div>
         <div class="collapse" id=collapsePolicies data-bs-parent="#page-content">
             <div id="policyHTML"></div>

ui/main.scss

@@ -286,3 +286,67 @@ h5>.badge {
 button.busy .spinner-border {
   visibility:visible !important;
 }
+
+/* ace-diff styles are imported via main.ts */
+
+#diffContainer {
+  .acediff {
+    --acediff-diff-bg: rgba(58, 140, 154, 0.12);
+    --acediff-diff-border: rgba(58, 140, 154, 0.4);
+    --acediff-diff-char-bg: rgba(58, 140, 154, 0.25);
+    --acediff-gutter-bg: #f8f9fa;
+    --acediff-gutter-border: #dee2e6;
+  }
+
+  .acediff__connector {
+    fill: rgba(58, 140, 154, 0.2);
+    stroke: rgba(58, 140, 154, 0.5);
+  }
+}
+
+/* History mode styles */
+.history-active #details {
+  border-left: 4px solid var(--bs-warning);
+}
+
+.history-banner {
+  font-size: 0.85em;
+}
+
+.history-badge {
+  font-size: 0.6em;
+  vertical-align: top;
+}
+
+#historyRevisionControls .form-range {
+  align-self: center;
+}
+
+/* Revision picker alignment: force fixed sizes to align stacked rows */
+#collapseThings .input-group input[type="number"],
+#collapseThingUpdates .input-group input[type="number"] {
+  flex: 0 0 80px !important;
+  width: 80px !important;
+  padding-right: 6px !important;
+  -moz-appearance: textfield !important;
+}
+
+#collapseThings .input-group input[type="number"]::-webkit-outer-spin-button,
+#collapseThings .input-group input[type="number"]::-webkit-inner-spin-button,
+#collapseThingUpdates .input-group input[type="number"]::-webkit-outer-spin-button,
+#collapseThingUpdates .input-group input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.rev-label {
+  flex: 0 0 75px !important;
+  width: 75px !important;
+  justify-content: center;
+}
+
+.rev-action-btn {
+  flex: 0 0 80px !important;
+  width: 80px !important;
+  justify-content: center;
+}

ui/main.ts

@@ -13,6 +13,7 @@
 import { Dropdown } from 'bootstrap';
 /* eslint-disable new-cap */
 import 'bootstrap/dist/css/bootstrap.min.css';
+import 'ace-diff/styles';
 import './main.scss';
 import * as Connections from './modules/connections/connections.js';
 import * as ConnectionsCRUD from './modules/connections/connectionsCRUD.js';
@@ -33,13 +34,16 @@ import * as Attributes from './modules/things/attributes.js';
 import * as FeatureMessages from './modules/things/featureMessages.js';
 import * as Features from './modules/things/features.js';
 import * as Fields from './modules/things/fields.js';
-import * as MessagesIncoming from './modules/things/messagesIncoming.js';
+import * as ThingsHistory from './modules/things/thingsHistory.js';
+import * as ThingUpdates from './modules/things/thingUpdates.js';
 import * as SearchFilter from './modules/things/searchFilter.js';
 import * as ThingMessages from './modules/things/thingMessages.js';
 import * as Things from './modules/things/things.js';
 import * as ThingsCRUD from './modules/things/thingsCRUD.js';
 import * as ThingsSearch from './modules/things/thingsSearch.js';
 import * as ThingsSSE from './modules/things/thingsSSE.js';
+import { SubDiff } from './modules/things/subDiff.js';
+import { ThingsDiff } from './modules/things/thingsDiff.js';
 import { WoTDescription } from './modules/things/wotDescription.js';
 import * as Utils from './modules/utils.js';
 import './modules/utils/crudToolbar.js';
@@ -56,7 +60,8 @@ document.addEventListener('DOMContentLoaded', async function() {
   await ThingsCRUD.ready();
   await ThingMessages.ready();
   await ThingsSSE.ready();
-  MessagesIncoming.ready();
+  ThingsHistory.ready();
+  ThingUpdates.ready();
   Attributes.ready();
   await Fields.ready();
   await SearchFilter.ready();
@@ -86,13 +91,35 @@ document.addEventListener('DOMContentLoaded', async function() {
   Things.addChangeListener(thingDescription.onReferenceChanged);
   await thingDescription.ready();
 
+  const thingsDiff = ThingsDiff({
+      itemsId: 'tabItemsThing',
+      contentId: 'tabContentThing',
+    });
+  await thingsDiff.ready();
+  Things.addChangeListener(thingsDiff.onThingChanged);
+
+  const attributesDiff = SubDiff({
+      itemsId: 'tabItemsAttribute',
+      contentId: 'tabContentAttribute',
+    }, 'Compare attributes between two revisions');
+  await attributesDiff.ready();
+  thingsDiff.addSubDiff(attributesDiff, 'attributes');
+
   const featureDescription = WoTDescription({
       itemsId: 'tabItemsFeatures',
       contentId: 'tabContentFeatures',
     }, true);
   Features.addChangeListener(featureDescription.onReferenceChanged);
   await featureDescription.ready();
 
+  const featureDiff = SubDiff({
+      itemsId: 'tabItemsFeatures',
+      contentId: 'tabContentFeatures',
+    }, 'Compare selected feature between two revisions');
+  await featureDiff.ready();
+  thingsDiff.addSubDiff(featureDiff, 'feature');
+  Features.addChangeListener(thingsDiff.onFeatureChanged);
+
   // make dropdowns not cutting off
   new Dropdown(document.querySelector('.dropdown-toggle'), {
     popperConfig: {

ui/modules/api.ts

@@ -531,6 +531,20 @@ export function getEventSource(thingIds, urlParams) {
   }
 }
 
+export function getHistoricalEventSource(thingId: string, urlParams: string) {
+  if (authHeaderValue) {
+    return new EventSourcePolyfill(
+      `${Environments.current().api_uri}/api/2/things/${encodeURIComponent(thingId)}?${urlParams}`, {
+        headers: {
+          [authHeaderKey]: authHeaderValue,
+        },
+      },
+    );
+  } else {
+    throw new Error("Authentication missing");
+  }
+}
+
 /**
  * Calls connections api. Uses devops api in case of Ditto and the solutions api in case of Things
  * @param {*} operation connections api operation

ui/modules/policies/policiesJSON.ts

@@ -12,6 +12,7 @@
  */
 
 import * as ace from 'ace-builds/src-noconflict/ace';
+import { Ace } from 'ace-builds';
 import * as API from '../api.js';
 import * as Environments from '../environments/environments.js'
 import * as Utils from '../utils.js';
@@ -30,7 +31,7 @@ let dom: DomElements = {
   selectPolicyJSONTemplate: null,
 };
 
-let policyEditor: ace.Editor;
+let policyEditor: Ace.Editor;
 
 export function ready() {
 

ui/modules/policies/policiesResources.ts

@@ -12,6 +12,7 @@
  */
 
 import * as ace from 'ace-builds/src-noconflict/ace';
+import { Ace } from 'ace-builds';
 import * as API from '../api.js';
 import * as Utils from '../utils.js';
 import { CrudOperation, CrudToolbar } from '../utils/crudToolbar.js';
@@ -35,7 +36,7 @@ let dom : DomElements = {
   crudResource: null,
 } ;
 
-let resourceEditor: ace.Editor;
+let resourceEditor: Ace.Editor;
 
 export function ready() {
   Utils.getAllElementsById(dom);

ui/modules/policies/policiesSubjects.ts

@@ -12,6 +12,7 @@
  */
 
 import * as ace from 'ace-builds/src-noconflict/ace';
+import { Ace } from 'ace-builds';
 import * as API from '../api.js';
 import * as Utils from '../utils.js';
 import { CrudOperation, CrudToolbar } from '../utils/crudToolbar.js';
@@ -33,7 +34,7 @@ let dom: DomElements = {
   crudSubject: null,
 } ;
 
-let subjectEditor: ace.Editor;
+let subjectEditor: Ace.Editor;
 
 export function ready() {
   Utils.getAllElementsById(dom);

ui/modules/things/subDiff.html

@@ -0,0 +1,15 @@
+<!--
+  ~ Copyright (c) 2026 Contributors to the Eclipse Foundation
+  ~
+  ~ See the NOTICE file(s) distributed with this work for additional
+  ~ information regarding copyright ownership.
+  ~
+  ~ This program and the accompanying materials are made available under the
+  ~ terms of the Eclipse Public License 2.0 which is available at
+  ~ http://www.eclipse.org/legal/epl-2.0
+  ~
+  ~ SPDX-License-Identifier: EPL-2.0
+  -->
+<div class="tab-pane container no-margin" style="height: 100%; position: relative;">
+    <div class="sub-diff-container" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+</div>

ui/modules/things/subDiff.ts

@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import * as ace from 'ace-builds/src-noconflict/ace';
+import AceDiff from 'ace-diff';
+import * as Utils from '../utils.js';
+import subDiffHTML from './subDiff.html';
+
+/**
+ * Lightweight reusable diff panel without revision controls.
+ * Shows a side-by-side ace-diff viewer in a dynamically added tab.
+ * Content is provided externally via update().
+ */
+export function SubDiff(targetTab, title: string) {
+  let diffInstance: AceDiff | null = null;
+  let tabLink: HTMLAnchorElement | null = null;
+  let container: HTMLDivElement | null = null;
+  let pendingLeft: string | null = null;
+  let pendingRight: string | null = null;
+  let onActivatedCallback: ((link: HTMLAnchorElement) => void) | null = null;
+
+  return { ready, update, getTabLink, setOnActivated, destroy: destroyDiff };
+
+  async function ready() {
+    const tabId = Utils.addTab(
+      document.getElementById(targetTab.itemsId),
+      document.getElementById(targetTab.contentId),
+      '<i class="bi bi-file-diff"></i> Diff',
+      subDiffHTML,
+      title
+    );
+
+    tabLink = document.querySelector(`a[data-bs-target="#${tabId}"]`);
+    container = document.querySelector(`#${tabId} .sub-diff-container`);
+    tabLink.addEventListener('shown.bs.tab', onTabActivated);
+  }
+
+  function update(leftContent: string, rightContent: string) {
+    pendingLeft = leftContent;
+    pendingRight = rightContent;
+    if (tabLink?.classList.contains('active')) {
+      applyDiff();
+    }
+  }
+
+  function getTabLink(): HTMLAnchorElement | null {
+    return tabLink;
+  }
+
+  function setOnActivated(callback: (link: HTMLAnchorElement) => void) {
+    onActivatedCallback = callback;
+  }
+
+  function onTabActivated() {
+    if (pendingLeft !== null) {
+      applyDiff();
+    }
+    if (onActivatedCallback && tabLink) {
+      onActivatedCallback(tabLink);
+    }
+  }
+
+  function applyDiff() {
+    if (!container) return;
+    const left = pendingLeft || '';
+    const right = pendingRight || '';
+
+    if (diffInstance) {
+      const editors = diffInstance.getEditors();
+      editors.left.setValue(left, -1);
+      editors.right.setValue(right, -1);
+      diffInstance.diff();
+    } else {
+      diffInstance = new AceDiff({
+        ace: ace as unknown as { edit: typeof ace.edit },
+        element: container,
+        mode: 'ace/mode/json',
+        theme: null,
+        diffGranularity: 'specific',
+        lockScrolling: true,
+        showDiffs: true,
+        showConnectors: true,
+        charDiffs: true,
+        maxDiffs: 5000,
+        left: {
+          content: left,
+          editable: false,
+          copyLinkEnabled: false,
+        },
+        right: {
+          content: right,
+          editable: false,
+          copyLinkEnabled: false,
+        },
+      });
+    }
+  }
+
+  function destroyDiff() {
+    if (diffInstance) {
+      diffInstance.destroy();
+      diffInstance = null;
+    }
+    pendingLeft = null;
+    pendingRight = null;
+    if (container) {
+      container.textContent = '';
+    }
+  }
+}