redid formatters

Author: Solodt55

src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import JSONTree from 'react-json-tree';
+import { JSONTree } from 'react-json-tree';
 
 /*
   Code that show's the tooltip of our JSON tree

src/app/components/StateRoute/History.tsx

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

src/app/components/StateRoute/Tree.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import JSONTree from 'react-json-tree'; // React JSON Viewer Component
+import { JSONTree } from 'react-json-tree'; // React JSON Viewer Component
 import { setCurrentTabInApp } from '../../slices/mainSlice';
 import { useDispatch } from 'react-redux';
 import { TreeProps } from '../../FrontendTypes';