Update dependencies. Apply necessary fixes.

helikon-labs · Oct 28, 2024 · ea992bf · ea992bf
1 parent ba3d279
commit ea992bf
Show file tree

Hide file tree

Showing 11 changed files with 4,099 additions and 2,634 deletions.
diff --git a/dist/client/bundle.js.LICENSE.txt b/dist/client/bundle.js.LICENSE.txt
@@ -19,6 +19,6 @@ and limitations under the License.
 
 /**
  * @license
- * Copyright 2010-2023 Three.js Authors
+ * Copyright 2010-2024 Three.js Authors
  * SPDX-License-Identifier: MIT
  */
diff --git a/dist/client/index.html b/dist/client/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <title>ChainViz by Helikon</title>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,44 +15,44 @@
     "author": "kukabi @ Helikon Labs",
     "license": "GPL 3",
     "devDependencies": {
-        "@polkadot/api": "^12.4.2",
-        "@polkadot/api-derive": "^12.4.2",
-        "@polkadot/types": "^12.4.2",
-        "@polkadot/keyring": "^13.0.2",
-        "@polkadot/ui-shared": "^3.9.1",
+        "@polkadot/api": "^14.1.1",
+        "@polkadot/api-derive": "^14.1.1",
+        "@polkadot/keyring": "^13.2.1",
+        "@polkadot/types": "^14.1.1",
+        "@polkadot/ui-shared": "^3.11.1",
         "@tweenjs/tween.js": "^20.0.3",
-        "@types/async-lock": "^1.4.0",
-        "@types/camelcase-keys-deep": "^0.1.0",
-        "@types/express": "^4.17.17",
-        "@types/node": "^20.1.5",
-        "@types/three": "^0.149.0",
-        "@typescript-eslint/eslint-plugin": "^5.59.6",
-        "@typescript-eslint/parser": "^5.59.6",
-        "async-lock": "^1.4.0",
+        "@types/async-lock": "^1.4.2",
+        "@types/camelcase-keys-deep": "^0.1.2",
+        "@types/express": "^5.0.0",
+        "@types/node": "^22.8.1",
+        "@types/three": "^0.169.0",
+        "@typescript-eslint/eslint-plugin": "^8.11.0",
+        "@typescript-eslint/parser": "^8.11.0",
+        "async-lock": "^1.4.1",
         "camelcase-keys-deep": "^0.1.0",
         "cannon-es": "^0.20.0",
-        "eslint": "^8.40.0",
-        "eslint-config-standard": "^17.0.0",
-        "eslint-plugin-import": "^2.27.5",
+        "eslint": "^8.57.1",
+        "eslint-config-standard": "^17.1.0",
+        "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-promise": "^6.1.1",
-        "express": "^4.18.2",
-        "follow-redirects": "^1.15.2",
+        "eslint-plugin-promise": "^6.0.0",
+        "express": "^4.21.1",
+        "follow-redirects": "^1.15.9",
         "minimist": "^1.2.8",
         "node-forge": "^1.3.1",
-        "prettier": "^2.8.8",
+        "prettier": "^3.3.3",
         "reconnecting-websocket": "^4.4.0",
-        "terser": "^5.17.4",
-        "three": "^0.150.1",
-        "tone": "^14.7.77",
-        "ts-loader": "^9.4.2",
-        "typescript": "^5.0.4",
+        "terser": "^5.36.0",
+        "three": "^0.169.0",
+        "tone": "^15.0.4",
+        "ts-loader": "^9.5.1",
+        "typescript": "^5.6.3",
         "visibilityjs": "^2.0.2",
-        "webpack": "^5.82.1",
-        "webpack-cli": "^5.1.1",
-        "webpack-dev-server": "^4.15.0",
-        "webpack-merge": "^5.8.0",
-        "ws": "^8.13.0"
+        "webpack": "^5.95.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.1.0",
+        "webpack-merge": "^6.0.1",
+        "ws": "^8.18.0"
     },
     "dependencies": {}
 }
diff --git a/src/client/model/app/block.ts b/src/client/model/app/block.ts
@@ -66,7 +66,7 @@ class Block {
                 {
                     font: font,
                     size: 0.45,
-                    height: 0,
+                    depth: 0,
                     curveSegments: 6,
                 }
             );
