working on formaters

Author: Solodt55

src/app/components/StateRoute/History.tsx

@@ -3,7 +3,11 @@
 // @ts-nocheck
 import React, { useEffect } from 'react';
 // formatting findDiff return data to show the changes with colors, aligns with actions.tsx
-import { diff, formatters } from 'jsondiffpatch';
+import { diff } from 'jsondiffpatch';
+import { HtmlFormatter } from 'jsondiffpatch/lib/formatters';
+// import * as jsondiffpatch from 'jsondiffpatch';
+// import { diff } from 'jsondiffpatch';
+// import formatters from 'jsondiffpatch/src/formatters';
 import * as d3 from 'd3';
 import { DefaultMargin } from '../../FrontendTypes';
 import { useDispatch } from 'react-redux';
@@ -156,7 +160,7 @@ function History(props: Record<string, unknown>): JSX.Element {
     );
 
     const changedState = findStateChangeObj(delta); // determines if delta had any stateful changes
-    const html = formatters.html.format(changedState[0]); // formats the difference into html string
+    const html = HtmlFormatter.format(changedState[0]); // formats the difference into html string
     return html; // return html string
   }
 

src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx

@@ -235,7 +235,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
                         // Cursor position in window updates position of the tool tip.
                         dispatch(onHover(data.componentData[bar.key].rtid));
                         if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                        const top;
+                        let top;
                         if (snapshot === 'All Snapshots') {
                           top = event.clientY - margin.top - bar.height;
                         } else {