feat(frontend): sync search in comparison view

README.md

@@ -129,8 +129,8 @@ To start contributing, check out our [Contributing Guide](CONTRIBUTING.md)
 
 [//]: contributor-faces
 <a href="https://github.com/petethepig"><img src="https://avatars.githubusercontent.com/u/662636?v=4" title="petethepig" width="80" height="80"></a>
-<a href="https://github.com/Rperry2174"><img src="https://avatars.githubusercontent.com/u/23323466?v=4" title="Rperry2174" width="80" height="80"></a>
 <a href="https://github.com/eh-am"><img src="https://avatars.githubusercontent.com/u/6951209?v=4" title="eh-am" width="80" height="80"></a>
+<a href="https://github.com/Rperry2174"><img src="https://avatars.githubusercontent.com/u/23323466?v=4" title="Rperry2174" width="80" height="80"></a>
 <a href="https://github.com/kolesnikovae"><img src="https://avatars.githubusercontent.com/u/12090599?v=4" title="kolesnikovae" width="80" height="80"></a>
 <a href="https://github.com/LouisInFlow"><img src="https://avatars.githubusercontent.com/u/84481279?v=4" title="LouisInFlow" width="80" height="80"></a>
 <a href="https://github.com/abeaumont"><img src="https://avatars.githubusercontent.com/u/80059?v=4" title="abeaumont" width="80" height="80"></a>
@@ -149,6 +149,7 @@ To start contributing, check out our [Contributing Guide](CONTRIBUTING.md)
 <a href="https://github.com/Pranay0302"><img src="https://avatars.githubusercontent.com/u/55592629?v=4" title="Pranay0302" width="80" height="80"></a>
 <a href="https://github.com/Skemba"><img src="https://avatars.githubusercontent.com/u/8813875?v=4" title="Skemba" width="80" height="80"></a>
 <a href="https://github.com/geoah"><img src="https://avatars.githubusercontent.com/u/88447?v=4" title="geoah" width="80" height="80"></a>
+<a href="https://github.com/juliosaraiva"><img src="https://avatars.githubusercontent.com/u/6595701?v=4" title="juliosaraiva" width="80" height="80"></a>
 <a href="https://github.com/s4kibs4mi"><img src="https://avatars.githubusercontent.com/u/5650785?v=4" title="s4kibs4mi" width="80" height="80"></a>
 <a href="https://github.com/SusyQinqinYang"><img src="https://avatars.githubusercontent.com/u/55719616?v=4" title="SusyQinqinYang" width="80" height="80"></a>
 <a href="https://github.com/yashrsharma44"><img src="https://avatars.githubusercontent.com/u/31438680?v=4" title="yashrsharma44" width="80" height="80"></a>
@@ -169,7 +170,6 @@ To start contributing, check out our [Contributing Guide](CONTRIBUTING.md)
 <a href="https://github.com/czeslavo"><img src="https://avatars.githubusercontent.com/u/8835851?v=4" title="czeslavo" width="80" height="80"></a>
 <a href="https://github.com/johnduhart"><img src="https://avatars.githubusercontent.com/u/113642?v=4" title="johnduhart" width="80" height="80"></a>
 <a href="https://github.com/radixdev"><img src="https://avatars.githubusercontent.com/u/2373546?v=4" title="radixdev" width="80" height="80"></a>
-<a href="https://github.com/juliosaraiva"><img src="https://avatars.githubusercontent.com/u/6595701?v=4" title="juliosaraiva" width="80" height="80"></a>
 <a href="https://github.com/mhansen"><img src="https://avatars.githubusercontent.com/u/105529?v=4" title="mhansen" width="80" height="80"></a>
 <a href="https://github.com/proggga"><img src="https://avatars.githubusercontent.com/u/12262156?v=4" title="proggga" width="80" height="80"></a>
 <a href="https://github.com/teivah"><img src="https://avatars.githubusercontent.com/u/934784?v=4" title="teivah" width="80" height="80"></a>

cypress/integration/webapp/basic.ts

@@ -56,6 +56,18 @@ describe('basic test', () => {
     );
   });
 
