diff --git a/DeveloperREADME.md b/DeveloperREADME.md index 84b615c85..3d72a0c36 100644 --- a/DeveloperREADME.md +++ b/DeveloperREADME.md @@ -1,51 +1,44 @@
-

-Development Enviroment Setup -

+

Development Enviroment Setup

-

-Getting Started -

+

Getting Started

-

1. Download React Dev Tools from the Chrome Webstore -Click Here To Download -

+1. Download React Dev Tools from the Chrome Webstore Here -

2. Clone down the Reactime repo onto your machine.

+2. Clone down the Reactime repo onto your machine. -````` +``` git clone https://github.com/open-source-labs/reactime.git -````` +``` -

3. Install dependencies and build.

+3. Install dependencies and build. -````` +``` cd reactime npm install --force npm run build -````` -

4. Spin up the demo application.

+``` -````` +4. Spin up the demo application. + +``` cd demo-app npm install npm start -````` -
+``` -

5. Add Reactime to your Chrome extensions. -
-- Navigate to chrome://extensions -
-- Select “Load Unpacked” -
-- Choose reactime > src > extension > build -
-Navigate to http://localhost:8080/ to inspect the demo application using Reactime! -
-
-

+ +- Navigate to chrome://extensions +- Select “Load Unpacked” +- Choose reactime > src > extension > build +- Navigate to http://localhost:8080/ to inspect the demo application using Reactime! +
+

- -

\ No newline at end of file + +

+ +

Documentation for Consideration

+

Can Reactime be integrated with Redux compatibility so applications using Redux can track state in Reactime?

+Yes, but it would be very time-consuming and not the most feasible option while Redux devtools exists already. With how Redux devtools is currently set up, a developer is unable to use Redux devtools as a third-party user and integrate its functionality into their own application, as Redux devtools is meant to be used directly on an application using Redux for state-tracking purposes. Since the devtools do not appear to have a public API for integrated use in an application or it simply does not exist, Redux devtools would need to be rebuilt from the ground up and then integrated into Reactime, or built into Reactime directly still from scratch. diff --git a/README.md b/README.md index 4476b9587..69cd244cd 100644 --- a/README.md +++ b/README.md @@ -43,15 +43,17 @@ How To Use • Features • Website • Read More

+Reactime 15.0 adds a new visualization, allowing users to zone in on individual components of a specific snapshot. Additionally, a number of bug fixes have been implemented. + Currently, Reactime supports React apps (now including React Router apps) using stateful components and Hooks, with beta support for Recoil and Context API and frameworks like Gatsby and Next.js. -Reactime 14.0 has added the exciting features below: +Previously, Reactime 14.0 added the exciting features below: I. React Router Compatibility
Reactime is now compatible with React Router applications! Prior to Reactime 14.0, recording state snapshots as the user navigated across various routes was possible, but time travel debugging was only possible for the current route (i.e. jumping back to a prior state at a different route was not possible). In order to streamline debugging of applications with multiple routes, Reactime 14.0 added functionality that allows the user to time-travel back to different routes, including live updating in the browser to reflect the state of their application at that previously visited route. II. Classifying State Snapshots by Route
-The list of state snapshots in the Reactime dashboard is now classified by route to give the developer visual cues of the snapshot-route relationship and make time travel debugging of various routes easier. +The list of state snapshots in the Reactime dashboard is now classified by route to give the developer visual cues of the snapshot-route relationship and make time travel debugging of various routes easier. III. Filtering Performance Metrics by Route
The Reactime dashboard includes a stacked bar graph showing render times for each component, with a separate bar stack for each snapshot. With Reactime 14.0, this composite bar graph can now be filtered by route to allow the developer to review detailed performance data by route. @@ -97,26 +99,40 @@ Reactime is an open source project, and we’d really appreciate your help with You can view your application's file structure and click on a snapshot to view your app's state. State can be visualized in a Component Graph, JSON Tree, or Performance Graph. Snapshots can be diffed with the previous snapshot, which can be viewed in Diff mode.

+


-### 🔹 Snapshot Series and Action Comparison +### 🔹 Snapshot Series and Action Comparison -You can save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots. You can also name specific snapshots and compare all snapshots with the same name. +You can save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots. You can also name specific snapshots and compare all snapshots with the same name.

+


+### 🔹 Components Comparison + +When toggled to a specific snapshot, a visualization of the individual components of the snapshow will be displayed. This can be done under the same Performance tab where the snapshots are rendered. You will also find details of each component upon hovering. +
+
+ +

+ +

+
+ ### 🔹 Recording Whenever state is changed (whenever setState, useState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.

+

