changed type to interface and imported

Author: yuanjackie1

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

@@ -19,21 +19,15 @@ import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
 import { toggleExpanded, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
+import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../components/FrontendTypes'
 
-const defaultMargin: {} = {
+const defaultMargin: DefaultMargin = {
   top: 30,
   left: 30,
   right: 55,
   bottom: 70,
 };
 
-export type LinkTypesProps = {
-  width: number;
-  height: number;
-  margin?: { top: number; right: number; bottom: number; left: number };
-  snapshots: Record<string, unknown>;
-  currentSnapshot?: Record<string, unknown>;
-};
 
 export default function ComponentMap({
   // imported props to be used to display the dendrogram
@@ -95,7 +89,7 @@ export default function ComponentMap({
     scroll: true,
   });
 
-  const tooltipStyles: {} = {
+  const tooltipStyles: ToolTipStyles = {
     ...defaultStyles,
     minWidth: 60,
     maxWidth: 300,

src/app/components/StateRoute/StateRoute.tsx

@@ -27,7 +27,7 @@ const StateRoute = (props: StateRouteProps) => {
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
 
   // Map
-  const renderComponentMap = (): JSX.Element  => {
+  const renderComponentMap = () => {
     if (hierarchy) {
       return (
         <ParentSize className='componentMapContainer'>
@@ -50,7 +50,7 @@ const StateRoute = (props: StateRouteProps) => {
   // if true, we invoke the D3 render chart with hierarchy
   // by invoking History component, and passing in all the props required to render D3 elements and perform timeJump from clicking of node
   // otherwise we send an alert to the user that no state was found.
-  const renderHistory = (): JSX.Element  => {
+  const renderHistory:JSX.Element = () => {
     if (hierarchy) {
       return (
         <ParentSize>