feature: update shape of tangle.

Signed-off-by: Eugene Panteleymonchuk <[email protected]>

api/.eslintignore

@@ -1,3 +1,2 @@
 .eslintrc.js
 *.d.ts
-novaFeed.ts

api/src/initServices.ts

@@ -1,6 +1,6 @@
 import { MqttClient as ChrysalisMqttClient } from "@iota/mqtt.js";
 import { Client as StardustClient } from "@iota/sdk";
-// import { initLogger, Client as NovaMqttClient } from "@iota/sdk-nova";
+import { initLogger, Client as NovaMqttClient } from "@iota/sdk-nova";
 import { ServiceFactory } from "./factories/serviceFactory";
 import logger from "./logger";
 import { IConfiguration } from "./models/configuration/IConfiguration";
@@ -29,7 +29,7 @@ import { NodeInfoService } from "./services/stardust/nodeInfoService";
 import { StardustStatsService } from "./services/stardust/stats/stardustStatsService";
 
 // iota-sdk debug
-// initLogger();
+initLogger();
 
 const CURRENCY_UPDATE_INTERVAL_MS = 5 * 60000;
 
@@ -241,13 +241,13 @@ function initStardustServices(networkConfig: INetwork): void {
 function initNovaServices(networkConfig: INetwork): void {
     logger.verbose(`Initializing Nova services for ${networkConfig.network}`);
 
-    // const mqttInstance = new NovaMqttClient(
-    //     { nodes: [networkConfig.feedEndpoint], brokerOptions: { useWs: true }, ignoreNodeHealth: true }
-    // );
-    // ServiceFactory.register(
-    //     `mqtt-${networkConfig.network}`,
-    //     () => mqttInstance
-    // );
+    const mqttInstance = new NovaMqttClient(
+        { nodes: [networkConfig.feedEndpoint], brokerOptions: { useWs: true }, ignoreNodeHealth: true }
+    );
+    ServiceFactory.register(
+        `mqtt-${networkConfig.network}`,
+        () => mqttInstance
+    );
 
     const feedInstance = new NovaFeed(networkConfig.network);
     ServiceFactory.register(

api/src/services/nova/feed/novaFeed.ts

@@ -1,11 +1,8 @@
+import { BasicBlock, Client, IBlockMetadata } from "@iota/sdk-nova";
 import { ClassConstructor, plainToInstance } from "class-transformer";
 import { ServiceFactory } from "../../../factories/serviceFactory";
 import logger from "../../../logger";
 
-class Mock {
-
-}
-
 /**
  * Wrapper class around Nova MqttClient.
  * Streaming blocks from mqtt (upstream) to explorer-client connections (downstream).
@@ -21,7 +18,7 @@ export class NovaFeed {
     /**
      * Mqtt service for data (upstream).
      */
-    private readonly _mqttClient: any;
+    private readonly _mqttClient: Client;
 
     /**
      * Creates a new instance of NovaFeed.
@@ -30,7 +27,7 @@ export class NovaFeed {
     constructor(networkId: string) {
         logger.debug("[NovaFeed] Constructing a Nova Feed");
         this.blockSubscribers = {};
-        this._mqttClient = ServiceFactory.get<any>(`mqtt-${networkId}`);
+        this._mqttClient = ServiceFactory.get<Client>(`mqtt-${networkId}`);
 
         logger.debug(`[NovaFeed] Mqtt is ${JSON.stringify(this._mqttClient)}`);
 
@@ -49,7 +46,7 @@ export class NovaFeed {
         // eslint-disable-next-line no-void
         void this._mqttClient.listenMqtt(["blocks"], (_, message) => {
             try {
-                const block: any = this.parseMqttPayloadMessage(Mock, message);
+                const block: BasicBlock = this.parseMqttPayloadMessage(BasicBlock, message);
                 const update: Partial<Record<string, unknown>> = {
                     block
                 };
@@ -66,7 +63,7 @@ export class NovaFeed {
         // eslint-disable-next-line no-void
         void this._mqttClient.listenMqtt(["block-metadata/referenced"], (_, message) => {
             const parsed: { topic: string; payload: string } = JSON.parse(message);
-            const metadata: any = JSON.parse(parsed.payload);
+            const metadata: IBlockMetadata = JSON.parse(parsed.payload);
 
             logger.debug(`New metadata ${JSON.stringify(metadata)}`);
 

client/src/features/visualizer-threejs/Emitter.tsx

@@ -55,7 +55,7 @@ const Emitter: React.FC<EmitterProps> = ({
     });
 
     // The Tangle rendering hook
-    useRenderTangle(emitterRef);
+    useRenderTangle();
 
     return (
         <mesh

client/src/features/visualizer-threejs/VisualizerInstance.tsx

@@ -55,7 +55,7 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
     const blockIdToPosition = useTangleStore(s => s.blockIdToPosition);
     const blockMetadata = useTangleStore(s => s.blockMetadata);
     const indexToBlockId = useTangleStore(s => s.indexToBlockId);
-    const addBlockAnimation = useTangleStore(s => s.addBlockAnimation);
+    // const addBlockAnimation = useTangleStore(s => s.addBlockAnimation);
 
     const emitterRef = useRef<THREE.Mesh>(null);
     const feedServiceRef = useRef<StardustFeedClient | null>(null);
@@ -146,18 +146,22 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
                 bpsCounter.start();
             }
 
-            addBlock({
-                id: blockData.blockId,
-                position,
-                color: PENDING_BLOCK_COLOR
-            });
-            addBlockAnimation(blockData.blockId);
-
             blockIdToPosition.set(blockData.blockId, position);
             blockMetadata.set(blockData.blockId, blockData);
 
             addToEdgeQueue(blockData.blockId, blockData.parents ?? []);
             addYPosition(Y);
+
+            addBlock({
+                id: blockData.blockId,
+                position,
+                color: PENDING_BLOCK_COLOR,
+                initPosition: {
+                    x: randomIntFromInterval(emitterBox.min.x, emitterBox.max.x),
+                    y: 0,
+                    z: randomIntFromInterval(emitterBox.min.z, emitterBox.max.z)
+                }
+            });
         }
     };
 

client/src/features/visualizer-threejs/constants.ts

@@ -18,6 +18,7 @@ export const ZOOM_DEFAULT = 2;
 export const TIME_DIFF_COUNTER = 250;
 export const SECOND = 1000;
 export const DATA_SENDER_TIME_INTERVAL = 500;
+export const ANIMATION_TIME_SECONDS = 3;
 
 // colors
 export const PENDING_BLOCK_COLOR = new Color('#A6C3FC')

client/src/features/visualizer-threejs/store/tangle.ts

@@ -4,7 +4,19 @@ import { devtools } from "zustand/middleware";
 import { ZOOM_DEFAULT } from "../constants";
 import {IFeedBlockData} from "../../../models/api/stardust/feed/IFeedBlockData";
 
-interface BlockState {
+interface IPosition {
+    x: number;
+    y: number;
+    z: number;
+}
+
+export interface IBlockAnimation {
+    [blockId: string]: IPosition & {
+        duration: number;
+    };
+}
+
+export interface BlockState {
     id: string;
     position: [x: number, y: number, z: number];
     color: Color;
@@ -23,7 +35,7 @@ interface EdgeEntry {
 interface TangleState {
     // Queue for "add block" operation to the canvas
     blockQueue: BlockState[];
-    addToBlockQueue: (newBlock: BlockState) => void;
+    addToBlockQueue: (newBlock: BlockState & { initPosition: IPosition; }) => void;
     removeFromBlockQueue: (blockIds: string[]) => void;
 
     edgeQueue: Edge[];
@@ -56,11 +68,8 @@ interface TangleState {
     clickedInstanceId: string | null;
     setClickedInstanceId: (instanceId: string | null) => void;
 
-    // blockAnimation: Map<string, number>; // string - block id, number - duration from start
-    blockAnimation: {[blockId: string]: number}; // string - block id, number - duration from start
-    addBlockAnimation: (blockId: string) => void;
-    blockAnimationUpdate: (blockIds: {[blockId: string]: number}) => void;
-
+    blockAnimation: IBlockAnimation;
+    blockAnimationUpdate: (updated: IBlockAnimation) => void;
 }
 
 export const useTangleStore = create<TangleState>()(devtools(set => ({
@@ -77,30 +86,37 @@ export const useTangleStore = create<TangleState>()(devtools(set => ({
     bps: 0,
     clickedInstanceId: null,
     blockAnimation: {},
-    blockAnimationUpdate: (blockIds) => {
+    blockAnimationUpdate: (updated) => {
         set(state => {
+            const nextBlockAnimation = {
+                ...state.blockAnimation,
+                ...updated,
+            };
+            for (const key in nextBlockAnimation) {
+                if (nextBlockAnimation[key].duration > 1) {
+                    delete nextBlockAnimation[key];
+                }
+            }
             return {
-                blockAnimation: blockIds,
+                blockAnimation: nextBlockAnimation,
             };
         });
     },
-    addBlockAnimation: (blockId: string) => {
+    addToBlockQueue: newBlockData => {
         set(state => {
-            const next = {
-                ...state.blockAnimation,
-                [blockId]: 0,
-            }
+            const { initPosition, ...blockDataRest } = newBlockData;
             return {
-                blockAnimation: next,
+                blockQueue: [...state.blockQueue, blockDataRest],
+                blockAnimation: {
+                    ...state.blockAnimation,
+                    [newBlockData.id]: {
+                        ...initPosition,
+                        duration: 0,
+                    },
+                }
             };
         });
     },
-
-    addToBlockQueue: newBlockData => {
-        set(state => ({
-            blockQueue: [...state.blockQueue, newBlockData]
-        }));
-    },
     removeFromBlockQueue: (blockIds: string[]) => {
         set(state => ({
             ...state,