@@ -149,93 +165,106 @@ After cloning this repository, developers can simply run `npm run docs` at the r ### Additional Features -- Identifying unnecessary re-renders -- Single-click to view tooltip details on state visualizations -- Double-click to collapse child components -- A reverse filter with autofill to focus on a portion of the component map -- Ability to pan and zoom on state visualizations -- A dropdown to support development of projects on multiple tabs -- A slider to move through snapshots quickly -- A play button to move through snapshots automatically -- A lock button, which stops recording each snapshot -- A persist button to keep snapshots upon refresh (handy when changing code and debugging) -- Download/upload the current snapshots in memory -- Declarative titles in the actions sidebar -- Interative Tutorial Walkthrough -- Toggle feature allowing temporary pause of state monitoring +- Identifying unnecessary re-renders +- Single-click to view tooltip details on state visualizations +- Double-click to collapse child components +- A reverse filter with autofill to focus on a portion of the component map +- Ability to pan and zoom on state visualizations +- A dropdown to support development of projects on multiple tabs +- A slider to move through snapshots quickly +- A play button to move through snapshots automatically +- A lock button, which stops recording each snapshot +- A persist button to keep snapshots upon refresh (handy when changing code and debugging) +- Download/upload the current snapshots in memory +- Declarative titles in the actions sidebar +- Interative Tutorial Walkthrough +- Toggle feature allowing temporary pause of state monitoring + +### Bug Fixes + +- Search bar now searches for specific nodes successfully +- Tab titles of chrome browser tabs not running an application in development mode are no longer affected by Reactime +- Multiple black screens fixed +- Improved UI and performance +- No longer inject scripts to non-target applications + ## Read More -- [Time-Travel State with Reactime](https://medium.com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20) -- [React Fiber and Reactime](https://medium.com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8) -- [Meet Reactime - a time-traveling State Debugger for React](https://medium.com/@yujinkay/meet-reactime-a-time-traveling-state-debugger-for-react-24f0fce96802) -- [Deep in Weeds with Reactime, Concurrent React_fiberRoot, and Browser History Caching](https://itnext.io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb) -- [Time-Traveling Through React State with Reactime 9.0](https://rxlina.medium.com/time-traveling-through-react-state-with-reactime-9-0-371dbdc99319) -- [What time is it? Reactime!](https://medium.com/@liuedar/what-time-is-it-reactime-fd7267b9eb89) +- [Time-Travel State with Reactime](https://medium.com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20) +- [React Fiber and Reactime](https://medium.com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8) +- [Meet Reactime - a time-traveling State Debugger for React](https://medium.com/@yujinkay/meet-reactime-a-time-traveling-state-debugger-for-react-24f0fce96802) +- [Deep in Weeds with Reactime, Concurrent React_fiberRoot, and Browser History Caching](https://itnext.io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb) +- [Time-Traveling Through React State with Reactime 9.0](https://rxlina.medium.com/time-traveling-through-react-state-with-reactime-9-0-371dbdc99319) +- [What time is it? Reactime!](https://medium.com/@liuedar/what-time-is-it-reactime-fd7267b9eb89) ## Authors -- **David Kim** - [@codejunkie7](https://github.com/codejunkie7) -- **Robby Tipton** - [@RobbyTipton](https://github.com/RobbyTipton) -- **Kevin HoEun Lee** - [@khobread](https://github.com/khobread) -- **Christopher LeBrett** - [@fscgolden](https://github.com/fscgolden) -- **Joseph Park** - [@joeepark](https://github.com/joeepark) -- **Kris Sorensen** - [@kris-sorensen](https://github.com/kris-sorensen) -- **Daljit Gill** - [@dgill05](https://github.com/dgill05) -- **Ben Michareune** - [@bmichare](https://github.com/bmichare) -- **Dane Corpion** - [@danecorpion](https://github.com/danecorpion) -- **Harry Fox** - [@StackOverFlowWhereArtThou](https://github.com/StackOverFlowWhereArtThou) -- **Nathan Richardson** - [@BagelEnthusiast](https://github.com/BagelEnthusiast) -- **David Bernstein** - [@dangitbobbeh](https://github.com/dangitbobbeh) -- **Joseph Stern** - [@josephiswhere](https://github.com/josephiswhere) -- **Dennis Lopez** - [@DennisLpz](https://github.com/DennisLpz) -- **Cole Styron** - [@colestyron](https://github.com/C-STYR) -- **Ali Rahman** - [@CourageWolf](https://github.com/CourageWolf) -- **Caner Demir** - [@demircaner](https://github.com/demircaner) -- **Kevin Ngo** - [@kev-ngo](https://github.com/kev-ngo) -- **Becca Viner** - [@rtviner](https://github.com/rtviner) -- **Caitlin Chan** - [@caitlinchan23](https://github.com/caitlinchan23) -- **Kim Mai Nguyen** - [@Nkmai](https://github.com/Nkmai) -- **Tania Lind** - [@lind-tania](https://github.com/lind-tania) -- **Alex Landeros** - [@AlexanderLanderos](https://github.com/AlexanderLanderos) -- **Chris Guizzetti** - [@guizzettic](https://github.com/guizzettic) -- **Jason Victor** - [@theqwertypusher](https://github.com/Theqwertypusher) -- **Sanjay Lavingia** - [@sanjaylavingia](https://github.com/sanjaylavingia) -- **Vincent Nguyen** - [@VNguyenCode](https://github.com/VNguyenCode) -- **Haejin Jo** - [@haejinjo](https://github.com/haejinjo) -- **Hien Nguyen** - [@hienqn](https://github.com/hienqn) -- **Jack Crish** - [@JackC27](https://github.com/JackC27) -- **Kevin Fey** - [@kevinfey](https://github.com/kevinfey) -- **Carlos Perez** - [@crperezt](https://github.com/crperezt) -- **Edwin Menendez** - [@edwinjmenendez](https://github.com/edwinjmenendez) -- **Gabriela Jardim Aquino** - [@aquinojardim](https://github.com/aquinojardim) -- **Greg Panciera** - [@gpanciera](https://github.com/gpanciera) -- **Nathanael Wa Mwenze** - [@nmwenz90](https://github.com/nmwenz90) -- **Ryan Dang** - [@rydang](https://github.com/rydang) -- **Bryan Lee** - [@mylee1995](https://github.com/mylee1995) -- **Josh Kim** - [@joshua0308](https://github.com/joshua0308) -- **Sierra Swaby** - [@starkspark](https://github.com/starkspark) -- **Ruth Anam** - [@peachiecodes](https://github.com/peachiecodes) -- **David Chai** - [@davidchaidev](https://github.com/davidchai717) -- **Yujin Kang** - [@yujinkay](https://github.com/yujinkay) -- **Andy Wong** - [@andywongdev](https://github.com/andywongdev) -- **Chris Flannery** - [@chriswillsflannery](https://github.com/chriswillsflannery) -- **Rajeeb Banstola** - [@rajeebthegreat](https://github.com/rajeebthegreat) -- **Prasanna Malla** - [@prasmalla](https://github.com/prasmalla) -- **Rocky Lin** - [@rocky9413](https://github.com/rocky9413) -- **Abaas Khorrami** - [@dubalol](https://github.com/dubalol) -- **Ergi Shehu** - [@Ergi516](https://github.com/ergi516) -- **Raymond Kwan** - [@rkwn](https://github.com/rkwn) -- **Joshua Howard** - [@Joshua-Howard](https://github.com/joshua-howard) -- **Lina Shin** - [@rxlina](https://github.com/rxlina) -- **Andy Tsou** - [@andytsou19](https://github.com/andytsou19) -- **Feiyi Wu** - [@FreyaWu](https://github.com/FreyaWu) -- **Viet Nguyen** - [@vnguyen95](https://github.com/vnguyen95) -- **Alex Gomez** - [@alexgomez9](https://github.com/alexgomez9) -- **Edar Liu** - [@liuedar](https://github.com/liuedar) -- **Kristina Wallen** - [@kristinawallen](https://github.com/kristinawallen) -- **Quan Le** - [@blachfog](https://github.com/Blachfog) -- **Robert Maeda** - [@robmaeda](https://github.com/robmaeda) +- **Peng Dong** - [@d28601581](https://github.com/d28601581) +- **Ozair Ghulam** - [@ozairgh](https://github.com/ozairgh) +- **Christina Or** - [@christinaor](https://github.com/christinaor) +- **Khanh Bui** - [@AndyB909](https://github.com/AndyB909) +- **David Kim** - [@codejunkie7](https://github.com/codejunkie7) +- **Robby Tipton** - [@RobbyTipton](https://github.com/RobbyTipton) +- **Kevin HoEun Lee** - [@khobread](https://github.com/khobread) +- **Christopher LeBrett** - [@fscgolden](https://github.com/fscgolden) +- **Joseph Park** - [@joeepark](https://github.com/joeepark) +- **Kris Sorensen** - [@kris-sorensen](https://github.com/kris-sorensen) +- **Daljit Gill** - [@dgill05](https://github.com/dgill05) +- **Ben Michareune** - [@bmichare](https://github.com/bmichare) +- **Dane Corpion** - [@danecorpion](https://github.com/danecorpion) +- **Harry Fox** - [@StackOverFlowWhereArtThou](https://github.com/StackOverFlowWhereArtThou) +- **Nathan Richardson** - [@BagelEnthusiast](https://github.com/BagelEnthusiast) +- **David Bernstein** - [@dangitbobbeh](https://github.com/dangitbobbeh) +- **Joseph Stern** - [@josephiswhere](https://github.com/josephiswhere) +- **Dennis Lopez** - [@DennisLpz](https://github.com/DennisLpz) +- **Cole Styron** - [@colestyron](https://github.com/C-STYR) +- **Ali Rahman** - [@CourageWolf](https://github.com/CourageWolf) +- **Caner Demir** - [@demircaner](https://github.com/demircaner) +- **Kevin Ngo** - [@kev-ngo](https://github.com/kev-ngo) +- **Becca Viner** - [@rtviner](https://github.com/rtviner) +- **Caitlin Chan** - [@caitlinchan23](https://github.com/caitlinchan23) +- **Kim Mai Nguyen** - [@Nkmai](https://github.com/Nkmai) +- **Tania Lind** - [@lind-tania](https://github.com/lind-tania) +- **Alex Landeros** - [@AlexanderLanderos](https://github.com/AlexanderLanderos) +- **Chris Guizzetti** - [@guizzettic](https://github.com/guizzettic) +- **Jason Victor** - [@theqwertypusher](https://github.com/Theqwertypusher) +- **Sanjay Lavingia** - [@sanjaylavingia](https://github.com/sanjaylavingia) +- **Vincent Nguyen** - [@VNguyenCode](https://github.com/VNguyenCode) +- **Haejin Jo** - [@haejinjo](https://github.com/haejinjo) +- **Hien Nguyen** - [@hienqn](https://github.com/hienqn) +- **Jack Crish** - [@JackC27](https://github.com/JackC27) +- **Kevin Fey** - [@kevinfey](https://github.com/kevinfey) +- **Carlos Perez** - [@crperezt](https://github.com/crperezt) +- **Edwin Menendez** - [@edwinjmenendez](https://github.com/edwinjmenendez) +- **Gabriela Jardim Aquino** - [@aquinojardim](https://github.com/aquinojardim) +- **Greg Panciera** - [@gpanciera](https://github.com/gpanciera) +- **Nathanael Wa Mwenze** - [@nmwenz90](https://github.com/nmwenz90) +- **Ryan Dang** - [@rydang](https://github.com/rydang) +- **Bryan Lee** - [@mylee1995](https://github.com/mylee1995) +- **Josh Kim** - [@joshua0308](https://github.com/joshua0308) +- **Sierra Swaby** - [@starkspark](https://github.com/starkspark) +- **Ruth Anam** - [@peachiecodes](https://github.com/peachiecodes) +- **David Chai** - [@davidchaidev](https://github.com/davidchai717) +- **Yujin Kang** - [@yujinkay](https://github.com/yujinkay) +- **Andy Wong** - [@andywongdev](https://github.com/andywongdev) +- **Chris Flannery** - [@chriswillsflannery](https://github.com/chriswillsflannery) +- **Rajeeb Banstola** - [@rajeebthegreat](https://github.com/rajeebthegreat) +- **Prasanna Malla** - [@prasmalla](https://github.com/prasmalla) +- **Rocky Lin** - [@rocky9413](https://github.com/rocky9413) +- **Abaas Khorrami** - [@dubalol](https://github.com/dubalol) +- **Ergi Shehu** - [@Ergi516](https://github.com/ergi516) +- **Raymond Kwan** - [@rkwn](https://github.com/rkwn) +- **Joshua Howard** - [@Joshua-Howard](https://github.com/joshua-howard) +- **Lina Shin** - [@rxlina](https://github.com/rxlina) +- **Andy Tsou** - [@andytsou19](https://github.com/andytsou19) +- **Feiyi Wu** - [@FreyaWu](https://github.com/FreyaWu) +- **Viet Nguyen** - [@vnguyen95](https://github.com/vnguyen95) +- **Alex Gomez** - [@alexgomez9](https://github.com/alexgomez9) +- **Edar Liu** - [@liuedar](https://github.com/liuedar) +- **Kristina Wallen** - [@kristinawallen](https://github.com/kristinawallen) +- **Quan Le** - [@blachfog](https://github.com/Blachfog) +- **Robert Maeda** - [@robmaeda](https://github.com/robmaeda) ## License diff --git a/assets/components-viewing.gif b/assets/components-viewing.gif new file mode 100644 index 000000000..0560b58f7 Binary files /dev/null and b/assets/components-viewing.gif differ diff --git a/assets/reactime-2022-workflow.png b/assets/reactime-2022-workflow.png new file mode 100644 index 000000000..90d2fdc66 Binary files /dev/null and b/assets/reactime-2022-workflow.png differ diff --git a/package.json b/package.json index bb1a5017e..e0927e3a3 100644 --- a/package.json +++ b/package.json @@ -192,6 +192,7 @@ "react-split": "^2.0.14", "recoil": "0.0.10", "util": "^0.12.4", - "web-vitals": "^1.1.0" + "web-vitals": "^1.1.0", + "yarn": "^1.22.19" } -} \ No newline at end of file +} diff --git a/src/app/components/Action.tsx b/src/app/components/Action.tsx index 9109c1b58..a52d19372 100644 --- a/src/app/components/Action.tsx +++ b/src/app/components/Action.tsx @@ -50,7 +50,6 @@ const Action = (props: ActionProps): JSX.Element => { sliderIndex, dispatch, displayName, - componentName, componentData, viewIndex, isCurrIndex, @@ -103,46 +102,46 @@ const Action = (props: ActionProps): JSX.Element => { className={ selected || last ? 'action-component selected' : 'action-component' } - onClick={() => { - dispatch(changeView(index)); - }} - role="presentation" - style={index > sliderIndex ? { color: '#5f6369' } : {}} - tabIndex={index} - > - - -
sliderIndex ? { color: '#5f6369' } : {}}> -
- -
- - { - isCurrIndex ? ( - - ) - : ( + onClick={() => { + dispatch(changeView(index)); + }} + role="presentation" + style={index > sliderIndex ? { color: '#5f6369' } : {}} + tabIndex={index} + > + + +
sliderIndex ? { color: '#5f6369' } : {}}> +
+ +
+ + { + isCurrIndex ? ( ) - } + : ( + + ) + }
diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx index 2d1171e90..a050fd4d0 100644 --- a/src/app/components/App.tsx +++ b/src/app/components/App.tsx @@ -1,21 +1,18 @@ -import React, { useReducer, useState } from 'react'; +import React, { useReducer } from 'react'; import { MemoryRouter as Router, - Route, - NavLink, - Switch, - useLocation, } from 'react-router-dom'; // import { Steps, Hints } from 'intro.js-react'; import MainContainer from '../containers/MainContainer'; import { StoreContext } from '../store'; import mainReducer from '../reducers/mainReducer.js'; - // import 'intro.js/introjs.css'; -// currentTab is the current active tab within Google Chrome. This is used to decide what tab Reactime should be monitoring. This can be "locked" -// currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc). This is used to determine the proper tutorial to render when How To button is pressed. +// currentTab is the current active tab within Google Chrome. +// This is used to decide what tab Reactime should be monitoring. This can be "locked" +// currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc). +// This is used to determine the proper tutorial to render when How To button is pressed. const initialState: { port: null | number, diff --git a/src/app/components/AtomsRelationship.tsx b/src/app/components/AtomsRelationship.tsx index c482033ec..7b6d48efe 100644 --- a/src/app/components/AtomsRelationship.tsx +++ b/src/app/components/AtomsRelationship.tsx @@ -3,16 +3,16 @@ import { Group } from '@visx/group'; import { Cluster, hierarchy } from '@visx/hierarchy'; import { LinkVertical } from '@visx/shape'; import { LinearGradient } from '@visx/gradient'; -import { StateRouteProps} from './StateRoute' -import { onHover, onHoverExit } from '../actions/actions' -import { useStoreContext } from '../store' -import Legend from './AtomsRelationshipLegend' +import { StateRouteProps } from './StateRoute'; +import { onHover, onHoverExit } from '../actions/actions'; +import { useStoreContext } from '../store'; +import Legend from './AtomsRelationshipLegend'; export const blue = '#acdbdf'; export const selectWhite = '#f0ece2'; export const lightgreen = '#0BAB64'; -export const green = '#3BB78F' +export const green = '#3BB78F'; export const orange = '#FED8B1'; export const merlinsbeard = '#f7f7f3'; @@ -22,53 +22,50 @@ export const root = '#d2f5e3'; interface clusterShape { name?:string; children?: clusterShape[] -} +} interface outerObjShape { name?:string; children?: outerObjShape[] -} +} interface innerObjShape { name?:string; children?: innerObjShape[] -} +} interface selectorsCache { [key:string]: any } - const clusterData : clusterShape = {}; const selectorsCache :selectorsCache = {}; -const bothObj = {}; +const bothObj = {}; - -let initialFire = false +let initialFire = false; function clusterDataPopulate(props:StateRouteProps) { - let atomCompObj = reorganizedCompObj(props); - - //this is to set the root name property + const atomCompObj = reorganizedCompObj(props); + + // this is to set the root name property if (props[0].name) { clusterData.name = props[0].name; } - //we'll first handle AtomSelectors - if(Object.entries(props[0].atomSelectors).length !== 0){ - if(!clusterData.children) clusterData.children = [] - - for(let key in props[0].atomSelectors){ + // we'll first handle AtomSelectors + if (Object.entries(props[0].atomSelectors).length !== 0) { + if (!clusterData.children) clusterData.children = []; + for (let key in props[0].atomSelectors) { let outerobj:outerObjShape = {} outerobj.name = key selectorsCache[key] = true - if(!bothObj[key]){ + if (!bothObj[key]) { bothObj[key] = [] } - if(props[0].atomSelectors[key].length){ - for(let i=0; i; - if (selector) return ; + if (selector) return ; return ( @@ -153,18 +150,18 @@ function Node({ node, snapshots, dispatch, bothObj}) { fill={isParent ? orange : blue} stroke={isParent ? orange : blue} onMouseLeave={()=> { - for (let i=0; i { - for (let i=0; i { + for (let i = 0; i < bothObj[node.data.name].length; i++) { + if (snapshots[0].recoilDomNode[bothObj[node.data.name][i]].length) { + dispatch(onHover(snapshots[0].recoilDomNode[bothObj[node.data.name][i]])); + } + } }} /> )} @@ -173,7 +170,7 @@ function Node({ node, snapshots, dispatch, bothObj}) { fontSize={9} fontFamily="Arial" textAnchor="middle" - y = "-20" + y="-20" style={{ pointerEvents: 'none' }} fill={isParent ? orange : blue} > @@ -184,7 +181,6 @@ function Node({ node, snapshots, dispatch, bothObj}) { } function RootNode({ node }) { - const width = 40; const height = 20; const centerX = -width / 2; @@ -216,35 +212,35 @@ function RootNode({ node }) { } function SelectorNode({ node, snapshots, dispatch, bothObj}) { - return ( - + return ( + {node.depth !== 0 && ( - { - for (let i=0; i { + for (let i=0; i { - for (let i=0; i + } + }} + onMouseEnter={()=> { + for (let i=0; i )} @@ -254,16 +250,18 @@ function SelectorNode({ node, snapshots, dispatch, bothObj}) { ); } -function removeDup(bothObj){ - let filteredObj = {} - for (let key in bothObj){ +function removeDup(bothObj) { + let filteredObj = {}; + for (let key in bothObj) { let array = bothObj[key].filter((a,b) => bothObj[key].indexOf(a) === b) filteredObj[key] = array } - return filteredObj + return filteredObj; } -const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40 }; +const defaultMargin = { + top: 40, left: 0, right: 0, bottom: 40, +}; export default function AtomsRelationship({ width, @@ -272,53 +270,51 @@ export default function AtomsRelationship({ snapshots, }) { - - let filtered = removeDup(bothObj) + const filtered = removeDup(bothObj); const [{ tabs, currentTab }, dispatch] = useStoreContext(); - if(!initialFire){ + if (!initialFire) { clusterDataPopulate(snapshots); } - const data = useMemo(() => hierarchy(clusterData), []); const xMax = width - margin.left - margin.right; const yMax = height - margin.top - margin.bottom; return width < 10 ? null : ( <> -
- -
- - - - - - - {(cluster) => ( - - {cluster.links().map((link, i) => ( - - ))} - {cluster.descendants().map((node, i) => ( - - ))} - - )} - - +
+ +
+ + + + + {cluster => ( + + {cluster.links().map((link, i) => ( + + ))} + {cluster.descendants().map((node, i) => ( + + ))} + + )} + + ); -} \ No newline at end of file +} diff --git a/src/app/components/AtomsRelationshipLegend.tsx b/src/app/components/AtomsRelationshipLegend.tsx index 9cd0cb2ef..f204e844c 100644 --- a/src/app/components/AtomsRelationshipLegend.tsx +++ b/src/app/components/AtomsRelationshipLegend.tsx @@ -4,12 +4,11 @@ import { LegendOrdinal, LegendItem, LegendLabel, - } from '@visx/legend'; const ordinalColorScale = scaleOrdinal({ domain: ['Root', 'Selectors', 'Atoms', 'Components'], - range: [ '#3BB78F', '#f0ece2', '#FED8B1', '#acdbdf'], + range: ['#3BB78F', '#f0ece2', '#FED8B1', '#acdbdf'], }); const legendGlyphSize = 15; @@ -20,11 +19,12 @@ export default function Legend({ events = false }: { events?: boolean }) { `${label}`}> {labels => ( -
{labels.map((label, i) => ( { @@ -32,11 +32,11 @@ export default function Legend({ events = false }: { events?: boolean }) { }} > - @@ -70,7 +70,9 @@ function LegendDemo({ title, children }: { title: string; children: JSX.Element
{title}
{children} - + ` + } +
); -} \ No newline at end of file +} diff --git a/src/app/components/BarGraph.tsx b/src/app/components/BarGraph.tsx index e38adc18e..887ad3bc0 100644 --- a/src/app/components/BarGraph.tsx +++ b/src/app/components/BarGraph.tsx @@ -1,6 +1,6 @@ // @ts-nocheck import React, { useEffect, useState } from 'react'; -import { BarStack } from '@visx/shape'; +import { BarStack, Bar } from '@visx/shape'; import { SeriesPoint } from '@visx/shape/lib/types'; import { Group } from '@visx/group'; import { Grid } from '@visx/grid'; @@ -47,7 +47,7 @@ interface TooltipData { const margin = { top: 30, right: 30, bottom: 0, left: 50, }; -const axisColor = '#62d6fb'; +const axisColor = '#FF6569'; const background = '#242529'; const tooltipStyles = { ...defaultStyles, @@ -61,8 +61,18 @@ const tooltipStyles = { const BarGraph = props => { const [{ tabs, currentTab }, dispatch] = useStoreContext(); - const { width, height, data, comparison, setRoute, allRoutes, filteredSnapshots } = props; - const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length + 1}`); + const { + width, + height, + data, + comparison, + setRoute, + allRoutes, + filteredSnapshots, + snapshot, + setSnapshot + } = props; + const [seriesNameInput, setSeriesNameInput] = useState(`Series ${comparison.length + 1}`); const { tooltipOpen, tooltipLeft, @@ -76,11 +86,18 @@ const BarGraph = props => { detectBounds: true, scroll: true, }); + const keys = Object.keys(data.componentData); // data accessor (used to generate scales) and formatter (add units for on hover box) - const getSnapshotId = (d: snapshot) => d.snapshotId; + const getSnapshotId = (d: snapshot) => { + // d coming from data.barstack post filtered data + return d.snapshotId; + }; + + // returns snapshot id when invoked in tooltip section const formatSnapshotId = id => `Snapshot ID: ${id}`; + // returns render time when invoked in tooltip section const formatRenderTime = time => `${time} ms `; // create visualization SCALES with cleaned data @@ -89,11 +106,12 @@ const BarGraph = props => { padding: 0.2, }); + // Adjusts y axis to match/ bar height const renderingScale = scaleLinear({ domain: [0, data.maxTotalRender], nice: true, }); - + // Gives each bar on the graph a color using schemeSet3 imported from D3 const colorScale = scaleOrdinal({ domain: keys, range: schemeSet3, @@ -101,8 +119,8 @@ const BarGraph = props => { // setting max dimensions and scale ranges const xMax = width - margin.left - margin.right; - const yMax = height - margin.top - 150; snapshotIdScale.rangeRound([0, xMax]); + const yMax = height - margin.top - 150; renderingScale.range([yMax, 0]); const toStorage = { @@ -124,10 +142,11 @@ const BarGraph = props => { } }); + // CURRENTLY DOES NOT SAVE const saveSeriesClickHandler = () => { if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') { const actionNames = document.getElementsByClassName('actionname'); - for (let i = 0; i < actionNames.length; i++) { + for (let i = 0; i < actionNames.length; i += 1) { toStorage.data.barStack[i].name = actionNames[i].value; } dispatch(save(toStorage, seriesNameInput)); @@ -137,6 +156,7 @@ const BarGraph = props => { dispatch(save(toStorage)); }; + // Need to change so textbox isn't empty before saving const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? setSeriesNameInput(e.target.value)} /> : null; return (
@@ -154,7 +174,12 @@ const BarGraph = props => { +
+ + +
{ yScale={renderingScale} color={colorScale} > - {barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => { + {barStacks => barStacks.map(barStack => barStack.bars.map(bar => { // Hides new components if components don't exist in previous snapshots. if (Number.isNaN(bar.bar[1]) || bar.height < 0) { bar.height = 0; @@ -223,7 +265,13 @@ const BarGraph = props => { onMouseMove={event => { dispatch(onHover(data.componentData[bar.key].rtid)); if (tooltipTimeout) clearTimeout(tooltipTimeout); - const top = event.clientY - margin.top - bar.height; + const top; + if (snapshot === 'All Snapshots') { + top = event.clientY - margin.top - bar.height; + } else { + top = event.clientY - margin.top; + } + const left = bar.x + bar.width / 2; showTooltip({ tooltipData: bar, @@ -264,7 +312,7 @@ const BarGraph = props => { })} /> { Rendering Time (ms)
- - Snapshot ID - + {(snapshot === 'All Snapshots') + ? ( + + Snapshot ID + + ) + : ( + + Components + + )} + {/* FOR HOVER OVER DISPLAY */} + {/* Ths conditional statement displays a different tooltip + configuration depending on if we are trying do display a specific + snapshot through options menu or all snapshots together in bargraph */} {tooltipOpen && tooltipData && ( { const { width, height, data, comparison, setSeries, series, setAction } = props; - const [snapshots, setSnapshots] = React.useState(0); + const [snapshots] = React.useState(0); const [open, setOpen] = React.useState(false); const [picOpen, setPicOpen] = React.useState(false); useEffect(() => { @@ -113,10 +113,10 @@ const BarGraphComparison = props => { // We'll then use it in the renderingScale function and compare // with the render time of the current tab. // The max render time will determine the Y-axis's highest number. - const calculateMaxTotalRender = series => { - const currentSeriesBarStacks = !comparison[series] + const calculateMaxTotalRender = serie => { + const currentSeriesBarStacks = !comparison[serie] ? [] - : comparison[series].data.barStack; + : comparison[serie].data.barStack; if (currentSeriesBarStacks.length === 0) return 0; let currentMax = -Infinity; for (let i = 0; i < currentSeriesBarStacks.length; i += 1) { @@ -166,7 +166,7 @@ const BarGraphComparison = props => { const classes = useStyles(); const handleSeriesChange = event => { - if (!event) return + if (!event) return; setSeries(event.target.value); setAction(false); }; @@ -180,7 +180,7 @@ const BarGraphComparison = props => { }; const handleActionChange = event => { - if(!event.target.value) return + if (!event.target.value) return; setAction(event.target.value); setSeries(false); }; @@ -206,7 +206,7 @@ const BarGraphComparison = props => { }); return data.barStack; } - const animateButton = function (e) { + const animateButton = e => { e.preventDefault; e.target.classList.add('animate'); e.target.innerHTML = 'Deleted!'; @@ -216,32 +216,33 @@ const BarGraphComparison = props => { }, 1000); }; const classname = document.getElementsByClassName('delete-button'); - for (let i = 0; i < classname.length; i++) { + for (let i = 0; i < classname.length; i += 1) { classname[i].addEventListener('click', animateButton, false); } const seriesList = comparison.map(elem => elem.data.barStack); const actionsList = seriesList.flat(); const testList = actionsList.map(elem => elem.name); - + const finalList = []; - for (let i = 0; i < testList.length; i++) { - if (testList[i] !== "" && !finalList.includes(testList[i])) finalList.push(testList[i]); + for (let i = 0; i < testList.length; i += 1) { + if (testList[i] !== '' && !finalList.includes(testList[i])) finalList.push(testList[i]); } - + return (
-

Compare Series:

+

Compare Series:

diff --git a/src/app/components/BarGraphComparisonActions.tsx b/src/app/components/BarGraphComparisonActions.tsx index 94896e0e5..2d8f7e514 100644 --- a/src/app/components/BarGraphComparisonActions.tsx +++ b/src/app/components/BarGraphComparisonActions.tsx @@ -13,7 +13,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Select from '@material-ui/core/Select'; import MenuItem from '@material-ui/core/MenuItem'; import FormControl from '@material-ui/core/FormControl'; -import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../actions/actions'; +import { deleteSeries, setCurrentTabInApp } from '../actions/actions'; import { useStoreContext } from '../store'; /* TYPESCRIPT */ @@ -68,17 +68,17 @@ const tooltipStyles = { }; const BarGraphComparisonActions = props => { - const [{ tabs, currentTab }, dispatch] = useStoreContext(); + const [dispatch] = useStoreContext(); const { width, height, data, comparison, setSeries, series, setAction, action } = props; - const [snapshots, setSnapshots] = React.useState(0); - const [open, setOpen] = React.useState(false); - const [picOpen, setPicOpen] = React.useState(false); + const [snapshots] = React.useState(0); + const [setOpen] = React.useState(false); + const [setPicOpen] = React.useState(false); useEffect(() => { dispatch(setCurrentTabInApp('performance-comparison')); }, []); - + const { tooltipOpen, tooltipLeft, @@ -107,14 +107,10 @@ const BarGraphComparisonActions = props => { // The max render time will determine the Y-axis's highest number. const calculateMaxTotalRender = () => { let currentMax = -Infinity; - for(let i = 0; i < data.length; i++) { + for (let i = 0; i < data.length; i += 1) { let currentSum = 0; - - for(const key of keys) { - if(data[i][key]) currentSum += data[i][key] - } - - if(currentSum > currentMax) currentMax = currentSum; + for (const key of keys) if (data[i][key]) currentSum += data[i][key]; + if (currentSum > currentMax) currentMax = currentSum; } return currentMax; }; @@ -158,7 +154,7 @@ const BarGraphComparisonActions = props => { const classes = useStyles(); const handleSeriesChange = event => { - if (!event) return + if (!event) return; setSeries(event.target.value); setAction(false); // setXpoints(); @@ -175,7 +171,7 @@ const BarGraphComparisonActions = props => { }; const handleActionChange = event => { - if (!event) return + if (!event) return; setAction(event.target.value); setSeries(false); // setXpoints(); @@ -191,7 +187,6 @@ const BarGraphComparisonActions = props => { // setXpoints(); }; - const animateButton = function (e) { e.preventDefault; e.target.classList.add('animate'); @@ -202,16 +197,16 @@ const BarGraphComparisonActions = props => { }, 1000); }; const classname = document.getElementsByClassName('delete-button'); - for (let i = 0; i < classname.length; i++) { + for (let i = 0; i < classname.length; i += 1) { classname[i].addEventListener('click', animateButton, false); } const seriesList = comparison.map(elem => elem.data.barStack); const actionsList = seriesList.flat(); const testList = actionsList.map(elem => elem.name); - + const finalList = []; - for (let i = 0; i < testList.length; i++) { - if (testList[i] !== "" && !finalList.includes(testList[i])) finalList.push(testList[i]); + for (let i = 0; i < testList.length; i += 1) { + if (testList[i] !== '' && !finalList.includes(testList[i])) finalList.push(testList[i]); } return ( @@ -220,7 +215,7 @@ const BarGraphComparisonActions = props => {
@@ -300,36 +294,34 @@ const BarGraphComparisonActions = props => { yScale={renderingScale} color={colorScale} > - {barStacks => barStacks.map(barStack => barStack.bars.map((bar) => { - return ( - { - tooltipTimeout = window.setTimeout(() => { - hideTooltip(); - }, 300); - }} - // Cursor position in window updates position of the tool tip. - onMouseMove={event => { - if (tooltipTimeout) clearTimeout(tooltipTimeout); - const top = event.clientY - margin.top - bar.height; - const left = bar.x + bar.width / 2; - showTooltip({ - tooltipData: bar, - tooltipTop: top, - tooltipLeft: left, - }); - }} - /> - ); - }))} + {barStacks => barStacks.map(barStack => barStack.bars.map(bar => ( + { + tooltipTimeout = window.setTimeout(() => { + hideTooltip(); + }, 300); + }} + // Cursor position in window updates position of the tool tip. + onMouseMove={event => { + if (tooltipTimeout) clearTimeout(tooltipTimeout); + const top = event.clientY - margin.top - bar.height; + const left = bar.x + bar.width / 2; + showTooltip({ + tooltipData: bar, + tooltipTop: top, + tooltipLeft: left, + }); + }} + /> + )))} {
{tooltipData.key}
-
{`${tooltipData.bar.data[tooltipData.key]} ms`}
- {tooltipData.bar.data.seriesName} + { + `${tooltipData.bar.data[tooltipData.key]} ms` + } +
+
+ + {tooltipData.bar.data.seriesName} +
)} diff --git a/src/app/components/BarGraphComparisonTEST.tsx b/src/app/components/BarGraphComparisonTEST.tsx index 4072cca1a..b815b0da1 100644 --- a/src/app/components/BarGraphComparisonTEST.tsx +++ b/src/app/components/BarGraphComparisonTEST.tsx @@ -241,6 +241,7 @@ const BarGraphComparison = props => {