createWebsocketSubscription()

in web/frontend/src/app/shared/live-grid/live-grid.component.ts [176:269]


  createWebsocketSubscription(url: string, dataObj: WSLiveModel, readyEvent: GridReadyEvent) {
    this.subIsInited = true;
    const stompHeaders: StompHeaders = {};
    Object.keys(dataObj).forEach((key) => {
      if (typeof dataObj[key] !== 'object') {
        stompHeaders[key] = dataObj[key] + '';
      } else if (dataObj[key] && typeof dataObj[key] === 'object') {
        stompHeaders[key] = JSON.stringify(dataObj[key]);
      }
    });

    this.appStore.pipe(
      select(getActiveTab),
      switchMap((tab: TabModel) => {
        return tab?.stream ? this.schemaService.getSchema(tab.stream) : of(this.schemaData);
      }),
      switchMap(schema => {
        schema.all.forEach(type => {
          type.fields.forEach(field => {
            if (field.static) {
              this.staticFields = { ...this.staticFields, [field.name]: field.value };
              }
            })
          }
        );

        return this.wsService.watch(url, stompHeaders)
      }),
      withLatestFrom(this.appStore.select(getAppVisibility)),
      filter(([ws_data, app_is_visible]: [any, boolean]) => app_is_visible),
      map(([ws_data]) => ws_data),
      takeUntil(this.wsUnsubscribe$)
    )
      .subscribe((data: any) => {
        const addRows = [],
          updateRows = [];
        const parseData: [] = JSON.parse(data.body);
        parseData.forEach((row: object) => {
          const rowWithStatic = { ...row, ...this.staticFields };
          if (readyEvent.api.getRowNode(`${rowWithStatic['symbol']}-${rowWithStatic['$type']}`)) {
            updateRows.push(new StreamDetailsModel(rowWithStatic, this.schemaMap));
          } else {
            addRows.push(new StreamDetailsModel(rowWithStatic, this.schemaMap));
          }
        });

    const rowData = [...addRows];
    readyEvent.api.forEachNode(node => rowData.push(node.data));

    if (JSON.stringify(this.rowSortingOrder) !== JSON.stringify(this.implementedSorting) || (this.implementedSorting && addRows.length)) {
      if (this.rowSortingOrder.symbol && this.rowSortingOrder.symbol !== 'none') {
        if (this.rowSortingOrder.symbol === 'ascending') {
          rowData.sort((row1, row2) => {
            if (row1.symbol !== row2.symbol) {
              return row1.symbol > row2.symbol ? 1 : -1;
            } else {
              return row1.$type > row2.$type ? 1 : -1;
            }
          });
        } else {
          rowData.sort((row1, row2) => {
            if (row1.symbol !== row2.symbol) {
              return row1.symbol < row2.symbol ? 1 : -1
            } else {
              return row1.$type > row2.$type ? 1 : -1;
            };
          })
        }
      }

      if (this.rowSortingOrder.timestamp && this.rowSortingOrder.timestamp !== 'none') {
        rowData.sort((row1, row2) => {
          const date1 = new HdDate(row1.nanoTime ?? row1.timestamp);
          const date2 = new HdDate(row2.nanoTime ?? row2.timestamp);
          return this.compareHdDates(date1, date2, 'timestamp');
        })
      }

      if (this.rowSortingOrder['original-timestamp'] && this.rowSortingOrder['original-timestamp'] !== 'none') {
        rowData.sort((row1, row2) => {
          const date1 = new HdDate(row1.original.timestamp);
          const date2 = new HdDate(row2.original.timestamp);
          return this.compareHdDates(date1, date2, 'original-timestamp');
        })
      }
      this.implementedSorting = this.rowSortingOrder;
      readyEvent.api.setRowData(rowData);
    } else {
      readyEvent.api.updateRowData( { add: addRows });
    }

    readyEvent.api.updateRowData( { update: updateRows } );
    })
  }