added colors and styling to the History, ComponentMap and console log removed from background.js

>
>
Co-authored-by: Nkmai <[email protected]>
Co-authored-by: lind-tania <[email protected]>
Co-authored-by: rtviner <[email protected]>
Co-authored-by: caitlinchan23 <[email protected]>
 

Author: Nkmai

src/app/components/ComponentMap.tsx

@@ -118,16 +118,16 @@ export default function ComponentMap({
                     key={i}
                     data={link}
                     percent={stepPercent}
-                    // stroke='rgb(254,110,158,0.6)'
                     stroke='#ff6569'
                     strokeWidth='1'
                     fill='none'
                   />
                 ))}
 
                 {tree.descendants().map((node, key) => {
-                  const width = 55;
-                  const height = 20;
+                  const width = 65;
+                  const height = 25;
+              
 
                   let top: number;
                   let left: number;
@@ -149,7 +149,7 @@ export default function ComponentMap({
                         <circle
                           r={12}
                           fill="url('#links-gradient')"
-                          stroke="#e7e7e7"
+                          stroke="#ff6569"
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
                             // console.log(node);
@@ -164,11 +164,11 @@ export default function ComponentMap({
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill='#272b4d'
-                          stroke={node.children ? '#62d6fb' : '#F5F47E'}
+                          fill= {node.children ? '#161521' : '#62d6fb'}
+                          stroke={node.children ? '#62d6fb' : '#161521'}
                           strokeWidth={1}
                           strokeDasharray={node.children ? '0' : '2,2'}
-                          strokeOpacity={node.children ? 1 : 0.6}
+                          strokeOpazcity='1'
                           rx={node.children ? 4 : 10}                         
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
@@ -194,16 +194,16 @@ export default function ComponentMap({
                       {/* Display text inside of each component node */}
                       <text
                         dy='.33em'
-                        fontSize={9}
+                        fontSize={8}
                         fontFamily='Roboto'
                         textAnchor='middle'
                         style={{ pointerEvents: 'none' }}
                         fill={
                           node.depth === 0
-                            ? '#71248e'
+                            ? '#161521'
                             : node.children
-                            ? '#B1EDE8'
-                            : '#F5F47E'
+                            ? 'white'
+                            : '#161521'
                         }
                       >
                         {node.data.name}

src/app/components/History.tsx

@@ -1,17 +1,18 @@
-
+// @ts-nocheck
 import React, { Component, useEffect, useState } from 'react';
 import * as d3 from 'd3';
 import LegendKey from './legend';
-// import { changeView, changeSlider } from '../actions/actions';
+//added back  line 6 , 160- 12
+import { changeView, changeSlider } from '../actions/actions';
 /**
  * @var colors: Colors array for the diffrerent node branches, each color is for a different branch
  */
 const colors = [
-  '#95B6B7',
-  '#475485',
-  '#519331',
-  '#AA5039',
-  '#8B2F5F',
+  '#eb4d70', 
+  '#f19938', 
+  '#6ce18b', 
+  '#78f6ef', 
+  '#9096f8',
   '#C5B738',
   '#858DFF',
   '#FF8D02',
@@ -151,9 +152,9 @@ function History(props: Record<string, unknown>) {
         d3.select(this).transition(90).duration(18).attr('r', 21);
       })
       .on('click', function (d: `Record<string, unknown>`) {
-        // const index = parseInt(`${d.data.name}.${d.data.branch}`);
-        // dispatch(changeSlider(index));
-        // dispatch(changeView(index));
+        const index = parseInt(`${d.data.name}.${d.data.branch}`);
+        dispatch(changeSlider(index));
+        dispatch(changeView(index));
       })
       // think about how I can convert this any to typescript
       .on('mouseout', function () {
@@ -183,8 +184,6 @@ function History(props: Record<string, unknown>) {
       .text(function (d: { data: { name: number; branch: number } }) {
         // display the name of the specific patch
         // return `${d.data.name}.${d.data.branch}`;
-          console.log('D.DATA.NAME: ', d.data.name);
-          console.log('D.DATA.BRANCH:', d.data.branch);
         return `${d.data.name}.${d.data.branch}`;
       });
 

src/app/components/PerformanceVisx.tsx

@@ -163,6 +163,7 @@ const PerformanceVisx = (props: BarStackProps) => {
     nice: true,
   });
 
+
   const colorScale = scaleOrdinal<string>({
     domain: keys,
     range: schemeSet3,

src/app/components/legend.tsx

@@ -67,11 +67,11 @@ export default function LegendKey(props: any) {
   const ordinalColorScale = scaleOrdinal<number, string>({
     domain: snap,
     range: [
-      '#95B6B7',
-      '#475485',
-      '#519331',
-      '#AA5039',
-      '#8B2F5F',
+      '#eb4d70', 
+      '#f19938', 
+      '#6ce18b',
+      '#78f6ef', 
+      '#9096f8',
       '#C5B738',
       '#858DFF',
       '#FF8D02',

src/app/styles/layout/_stateContainer.scss

@@ -16,6 +16,7 @@
 	justify-content: flex-start;
 	align-items: center;
 	height: 30px;
+	position: static;
 }
 
 .state-container .main-navbar {
@@ -110,7 +111,7 @@
 		background-color: $navbar-color;
 		display: flex;
 		flex-direction: row;
-		justify-content: space-evenly;
+		justify-content: start;
 		align-items: center;
 		height: 30px;
 	}
@@ -138,14 +139,6 @@
 	}
 }
 
-.navbar {
-	// prevent navbar from scrolling with state/tree display
-	top: 0px;
-	left: 0px;
-	z-index: 1;
-	@extend %disable-highlight;
-}
-
 .no-data-message {
 	color: $text-color;
 	font: normal 13px $text-font-stack;

src/extension/background.js

@@ -50,43 +50,16 @@ class Node {
 	}
 }
 
-// class NewNode {
-// 	constructor(obj, tabObj) {
-// 		// continues the order of number of total state changes
-// 		this.index = tabObj.index++;
-// 		// continues the order of number of states changed from that parent
-// 		this.name = tabObj.currParent;
-// 		// marks from what branch this node is originated
-// 		this.branch = tabObj.currBranch += 1;
-// 		this.stateSnapshot = obj;
-// 		this.children = [];
-// 	}
-// }
-
 function sendToHierarchy(tabObj, newNode) {
 	if (!tabObj.currLocation) {
-		console.log('tabObj.currLocation does not exist');
 		tabObj.currLocation = newNode;
 		tabObj.hierarchy = newNode;
 	} else {
-		console.log(
-			'tabObj.currLocation  exist' + Object.entries(tabObj.currLocation)
-		);
 		tabObj.currLocation.children.push(newNode);
-		console.log(
-			'tabObj.currLocation.children ' +
-				Object.entries(tabObj.currLocation.children)
-		);
-		console.log(
-			'tabObj.currLocation.children.length ' +
-				tabObj.currLocation.children.length
-		);
 		// if the node's children's array is empty
 		if (tabObj.currLocation.children.length > 1) {
-			console.log('tabObj.currLocation exist and children is more than one');
 			// increment the value of the nodes branch by 1
 			newNode.branch += 1;
-
 			// reassign value of current branch as the newNode branch value
 			tabObj.currBranch = newNode.branch;
 		}