Merge pull request #18 from christinaor/c-feature-branch

Update ReadMe

Author: AndyB909

README.md

@@ -43,15 +43,17 @@
   <a href="#how-to-use">How To Use</a> • <a href="#features">Features</a> • <a href="https://reactime.io">Website</a> • <a href="#read-more">Read More</a>
 </p>
 
+<b>Reactime 15.0</b> has added 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.
 
-<b>Reactime 14.0</b> has added the exciting features below:
+Previously, <b>Reactime 14.0</b> added the exciting features below:
 
 I. React Router Compatibility <br>
 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 <br>
-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 <br>
 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.
 <br>
 <br>
+
 <p align="center">
 <img src="./assets/map-viewing.gif" />
 </p>
 <br>
 
-### 🔹 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.
 <br>
 <br>
+
 <p align="center">
 <img src="./assets/action-comparison.gif" />
 </p>
 <br>
 
+### 🔹 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.
+<br>
+<br>
+
+<p align="center">
+<!-- <img src="./assets/action-comparison.gif" /> -->
+</p>
+<br>
+
 ### 🔹 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.
 <br>
 <br>
+
 <p align="center">
 <img src="./assets/history-tree.gif" />
 </p>
@@ -149,93 +165,102 @@ After cloning this repository, developers can simply run `npm run docs` at the r
 
 ### <b>Additional Features</b>
 
-- 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
+
+### <b>Bug Fixes</b>
+
+-   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
 
 ## <b>Read More</b>
 
-- [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)
 
 ## <b>Authors</b>
 
-- **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)
 
 ## <b>License </b>