+  it('Inputbox text should sync when search is linked', () => {
+    cy.intercept('**/render*', {
+      fixture: 'simple-golang-app-cpu.json',
+    }).as('render');
+
+    cy.visit('/comparison');
+
+    cy.findByTestId('link-search-btn-left').click();
+    cy.findByTestId('flamegraph-search-left').type('main');
+    cy.findByTestId('flamegraph-search-right').should('have.value', 'main');
+  });
+
   it('view buttons should change view when clicked', () => {
     // mock data since the first preselected application
     // could have no data

webapp/javascript/components/FlameGraph/FlameGraphRenderer.jsx

@@ -6,6 +6,8 @@
 /* eslint-disable no-nested-ternary */
 
 import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import clsx from 'clsx';
 import { Maybe } from '@utils/fp';
 import Graph from './FlameGraphComponent';
@@ -16,6 +18,11 @@ import styles from './FlamegraphRenderer.module.css';
 
 import ExportData from '../ExportData';
 
+import {
+  toggleLinkedSearch,
+  setSearchQuery,
+} from '../../redux/reducers/search';
+
 class FlameGraphRenderer extends React.Component {
   // TODO: this could come from some other state
   // eg localstorage
@@ -57,6 +64,23 @@ class FlameGraphRenderer extends React.Component {
     if (prevState.flamegraphConfigs !== this.state.flamegraphConfigs) {
       this.updateFlamegraphDirtiness();
     }
+
+    if (this.props.isSearchLinked) {
+      if (this.props.linkedSearchQuery !== prevState.highlightQuery) {
+        // disable eslint rule to allow updating state inside componentDidUpdate
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          highlightQuery: this.props.linkedSearchQuery,
+        });
+      }
+      if (this.props.resetLinkedSearchSide === this.props.viewSide) {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          highlightQuery: '',
+        });
+        this.props.actions.toggleLinkedSearch('both');
+      }
+    }
   }
 
   componentWillUnmount() {
@@ -81,6 +105,10 @@ class FlameGraphRenderer extends React.Component {
     this.setState({
       highlightQuery: e,
     });
+
+    if (this.props.isSearchLinked) {
+      this.props.actions.setSearchQuery(e);
+    }
   };
 
   onReset = () => {
@@ -275,6 +303,15 @@ class FlameGraphRenderer extends React.Component {
       tablePane
     );
 
+    const toggleLinkedSearchAction = () => {
+      if (this.props.isSearchLinked) {
+        this.props.actions.toggleLinkedSearch(this.props.viewSide);
+      } else {
+        this.props.actions.setSearchQuery(this.state.highlightQuery);
+        this.props.actions.toggleLinkedSearch('both');
+      }
+    };
+
     return (
       <div
         className={clsx('canvas-renderer', {
@@ -298,6 +335,9 @@ class FlameGraphRenderer extends React.Component {
               onFocusOnSubtree={(i, j) => {
                 this.onFocusOnNode(i, j);
               }}
+              viewType={this.props.viewType}
+              viewSide={this.props.viewSide}
+              toggleLinkedSearch={toggleLinkedSearchAction}
             />
           )}
           {this.props.children}
@@ -355,4 +395,20 @@ function figureFlamegraphDataTestId(viewType, viewSide) {
   }
 }
 
-export default FlameGraphRenderer;
+const mapStateToProps = (state) => ({
+  isSearchLinked: state.search.isSearchLinked,
+  linkedSearchQuery: state.search.linkedSearchQuery,
+  resetLinkedSearchSide: state.search.resetLinkedSearchSide,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(
+    {
+      toggleLinkedSearch,
+      setSearchQuery,
+    },
+    dispatch
+  ),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(FlameGraphRenderer);

webapp/javascript/components/ProfilerHeader.module.css

@@ -24,6 +24,38 @@
   background: rgba(255, 255, 255, 1);
 }
 
+.linked-search-input {
+  border-right: none !important;
+  margin-right: 0 !important;
+  border-top-right-radius: 0%;
+  border-bottom-right-radius: 0%;
+}
+.linked-search-btn {
+  margin-left: 0px !important;
+  background: rgba(255, 255, 255, 0.8);
+  color: #333;
+  z-index: 1;
+  border-top-left-radius: 0%;
+  border-bottom-left-radius: 0%;
+}
+.linked-search-btn.active {
+  margin-left: 0px !important;
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid #ea6460;
+  z-index: 1;
+  border-top-left-radius: 0%;
+  border-bottom-left-radius: 0%;
+  color: #ea6460;
+}
+.linked-search-btn:hover {
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.8) !important;
+}
+
+.linked-search-input.active {
+  border: 1px solid #ea6460;
+}
+
 .search-small {
   width: 100px;
 }