flowtable: fix viewportTop calculation

Co-authored-by: liushuyi.sputnik <liushuyi.sputnik@bytedance.com>

CHANGELOG.md

@@ -20,7 +20,8 @@
 * DTLS support ([#5397](https://github.com/mitmproxy/mitmproxy/pull/5397), @kckeiks).
 * Added Magisk module generation for Android onboarding (@jorants).
 * Update Linux binary builder to Ubuntu 20.04, bumping the minimum glibc version to 2.31. (@jorants)
-* "Save filtered" button in mitmweb. ([#5531](https://github.com/mitmproxy/mitmproxy/pull/5531), @rnbwdsh, @mhils)
+* "Save filtered" button in mitmweb.
+  ([#5531](https://github.com/mitmproxy/mitmproxy/pull/5531), @rnbwdsh, @mhils)
 * DTLS support. 
   ([#5397](https://github.com/mitmproxy/mitmproxy/pull/5397), @kckeiks).
 * Added Magisk module generation for Android onboarding 
@@ -47,6 +48,8 @@
   ([#5522](https://github.com/mitmproxy/mitmproxy/issues/5522), @Prinzhorn)
 * Fix race condition when updating mitmweb WebSocket connections that are closing.
   ([#5405](https://github.com/mitmproxy/mitmproxy/issues/5405), @mhils)
+* Fix mitmweb crash when using filters.
+  ([#5658](https://github.com/mitmproxy/mitmproxy/issues/5658), [#5661](https://github.com/mitmproxy/mitmproxy/issues/5661), @LIU-shuyi, @mhils)
 
 
 ## 28 June 2022: mitmproxy 8.1.1

web/src/js/__tests__/components/__snapshots__/FlowTableSpec.tsx.snap

@@ -9,7 +9,7 @@ exports[`FlowTable Component should render correctly 1`] = `
     <thead
       style={
         Object {
-          "transform": "translateY(undefinedpx)",
+          "transform": "translateY(0px)",
         }
       }
     >
@@ -72,6 +72,63 @@ exports[`FlowTable Component should render correctly 1`] = `
           }
         }
       />
+      <tr
+        className="has-request has-response"
+        onClick={[Function]}
+      >
+        <td
+          className="col-tls col-tls-https"
+        />
+        <td
+          className="col-icon"
+        >
+          <div
+            className="resource-icon resource-icon-websocket"
+          />
+        </td>
+        <td
+          className="col-path"
+        >
+          <i
+            className="fa fa-fw fa-exclamation pull-right"
+          />
+          <span
+            className="marker pull-right"
+          >
+            
+          </span>
+          http://address:22/path
+        </td>
+        <td
+          className="col-method"
+        >
+          WSS
+        </td>
+        <td
+          className="col-status"
+          style={
+            Object {
+              "color": "darkgreen",
+            }
+          }
+        >
+          200
+        </td>
+        <td
+          className="col-size"
+        >
+          43b
+        </td>
+        <td
+          className="col-time"
+        >
+          5s
+        </td>
+        <td
+          className="col-quickactions"
+          onClick={[Function]}
+        />
+      </tr>
       <tr
         style={
           Object {

web/src/js/components/FlowTable.jsx

@@ -89,7 +89,14 @@ class FlowTable extends React.Component {
         })
 
         if (this.state.viewportTop !== viewportTop || !shallowEqual(this.state.vScroll, vScroll)) {
-            this.setState({ vScroll, viewportTop })
+            // the next rendered state may only have much lower number of rows compared to what the current
+            // viewportHeight anticipates. To make sure that we update (almost) at once, we already constrain
+            // the maximum viewportTop value. See https://github.com/mitmproxy/mitmproxy/pull/5658 for details.
+            let newViewportTop = Math.min(viewportTop, vScroll.end * this.props.rowHeight);
+            this.setState({
+                vScroll,
+                viewportTop: newViewportTop
+            });
         }
     }
 

web/src/js/components/helpers/VirtualScroll.tsx

@@ -13,7 +13,7 @@ export type VScroll = {
     paddingBottom: number
 }
 
-export function calcVScroll(opts: VScrollArgs | undefined = undefined) {
+export function calcVScroll(opts: VScrollArgs | undefined = undefined): VScroll {
     if (!opts) {
         return {start: 0, end: 0, paddingTop: 0, paddingBottom: 0};
     }