Improve visualizer (#310)

iotaledger · Apr 25, 2024 · 6d0f6b2 · 6d0f6b2
1 parent 74ac365
commit 6d0f6b2
Show file tree

Hide file tree

Showing 35 changed files with 697 additions and 468 deletions.
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -14,6 +14,7 @@ import { IPublicNodeStatus } from "../models/websocket/IPublicNodeStatus";
 import { ISyncStatus } from "../models/websocket/ISyncStatus";
 import { WebSocketTopic } from "../models/websocket/webSocketTopic";
 import { AuthService } from "../services/authService";
+import { DashboardConfigService } from "../services/dashboardConfigService";
 import { EventAggregator } from "../services/eventAggregator";
 import { LocalStorageService } from "../services/localStorageService";
 import { MetricsService } from "../services/metricsService";
@@ -53,6 +54,11 @@ class App extends AsyncComponent<RouteComponentProps, AppState> {
      */
     private readonly _storageService: LocalStorageService;
 
+    /**
+     * The dashboard config service.
+     */
+    private readonly _dashboardConfigService: DashboardConfigService;
+
     /**
      * The metrics service.
      */
@@ -79,14 +85,14 @@ class App extends AsyncComponent<RouteComponentProps, AppState> {
     private _alias?: string;
 
     /**
-     * The lastest milestone index.
+     * The lastest committed slot.
      */
-    private _lmi?: string;
+    private _latestCommitmentSlot?: string;
 
     /**
-     * The confirmed milestone index.
+     * The latest finalized slot.
      */
-    private _cmi?: string;
+    private _latestFinalizedSlot?: string;
 
     /**
      * The time of the last status update.
@@ -111,6 +117,7 @@ class App extends AsyncComponent<RouteComponentProps, AppState> {
         super(props);
         this._themeService = ServiceFactory.get<ThemeService>("theme");
         this._authService = ServiceFactory.get<AuthService>("auth");
+        this._dashboardConfigService = ServiceFactory.get<DashboardConfigService>("dashboard-config");
         this._metricsService = ServiceFactory.get<MetricsService>("metrics");
         this._storageService = ServiceFactory.get<LocalStorageService>("local-storage");
 
@@ -160,12 +167,12 @@ class App extends AsyncComponent<RouteComponentProps, AppState> {
             WebSocketTopic.SyncStatus,
             data => {
                 if (data) {
-                    const lmi = data.latestCommitmentSlot ? data.latestCommitmentSlot.toString() : "";
-                    const smi = data.latestFinalizedSlot ? data.latestFinalizedSlot.toString() : "";
+                    const latestCommitmentSlot = data.latestCommitmentSlot ? data.latestCommitmentSlot.toString() : "";
+                    const latestFinalizedSlot = data.latestFinalizedSlot ? data.latestFinalizedSlot.toString() : "";
 
-                    if (lmi !== this._lmi || smi !== this._cmi) {
-                        this._cmi = smi;
-                        this._lmi = lmi;
+                    if (latestCommitmentSlot !== this._latestCommitmentSlot || latestFinalizedSlot !== this._latestFinalizedSlot) {
+                        this._latestCommitmentSlot = latestCommitmentSlot;
+                        this._latestFinalizedSlot = latestFinalizedSlot;
                         this.updateTitle();
                     }
                 }
@@ -386,8 +393,8 @@ class App extends AsyncComponent<RouteComponentProps, AppState> {
         if (this._alias) {
             title += ` (${this._alias})`;
         }
-        if (this._lmi && this._cmi) {
-            title += ` ${this._cmi} / ${this._lmi}`;
+        if (this._latestCommitmentSlot && this._latestFinalizedSlot) {
+            title += ` ${this._latestFinalizedSlot} / ${this._latestCommitmentSlot}`;
         }
 
         document.title = title;

diff --git a/src/app/components/layout/InfoPanel.tsx b/src/app/components/layout/InfoPanel.tsx
@@ -15,12 +15,12 @@ class InfoPanel extends Component<InfoPanelProps> {
      * @returns The node to render.
      */
     public render(): ReactNode {
-        let cmi = "";
-        let lmi = "";
+        let latestFinalizedSlot = "";
+        let latestCommitmentSlot = "";
         if (this.props.caption === SYNC_STATUS_CAPTION && this.props.value) {
-            const milestone = this.props.value.split("/");
-            cmi = milestone[0];
-            lmi = milestone[1];
+            const slots = this.props.value.split("/");
+            latestFinalizedSlot = slots[0];
+            latestCommitmentSlot = slots[1];
         }
         return (
             <div className={classNames("card", "info-panel", this.props.className)}>
@@ -38,7 +38,7 @@ class InfoPanel extends Component<InfoPanelProps> {
                                 {
                                     this.props.value ?
                                         <div className="value">
-                                            {cmi} / <span className="lmi">{lmi}</span>
+                                            {latestFinalizedSlot} / <span className="lmi">{latestCommitmentSlot}</span>
                                         </div> :
                                         "-"
                                 }

diff --git a/src/app/routes/Visualizer.scss b/src/app/routes/Visualizer.scss
@@ -112,35 +112,35 @@
     }
   }
 
-  .vertex-state--solid {
-    background-color: #4caaff;
+  .vertex-state--unknown {
+    background-color: #9aadce;
+  }
+
+  .vertex-state--pending {
+    background-color: #ecdf1e;
   }
 
-  .vertex-state--unsolid {
+  .vertex-state--accepted {
     background-color: #8fe6fa;
   }
 
-  .vertex-state--referenced {
+  .vertex-state--confirmed {
+    background-color: #2260e7;
+  }
+
+  .vertex-state--finalized {
     background-color: #61e884;
   }
 
   .vertex-state--transaction {
     background-color: #c061e8;
   }
 
-  .vertex-state--conflicting {
-    background-color: #ff8b5c;
-  }
-
-  .vertex-state--milestone {
+  .vertex-state--validation {
     background-color: #d92121;
   }
 
-  .vertex-state--unknown {
-    background-color: #9aadce;
-  }
-
   .vertex-state--tip {
-    background-color: #ffca62;
+    background-color: #ff8b5c;
   }
 }