virtualize network table body

saucelabs · Aug 9, 2024 · 31319ca · 31319ca
1 parent 334b95c
commit 31319ca
Show file tree

Hide file tree

Showing 33 changed files with 629 additions and 433 deletions.
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "react": "^16.13.1",
     "react-dropzone": "11.0.1",
     "react-transition-group": "^4.4.1",
+    "react-window": "^1.8.10",
     "recharts": ">=1.8.5"
   },
   "peerDependencies": {

diff --git a/src/Components/NetworkTable/NetworkCellValue.jsx b/src/Components/NetworkTable/NetworkCellValue.jsx
@@ -33,25 +33,21 @@ const NetworkCellValue = ({
 
   if (!shouldDisplayTooltip) {
     return (
-      <div className={context('value-cell', datakey)}>
-        <div className={Styles['value-text']}>
-          {formattedValue}
-        </div>
+      <div className={context('value-text', datakey)}>
+        {formattedValue}
       </div>
     );
   }
 
   return (
-    <div className={context('value-cell', datakey)}>
-      <Tooltip
-        delay={500}
-        title={getTitle()}
-      >
-        <span className={Styles['value-text']}>
-          {formattedValue}
-        </span>
-      </Tooltip>
-    </div>
+    <Tooltip
+      delay={500}
+      title={getTitle()}
+    >
+      <div className={context('value-text', datakey)}>
+        {formattedValue}
+      </div>
+    </Tooltip>
   );
 };
 

diff --git a/src/Components/NetworkTable/NetworkTable.styles.scss b/src/Components/NetworkTable/NetworkTable.styles.scss
@@ -1,9 +1,8 @@
 @import "./../../styles/variables.scss";
 
 .network-table-header {
-  display: grid;
-  grid-template-columns: subgrid;
-  grid-column: span 8 / span 8;
+  display: flex;
+  width: 100%;
 
   padding: $size-xs-s;
   font-size: $font-size-small;
@@ -12,31 +11,51 @@
   border-bottom: $border;
   color: $brand-primary-gray;
   align-content: center;
+
+  &:last-child {
+    padding-right: 0;
+  }
 }
 
-.network-table-body {
-  display: grid;
-  overflow-y: auto;
-  overflow-x: hidden;
-  grid-template-columns: subgrid;
-  grid-column: span 8 / span 8;
-  outline: none;
+.table-column {
+  display:flex;
+  width: 12%;
+  align-self: center;
+  padding-right: $size-xs-s;
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  &.show-waterfall {
+    width: 9%;
+  }
+
+  &.file {
+    width: 25%;
+
+    &.limited-cols {
+      width: 100%;
+    }
+  }
+
+  &.domain,
+  &.waterfall{
+    width: 15%;
+  }
 }
 
 .network-table-row {
-  display: grid;
-  grid-template-columns: subgrid;
-  grid-column: span 8 / span 8;
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+
   cursor: pointer;
   padding: $size-xs $size-xs-s;
   border-bottom: $border;
   color: $brand-primary-dark-gray;
   font-size: $font-size-small;
 
-  &:nth-last-child(2) {
-    border-bottom: none;
-  }
-
   &.pending {
     color: $white-66;
   }
@@ -54,24 +73,14 @@
     color: $white-100;
   }
 }
-
-.value-cell {
-  align-self: center;
-
-  display: grid;
-  grid-template-columns: subgrid;
-
-  .value-text {
-    flex: 1 1 auto;
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    word-break: break-all;
-  }
+.value-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  word-break: break-all;
 }
 
-.footer {
+.network-table-footer {
   border-top: $border;
   width: 100%;
   background: $bg-gray-90;

diff --git a/src/Components/NetworkTable/NetworkTableBody.jsx b/src/Components/NetworkTable/NetworkTableBody.jsx
@@ -1,10 +1,38 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { FixedSizeList } from 'react-window';
+import PropTypes from 'prop-types';
 
 import { useNetwork } from '../../state/network/Context';
 import NetworkTableRow from './NetworkTableRow';
-import Styles from './NetworkTable.styles.scss';
+import { TABLE_ENTRY_HEIGHT } from '../../constants';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 
-const NetworkTableBody = () => {
+const virtualizedTableRow = ({
+  data,
+  index,
+  style,
+}) => {
+  const {
+    listData,
+    totalNetworkTime,
+    handleReqSelect,
+    selectedReqIndex,
+  } = data;
+  const item = listData.get(index);
+
+  return (
+    <NetworkTableRow
+      key={index}
+      entry={item}
+      maxTime={totalNetworkTime}
+      onSelect={handleReqSelect}
+      scrollHighlight={selectedReqIndex === index}
+      style={style}
+    />
+  );
+};
+
+const NetworkTableBody = ({ height }) => {
   const {
     state,
     actions,
@@ -14,27 +42,36 @@ const NetworkTableBody = () => {
   const totalNetworkTime = state.get('totalNetworkTime');
   const selectedReqIndex = state.get('selectedReqIndex');
 
+  const ref = useRef(null);
+  const { elementDims } = useResizeObserver(ref);
+  useEffect(() => actions.setTableHeaderWidth(elementDims.width), [elementDims]);
+
   const handleReqSelect = (payload) => {
     actions.updateScrollToIndex(payload.index);
     actions.selectRequest(payload);
     callbacks.onRequestSelect(payload);
   };
 
   return (
-    <div className={Styles['network-table-body']}>
-      {Array.from(data)
-        .map((rowInfo) => (
-          <NetworkTableRow
-            key={rowInfo.index}
-            entry={rowInfo}
-            maxTime={totalNetworkTime}
-            onSelect={handleReqSelect}
-            scrollHighlight={selectedReqIndex === rowInfo.index}
-          />
-        ))}
-      <div />
-    </div>
+    <FixedSizeList
+      ref={ref}
+      height={height}
+      itemCount={data.size}
+      itemData={{
+        listData: data,
+        totalNetworkTime,
+        handleReqSelect,
+        selectedReqIndex,
+      }}
+      itemSize={TABLE_ENTRY_HEIGHT}
+    >
+      {virtualizedTableRow}
+    </FixedSizeList>
   );
 };
 
+NetworkTableBody.propTypes = {
+  height: PropTypes.number.isRequired,
+};
+
 export default NetworkTableBody;
diff --git a/src/Components/NetworkTable/NetworkTableFooter.jsx b/src/Components/NetworkTable/NetworkTableFooter.jsx
@@ -11,7 +11,7 @@ const NetworkTableFooter = ({
   dataSummary,
   showAllInfo,
 }) => (
-  <div className={context('footer')}>
+  <div className={context('network-table-footer')}>
     {showAllInfo ? (
       <>
         <span>{`${dataSummary.get('totalRequests')} requests`}</span>

diff --git a/src/Components/NetworkTable/NetworkTableHeader.jsx b/src/Components/NetworkTable/NetworkTableHeader.jsx
@@ -11,20 +11,30 @@ const context = classNames.bind(Styles);
 const NetworkTableHeader = () => {
   const { state } = useNetwork();
   const showReqDetail = state.get('showReqDetail');
+  const tableHeaderWidth = state.get('tableHeaderWidth');
   const { showWaterfall } = useTheme();
 
   const columns = getViewerFields(showReqDetail, showWaterfall);
 
   return (
-    <div className={Styles['network-table-header']}>
+    <div
+      className={Styles['network-table-header']}
+      style={{ width: tableHeaderWidth }}
+    >
       {Object.entries(columns)
         .map(([datakey, {
           key,
           name,
         }]) => (
           <div
-            key={datakey}
-            className={context(Styles['value-cell'], key)}
+            key={key}
+            className={context(
+              'table-column',
+              'value-cell',
+              datakey,
+              { 'limited-cols': showReqDetail },
+              { 'show-waterfall': showWaterfall },
+            )}
           >
             {name}
           </div>