Merge pull request #21 from AndyOGo/feat/filter-frames-by-full-text-search

feat: add full-text search

Author: SerCeMan

package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@types/chrome": "^0.0.128",
     "@types/classnames": "^2.2.11",
+    "@types/flexsearch": "^0.7.2",
     "@types/react": "^16.14.2",
     "@types/react-dom": "^16.9.10",
     "@types/react-fontawesome": "^1.6.4",
@@ -40,6 +41,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
+    "flexsearch": "^0.7.21",
     "mobx": "^6.1.6",
     "mobx-react-lite": "^3.2.0",
     "react": "^16.14.0",

src/viewer/App.tsx

@@ -19,8 +19,9 @@ import {
 } from "rsocket-core";
 import {Encoders} from "rsocket-core/RSocketEncoding";
 import Protocol from "devtools-protocol";
-import {action, makeObservable, observable} from "mobx";
+import {action, makeObservable, observable, computed} from "mobx";
 import {observer} from "mobx-react-lite";
+import {Index, IndexSearchResult} from "flexsearch";
 import WebSocketFrameReceivedEvent = Protocol.Network.WebSocketFrameReceivedEvent;
 import WebSocketFrameSentEvent = Protocol.Network.WebSocketFrameSentEvent;
 import WebSocketFrame = Protocol.Network.WebSocketFrame;
@@ -282,6 +283,7 @@ interface WsConnectionState {
   id: string,
   url?: string,
   frames: WsFrameState[];
+  index: Index;
   activeFrame?: number
 }
 
@@ -293,12 +295,16 @@ export class AppStateStore {
   issueWallTime?: number = undefined;
   connections = new Map<string, WsConnectionState>();
   activeConnection?: string = undefined;
+  searchValue: string = "";
 
   constructor(handlers: ChromeHandlers) {
     makeObservable(this, {
       connections: observable,
       activeConnection: observable,
       selectConnection: action.bound,
+      search: action.bound,
+      searchValue: observable,
+      searchResult: computed,
       frameSent: action.bound,
       frameReceived: action.bound,
       webSocketCreated: action.bound,
@@ -320,6 +326,8 @@ export class AppStateStore {
       return;
     }
     connection.frames = []
+    connection.index = new Index({tokenize: "full"})
+    this.searchValue = ""
   }
 
   selectFrame(id?: number) {
@@ -337,6 +345,24 @@ export class AppStateStore {
     this.activeConnection = value;
   }
 
+  search(value: string) {
+    this.searchValue = value;
+  }
+
+  get searchResult(): IndexSearchResult {
+    if (!this.activeConnection) {
+      return []
+    }
+
+    const connection = this.connections.get(this.activeConnection);
+    if (!connection) {
+      return []
+    }
+
+    const result = connection.index.search(this.searchValue);
+    return result
+  }
+
   webSocketCreated(event: WebSocketCreatedEvent) {
     const {requestId, url} = event;
     if (this.connections.get(requestId)) {
@@ -347,6 +373,7 @@ export class AppStateStore {
       id: requestId,
       url: url,
       frames: [],
+      index: new Index({tokenize: "full"}),
       activeFrame: undefined,
     });
   }
@@ -376,7 +403,9 @@ export class AppStateStore {
         frame.binary = stringToBuffer(response.payloadData);
       }
       const connection = this.ensureConnection(requestId);
+      const rSocketFrame = tryDeserializeFrame(frame.payload);
       connection.frames.push(frame)
+      connection.index.add(frame.id, (rSocketFrame as any)?.data ?? frame.text ?? frame.payload)
       this.activeConnection = requestId;
     }
   }
@@ -389,6 +418,7 @@ export class AppStateStore {
     const newConnection = {
       id: requestId,
       frames: [],
+      index: new Index({tokenize: "full"}),
       activeFrame: undefined,
     }
     this.connections.set(requestId, newConnection);
@@ -405,7 +435,7 @@ export class AppStateStore {
 }
 
 export const App = observer(({store}: { store: AppStateStore }) => {
-  const {connections, activeConnection} = store;
+  const {connections, activeConnection, searchValue, searchResult} = store;
   if (!activeConnection) {
     return <div>No active WebSocket connections</div>
   }
@@ -415,9 +445,10 @@ export const App = observer(({store}: { store: AppStateStore }) => {
   }
   const {frames, activeFrame} = connection;
   const active = frames.find(f => f.id === activeFrame);
+  const filteredFrames = searchResult.length ? frames.filter((frame) => searchResult.includes(frame.id)) : frames;
 
-  const Row = ({ index, style, data }: ListChildComponentProps) => {
-    const frame = data[index];
+  const Row = ({ index, style }: ListChildComponentProps) => {
+    const frame = filteredFrames[index];
 
     return (
       <FrameEntry
@@ -450,12 +481,19 @@ export const App = observer(({store}: { store: AppStateStore }) => {
                 </option>)
             }
           </select>
+          <input
+            type="text"
+            placeholder="Search frame..."
+            style={{width: "100%"}}
+            value={searchValue}
+            onChange={e => store.search(e.target.value)}
+          />
         </div>
 
         <div className="frame-list">
           <AutoSizer disableWidth>
             {({ height }) => (
-              <FixedSizeList height={height} width="100%" itemCount={frames.length} itemSize={18} innerElementType="ul">
+              <FixedSizeList height={height} width="100%" itemCount={filteredFrames.length} itemSize={18} innerElementType="ul">
                 {Row}
               </FixedSizeList>
             )}

yarn.lock

@@ -73,6 +73,11 @@
   resolved "https://registry.yarnpkg.com/@types/filewriter/-/filewriter-0.0.28.tgz#c054e8af4d9dd75db4e63abc76f885168714d4b3"
   integrity sha1-wFTor02d11205jq8dviFFocU1LM=
 
+"@types/flexsearch@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@types/flexsearch/-/flexsearch-0.7.2.tgz#05d982d292e70fcb9fc59347a4a4f98c4ecd9e56"
+  integrity sha512-Nq0CSpOCyUhaF7tAXSvMtoyBMPGlhNyF+uElhIrrgSiXDmX/bnn9jUX7Us3l81Hzowb9rcgNISke0Nj+3xhd3g==
+
 "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
@@ -1832,6 +1837,11 @@ find-up@^4.0.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+flexsearch@^0.7.21:
+  version "0.7.21"
+  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.7.21.tgz#0f5ede3f2aae67ddc351efbe3b24b69d29e9d48b"
+  integrity sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"