Merge pull request #449 from NordicSemiconductor/performace-improvments

Performance improvements

Changelog.md

@@ -1,3 +1,14 @@
+## 4.0.1 - UNRELEASED
+
+### Changed
+
+-   Moved feedback tab to a dialog which can be opened by going to the about tab
+    and click **Give Feedback**
+
+### Fixed
+
+-   Chart frame trotting for slower machines
+
 ## 4.0.0 - 2024-03-13
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
     "name": "pc-nrfconnect-ppk",
-    "version": "4.0.0",
+    "version": "4.0.1",
     "displayName": "Power Profiler",
     "description": "App for use with Nordic Power Profiler Kits",
     "homepage": "https://github.com/NordicSemiconductor/pc-nrfconnect-ppk",
@@ -47,13 +47,13 @@
         "nordic-publish": "node ./dist/nordic-publish.js"
     },
     "devDependencies": {
-        "@nordicsemiconductor/pc-nrfconnect-shared": "^167.0.0",
+        "@nordicsemiconductor/pc-nrfconnect-shared": "^170.0.0",
         "@types/archiver": "^6.0.2",
         "@types/fs-extra": "^11.0.4",
         "@types/redux-mock-store": "^1.0.3",
         "@types/unzipper": "^0.10.9",
         "bson": "4.6.5",
-        "chart.js": "^4.3.3",
+        "chart.js": "^4.4.2",
         "mathjs": "^10.6.3",
         "react-chartjs-2": "^5.2.0",
         "redux-mock-store": "^1.5.4",

src/actions/deviceActions.ts

@@ -393,13 +393,18 @@ export const open =
 
         clearInterval(updateRequestInterval);
         let renderIndex: number;
+        let lastRenderRequestTime = 0;
         updateRequestInterval = setInterval(() => {
+            const now = Date.now();
             if (
                 renderIndex !== DataManager().getTotalSavedRecords() &&
                 getState().app.app.samplingRunning &&
-                isDataLoggerPane(getState())
+                isDataLoggerPane(getState()) &&
+                (DataManager().isInSync() ||
+                    now - lastRenderRequestTime >= 1000) // force 1 FPS
             ) {
-                const timestamp = Date.now();
+                const timestamp = now;
+                lastRenderRequestTime = now;
                 if (getState().app.chart.liveMode) {
                     requestAnimationFrame(() => {
                         /*
@@ -423,7 +428,7 @@ export const open =
                 });
                 renderIndex = DataManager().getTotalSavedRecords();
             }
-        }, 30);
+        }, Math.max(30, DataManager().getSamplingTime() / 1000));
     };
 
 export const updateRegulator =

src/components/Chart/Chart.tsx

@@ -471,20 +471,12 @@ const Chart = () => {
         }
     }, [xAxisMax]);
 
-    const lastLiveRenderTime = useRef<number>(0);
     const lastFPSUpdate = useRef<number>(performance.now());
     const fpsCounter = useRef<number>(0);
 
     useEffect(() => {
         const now = performance.now();
-        const forceRender = now - lastLiveRenderTime.current > 1000; // force 1 FPS
         if (liveMode) {
-            if (!DataManager().isInSync() && !forceRender) {
-                return;
-            }
-
-            lastLiveRenderTime.current = now;
-
             nextUpdateRequests = () => {
                 fpsCounter.current += 1;
                 return updateChart(

src/components/SaveExport/ExportDialog.tsx

@@ -4,7 +4,13 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import ProgressBar from 'react-bootstrap/ProgressBar';
 import { useDispatch, useSelector } from 'react-redux';
 import { dialog, getCurrentWindow } from '@electron/remote';
@@ -149,12 +155,14 @@ export default () => {
                 .replace('u', '\u00B5')
         );
     }, [duration]);
-    const filename = createFileName();
-    const close = () => {
+
+    const close = useCallback(() => {
         cancel.current = true;
         dispatch(hideExportDialog());
-    };
+    }, [dispatch]);
+
     const saveFile = async () => {
+        const filename = createFileName();
         const { filePath: fn } = await dialog.showSaveDialog(
             getCurrentWindow(),
             {

src/features/minimap/Minimap.tsx

@@ -332,6 +332,7 @@ function initializeMinimapChart(
                 ],
             },
             options: {
+                parsing: false,
                 animation: false,
                 layout: {
                     autoPadding: false,

src/globals.ts

@@ -23,6 +23,8 @@ const initialSamplesPerSecond = 1e6 / initialSamplingTime;
 export const microSecondsPerSecond = 1e6;
 
 const tempBuffer = new Uint8Array(6);
+const tempView = new DataView(tempBuffer.buffer);
+
 export interface GlobalOptions {
     /** The number of samples per second */
     samplesPerSecond: number;
@@ -174,21 +176,18 @@ export const DataManager = () => ({
     getTimestamp,
     isInSync: () => {
         const actualTimePassed =
-            performance.now() -
+            Date.now() -
             (options.writeBuffer?.getFirstWriteTime() ??
                 options.fileBuffer?.getFirstWriteTime() ??
                 0);
         const simulationDelta = getTimestamp() / 1000;
         if (simulationDelta > actualTimePassed) return true;
 
         const pcAheadDelta = actualTimePassed - simulationDelta;
-        if (
-            pcAheadDelta >
-            Math.max(30, getSamplingTime(options.samplesPerSecond) * 1.5)
-        ) {
-            return false;
-        }
-        return true;
+
+        // We get serial data every 30 ms regardless of sampling rate.
+        // If PC is ahead by more then 1.5 samples we are not in sync
+        return pcAheadDelta <= 45;
     },
     getStartSystemTime: () => options.fileBuffer?.getFirstWriteTime(),
 
@@ -199,9 +198,8 @@ export const DataManager = () => ({
         )
             return;
 
-        const view = new DataView(tempBuffer.buffer);
-        view.setFloat32(0, current, true);
-        view.setUint16(4, bits);
+        tempView.setFloat32(0, current, true);
+        tempView.setUint16(4, bits);
 
         if (options.writeBuffer) {
             options.writeBuffer.append(tempBuffer);

src/index.tsx

@@ -81,7 +81,6 @@ render(
         appReducer={reducers}
         deviceSelect={<DeviceSelector />}
         sidePanel={<SidePanel />}
-        feedback
         documentation={DocumentationSections}
         panes={[
             { name: 'Data Logger', Main: ChartWrapper },