@@ -80,7 +80,7 @@ class Block {
             this.finalizedTextGeometry = new TextGeometry('+', {
                 font: font,
                 size: 2,
-                height: 0,
+                depth: 0,
                 curveSegments: 6,
             });
             const mesh = new THREE.Mesh(this.finalizedTextGeometry, this.finalizedTextMaterial);

diff --git a/src/client/scene/scene.ts b/src/client/scene/scene.ts
@@ -2,7 +2,6 @@ import * as THREE from 'three';
 import * as TWEEN from '@tweenjs/tween.js';
 import { Block as SubstrateBlock, SignedBlock } from '@polkadot/types/interfaces';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-import Stats from 'three/examples/jsm/libs/stats.module';
 import { Block } from '../model/app/block';
 import { ValidatorSummary, ValidatorSummaryDiff } from '../model/subvt/validator_summary';
 import AsyncLock from 'async-lock';
@@ -19,15 +18,17 @@ import {
     ValidatorDetailsBoardDelegate,
 } from '../ui/validator_details_board';
 import { HeaderExtended } from '@polkadot/api-derive/types';
-import Visibility = require('visibilityjs');
+import * as Visibility from 'visibilityjs';
 import { createTween } from '../util/tween';
 
+// THREE.ColorManagement.enabled = false;
+
 class ChainVizScene {
     private readonly scene: THREE.Scene;
     private readonly camera: THREE.PerspectiveCamera;
     private readonly controls: OrbitControls;
     private readonly renderer: THREE.WebGLRenderer;
-    private readonly stats: Stats;
+    // private readonly stats: Stats;
 
     private readonly raycaster: THREE.Raycaster;
     private readonly hoverPoint: THREE.Vector2 = new THREE.Vector2();
@@ -75,7 +76,7 @@ class ChainVizScene {
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.shadowMap.enabled = true;
         this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-        // this.renderer.outputColorSpace  = THREE.LinearSRGBColorSpace;
+        this.renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
         document.body.appendChild(this.renderer.domElement);
         document.addEventListener('click', (event) => {
             this.onClick(event);
@@ -94,7 +95,8 @@ class ChainVizScene {
         });
 
         // stats
-        this.stats = Stats();
+        // this.stats = Stats();
+
         //document.body.appendChild(this.stats.dom);
         //this.stats.domElement.style.cssText = "position:absolute; bottom:0px; right:0px;";
         // orbit controls
@@ -173,25 +175,27 @@ class ChainVizScene {
         // point light front
         {
             const pointLight = new THREE.PointLight(0x404040);
-            pointLight.intensity = 1.0;
+            pointLight.intensity = Math.PI * 1.0 * 10;
             pointLight.position.x = 60;
             pointLight.position.y = 60;
             pointLight.position.z = 30;
+            pointLight.decay = 0.15;
             pointLight.castShadow = true;
             this.scene.add(pointLight);
         }
         // point light back
         {
             const pointLight = new THREE.PointLight(0x404040);
-            pointLight.intensity = 1.0;
+            pointLight.intensity = Math.PI * 1.0 * 10;
             pointLight.position.x = -20;
             pointLight.position.y = -40;
             pointLight.position.z = -30;
+            pointLight.decay = 0.15;
             pointLight.castShadow = true;
             this.scene.add(pointLight);
         }
         // ambient light
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        const ambientLight = new THREE.AmbientLight(0xffffff, Math.PI * 0.6);
         this.scene.add(ambientLight);
     }
 
@@ -258,7 +262,7 @@ class ChainVizScene {
         this.controls.update();
         this.render();
         TWEEN.update();
-        this.stats.update();
+        // this.stats.update();
     }
 
     private setPointerCursor() {

diff --git a/src/client/service/rpc/RPCSubscriptionService.ts b/src/client/service/rpc/RPCSubscriptionService.ts
@@ -1,5 +1,5 @@
 import ReconnectingWebSocket from 'reconnecting-websocket';
-import camelcaseKeysDeep = require('camelcase-keys-deep');
+import camelcaseKeysDeep from 'camelcase-keys-deep';
 
 class RPCRequest {
     id: number;

diff --git a/src/client/ui/validator_mesh.ts b/src/client/ui/validator_mesh.ts
@@ -25,6 +25,7 @@ class ValidatorMesh {
     private selectedValidatorIndex = -1;
 
     constructor(validatorCount: number) {
+        this.material.vertexColors = false;
         this.mesh = new THREE.InstancedMesh(this.geometry, this.material, validatorCount);
         this.mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
     }
@@ -42,6 +43,10 @@ class ValidatorMesh {
 
     async addTo(scene: THREE.Scene, summaries: Array<ValidatorSummary>) {
         scene.add(this.mesh);
+        for (let i = 0; i < summaries.length; i++) {
+            this.mesh.setColorAt(i, new THREE.Color(0, 0, 0));
+        }
+        this.refreshMeshColor();
         let index = 0;
         for (let ring = 0; ring < this.ringSizes.length; ring++) {
             for (let i = 0; i < this.ringSizes[ring]; i++) {
@@ -149,7 +154,7 @@ class ValidatorMesh {
         index: number,
         renderer: THREE.WebGLRenderer,
         camera: THREE.Camera
-    ): THREE.Vec2 {
+    ): THREE.Vector2 {
         const matrix = new THREE.Matrix4();
         this.mesh.getMatrixAt(index, matrix);
         const position = new THREE.Vector3();

diff --git a/src/client/util/config.ts b/src/client/util/config.ts
@@ -1,7 +1,7 @@
 import { kusama } from '../model/app/network';
 
 export const CONFIG = {
-    development: false,
+    development: true,
     version: '0.1.0-ALPHA',
     host: 'alpha.chainviz.app',
     //networkStatusServiceURL: "ws://localhost:7888",

diff --git a/src/client/util/constants.ts b/src/client/util/constants.ts
@@ -31,6 +31,7 @@ export abstract class Constants {
     static readonly VALIDATOR_GEOM_SEGMENTS = 16;
     static readonly VALIDATOR_GEOM_HEIGHT = 2.8;
     // validator colors
+    static readonly TRANSPARENT_COLOR = new THREE.Color(0.901, 0.0, 0.478);
     static readonly VALIDATOR_COLOR = new THREE.Color(0.901, 0.0, 0.478);
     static readonly VALIDATOR_SHININESS = 6;
     static readonly PARA_VALIDATOR_COLOR = new THREE.Color(0.556, 0.874, 1.0);

diff --git a/src/client/util/geometry.ts b/src/client/util/geometry.ts
@@ -31,7 +31,7 @@ function getOnScreenPosition(
     position: THREE.Vector3,
     renderer: THREE.WebGLRenderer,
     camera: THREE.Camera
-): THREE.Vec2 {
+): THREE.Vector2 {
     position.project(camera);
     const canvas = renderer.domElement;
     const widthHalf = canvas.clientWidth / 2;