basic clean up of all the components and changed the style of the linkControls to match the UI style

>
>
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/History.tsx

@@ -2,7 +2,6 @@
 import React, { Component, useEffect, useState } from 'react';
 import * as d3 from 'd3';
 import LegendKey from './legend';
-//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
@@ -45,7 +44,7 @@ function History(props: Record<string, unknown>) {
   let root = JSON.parse(JSON.stringify(hierarchy));
   let isRecoil = false;
 
-  let HistoryRef = React.createRef(root); //React.createRef(root);
+  let HistoryRef = React.createRef(root); 
   useEffect(() => {
     maked3Tree();
   }, [root]);
@@ -78,7 +77,6 @@ function History(props: Record<string, unknown>) {
 
     // d3.hierarchy constructs a root node from the specified hierarchical data
     // (our object titled dataset), which must be an object representing the root node
-    
     const hierarchy = d3.hierarchy(root);
     const tree = d3
       .tree()
@@ -252,7 +250,6 @@ function History(props: Record<string, unknown>) {
           ref={HistoryRef}
           className="history-d3-div"
           id="historyContainer"
-          // position="absolute"
         />
       </div>
     </>

src/app/components/LinkControls.tsx

@@ -7,10 +7,16 @@ const controlStyles = {
 };
 
 const dropDownStyle = {
+	// margin: '0.5em',
+  // fontSize: '12px',
+  // borderRadius: '4px', 
+  // backgroundColor: 'rgb(231, 231, 231)'
 	margin: '0.5em',
   fontSize: '12px',
   borderRadius: '4px', 
-  backgroundColor: 'rgb(231, 231, 231)'
+	backgroundColor: '#242529', 
+	color:'white',
+	padding:'2px'
 }
 
 type Props = {

src/app/components/MainSlider.tsx

@@ -1,7 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable react/prop-types */
 import React from 'react';
 import Slider from 'rc-slider';
 import Tooltip from 'rc-tooltip';

src/app/components/PerformanceVisx.tsx

@@ -100,7 +100,6 @@ const PerformanceVisx = (props: BarStackProps) => {
   // filter and structure incoming data for VISX
   const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
 
-  // style={{ position: 'relative' }}
     // if performance tab is too small it will not return VISX component
     return  (
       <div className='renderTab'>

src/app/components/SwitchApp.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React from 'react';
 import Select from 'react-select';
 import { useStoreContext } from '../store';

src/app/components/Tree.tsx

@@ -1,8 +1,4 @@
-/* eslint-disable arrow-body-style */
-/* eslint-disable max-len */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/ban-types */
+
 import React from 'react';
 import JSONTree from 'react-json-tree';
 

src/app/components/getLinkComponent.ts

@@ -1,5 +1,3 @@
-
-
 import {
   LinkHorizontal,
   LinkVertical,