vee1e/mitmproxy
1
0
Fork 0
mirror of https://github.com/vee1e/mitmproxy.git synced 2026-09-01 18:27:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
mitmproxy/web
History
Ariel d482bbaa20
web: Reduce FlowTable Redux subscriptions from O(rows) to O(1) (#8104) 
* web: Reduce FlowTable Redux subscriptions from O(rows) to O(1)

Lift shared state (displayColumnNames, flowIndex) from per-row/per-cell
useAppSelector calls to the FlowTable parent component. This eliminates
N identical Redux subscriptions across all visible rows.

Changes:
- FlowTable.tsx: Fetch displayColumnNames from state.options.web_columns
  in mapStateToProps; pass as prop to FlowRow along with flowIndex.
- FlowRow.tsx: Accept displayColumnNames and flowIndex as props instead
  of useAppSelector. Remove unused useAppSelector import.
- FlowColumns.tsx: Accept optional flowIndex prop in index column;
  use it instead of per-cell useAppSelector(_listIndex).
- FlowTableHead.tsx: Add null guard on displayColumnNames for
  edge-case during initial state hydration.
- FlowRowSpec.tsx: Update test to pass new required props.

* [autofix.ci] apply automated fixes

* fix: pass flowIndex prop in FlowColumnsSpec snapshot test

The index column now uses flowIndex prop instead of
useAppSelector. Pass flowIndex={0} in the generic column
render loop so the snapshot matches the expected numeric
output.

* address review feedback: rename flowIndex to rowNumber, remove defensive guards

- Rename flowIndex → rowNumber per reviewer suggestion
- Make rowNumber required in FlowColumnProps (never undefined)
- Remove unnecessary || [] null guard in FlowTableHead
- Read displayColumnNames from test store instead of hardcoding

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* [autofix.ci] apply automated fixes

* fix: use list position (not view position) for # column

rowNumber now comes from _listIndex (insertion order) instead of
vScroll.start + idx (view position). This preserves the original
behavior where the # column shows the flow's arrival order regardless
of sorting or filtering.

Added test to verify index column displays rowNumber + 1.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* [autofix.ci] apply automated fixes

* docs: add CHANGELOG entry for FlowTable optimization

* [autofix.ci] apply automated fixes

---------

Co-authored-by: Ariel <ariel@captaintech.io>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Maximilian Hils <git@maximilianhils.com>
2026-04-10 14:39:20 +00:00
..
gen eslint: consistent-type-imports (#7975) 2026-01-02 01:44:09 +01:00
public/static
src web: Reduce FlowTable Redux subscriptions from O(rows) to O(1) (#8104) 2026-04-10 14:39:20 +00:00
.editorconfig
.prettierignore
eslint.config.mjs eslint: consistent-type-imports (#7975) 2026-01-02 01:44:09 +01:00
index.html
jest.config.js
package-lock.json Fix TypeScript build (#7988) 2026-01-02 01:39:38 +01:00
package.json Fix TypeScript build (#7988) 2026-01-02 01:39:38 +01:00
README.md Update node.js version (#7992) 2025-11-24 18:46:06 +00:00
setup-global-jest.js
setup-jest.js
tsconfig.json
vite.config.ts

README.md

Quick Start

  • Install mitmproxy as described in ../CONTRIBUTING.md
  • Run node --version to make sure that you have at least Node.js 24 or above.
  • Run cd ./web to change to the directory with package.json.
  • Run npm install to install dependencies.
  • Run uv run mitmweb
  • Run npm start in a separate window to start the Vite development server for the web interface.

Testing

  • Run npm test to run the test suite.

Code formatting

Architecture

There are two components:

Contributing

We very much appreciate any (small) improvements to mitmweb. Please do not include the compiled assets in mitmproxy/tools/web/static in your pull request. Refreshing them on every commit would massively increase repository size. We will update these files before every release.

Developer Tools