Merge pull request #19 from AndyOGo/feat/reduce-dom-size-for-massive-number-of-frames

feat: implement virtual scrolling to reduce DOM size

Author: SerCeMan

package.json

@@ -17,6 +17,8 @@
     "@types/react-dom": "^16.9.10",
     "@types/react-fontawesome": "^1.6.4",
     "@types/react-inspector": "^4.0.1",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
     "@types/rsocket-core": "^0.0.6",
     "@types/rsocket-types": "^0.0.2",
     "@types/rsocket-websocket-client": "^0.0.3",
@@ -45,6 +47,8 @@
     "react-flex-panel": "^1.0.0",
     "react-fontawesome": "^1.7.1",
     "react-inspector": "^5.1.0",
+    "react-virtualized-auto-sizer": "^1.0.6",
+    "react-window": "^1.8.6",
     "rsocket-core": "^0.0.27",
     "rsocket-websocket-client": "^0.0.27"
   }

src/viewer/App.scss

@@ -93,8 +93,6 @@
   }
   .frame-list {
     flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
     padding: 0;
 
     .frame {
@@ -103,6 +101,7 @@
       border-bottom: 1px solid #ccc;
       display: flex;
       flex-direction: row;
+      box-sizing: border-box;
       .fa {
         flex-shrink: 0;
         margin-top: 3px;

src/viewer/App.tsx

@@ -1,7 +1,9 @@
-import React, {MouseEventHandler} from 'react';
+import React, {MouseEventHandler, CSSProperties} from 'react';
 // @ts-ignore no types for the package
 import Panel from 'react-flex-panel';
 import FontAwesome from 'react-fontawesome';
+import {FixedSizeList, ListChildComponentProps} from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
 import './App.scss';
 import {ObjectInspector} from 'react-inspector';
@@ -84,15 +86,16 @@ function base64ToArrayBuffer(base64: string) {
   return bytes;
 }
 
-const FrameEntry = ({frame, selected, onClick}:
-                      { frame: WsFrameState, selected: boolean, onClick: MouseEventHandler }) => {
+const FrameEntry = ({frame, selected, onClick, style}:
+                      { frame: WsFrameState, selected: boolean, onClick: MouseEventHandler, style: CSSProperties }) => {
   const rsocketFrame = tryDeserializeFrame(frame.payload)
   const frameName = rsocketFrame
     ? <span className="name">{shortFrame(rsocketFrame)}</span>
     : <span className="name">{frame.text != null ? "Text Frame" : "Binary Frame"}</span>
   return (
     <li
       className={classNames("frame", "frame-" + frame.type, {"frame-selected": selected})}
+      style={style}
       onClick={onClick}>
       <FontAwesome name={frame.type === "incoming" ? "arrow-circle-down" : "arrow-circle-up"}/>
       <TimeStamp time={frame.time}/>
@@ -412,6 +415,24 @@ export const App = observer(({store}: { store: AppStateStore }) => {
   }
   const {frames, activeFrame} = connection;
   const active = frames.find(f => f.id === activeFrame);
+
+  const Row = ({ index, style, data }: ListChildComponentProps) => {
+    const frame = data[index];
+
+    return (
+      <FrameEntry
+        key={frame.id}
+        style={style}
+        frame={frame}
+        selected={frame.id === activeFrame}
+        onClick={e => {
+          store.selectFrame(frame.id);
+          e.stopPropagation();
+        }}
+      />
+    );
+  };
+
   return (
     <Panel cols className="App">
       <Panel size={300} minSize={180} resizable className="LeftPanel">
@@ -430,17 +451,16 @@ export const App = observer(({store}: { store: AppStateStore }) => {
             }
           </select>
         </div>
-        <ul className="frame-list" onClick={() => store.selectFrame(undefined)}>
-          {frames.map((frame: WsFrameState) =>
-            <FrameEntry key={frame.id}
-                        frame={frame}
-                        selected={frame.id === activeFrame}
-                        onClick={e => {
-                          store.selectFrame(frame.id);
-                          e.stopPropagation();
-                        }}
-            />)}
-        </ul>
+
+        <div className="frame-list">
+          <AutoSizer disableWidth>
+            {({ height }) => (
+              <FixedSizeList height={height} width="100%" itemCount={frames.length} itemSize={18} innerElementType="ul">
+                {Row}
+              </FixedSizeList>
+            )}
+          </AutoSizer>
+        </div>
       </Panel>
       <Panel minSize={100} className="PanelView">
         {active != null ? <FrameView wsFrame={active}/> :

yarn.lock

@@ -133,6 +133,20 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
+"@types/react-virtualized-auto-sizer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
+  integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-window@^1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
+  integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
@@ -2773,6 +2787,11 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+"memoize-one@>=3.1.1 <6":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -3667,6 +3686,19 @@ react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-virtualized-auto-sizer@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
+  integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
+
+react-window@^1.8.6:
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
+  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@^16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"