test

Author: Nkmai

archive/.pre-v4-demo.gif.icloud

@@ -1,13 +1,12 @@
-// @ts-nocheck
 import React from 'react';
 import { scaleOrdinal } from '@visx/scale';
 import {
   LegendOrdinal,
   LegendItem,
   LegendLabel,
+  
 } from '@visx/legend';
 
-
 const ordinalColorScale = scaleOrdinal({
   domain: ['Root', 'Selectors', 'Atoms', 'Components'],
   range: [ '#3BB78F', '#f0ece2', '#FED8B1', '#acdbdf'],
@@ -49,7 +48,7 @@ export default function Legend({ events = false }: { events?: boolean }) {
           )}
         </LegendOrdinal>
       </LegendDemo>
-      <style jsx>
+      <style>
         {`
           .legends {
             width: 25%;
@@ -66,12 +65,12 @@ export default function Legend({ events = false }: { events?: boolean }) {
   );
 }
 
-function LegendDemo({ title, children }: { title: string; children: React.ReactNode }) {
+function LegendDemo({ title, children }: { title: string; children: JSX.Element }) {
   return (
     <div className="legend">
       <div className="title">{title}</div>
       {children}
-      <style jsx>{`
+      <style>{`
         .legend {
          position: absolute;
             top: 50;

archive/pre-v4-demo.gif

@@ -1,8 +1,3 @@
-/* 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 */
 // @ts-nocheck
 import React, { useState } from 'react';
 import { Group } from '@visx/group';
@@ -15,6 +10,24 @@ import getLinkComponent from './getLinkComponent';
 import { onHover, onHoverExit } from '../actions/actions'
 import { useStoreContext } from '../store'
 
+const root = hierarchy({
+  name: 'root',
+  children: [
+    { name: 'child #1' },
+    {
+      name: 'child #2',
+      children: [{ name: 'grandchild #1' }, { name: 'grandchild #2' }, { name: 'grandchild #3' }],
+    },
+  ],
+});
+interface TreeNode {
+  name: string;
+  isExpanded?: boolean;
+  children?: TreeNode[];
+}
+
+type HierarchyNode = HierarchyPointNode<TreeNode>;
+
 const defaultMargin = { top: 30, left: 30, right: 30, bottom: 70 };
 
 export type LinkTypesProps = {
@@ -35,13 +48,13 @@ export default function ComponentMap({
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   // This is where we select the last object in the snapshots array from props to allow hierarchy to parse the data for render on the component map per hierarchy layout specifications.
   const lastNode = snapshots.length - 1;
-  const data = snapshots[lastNode];
+  const data: {} = snapshots[lastNode];
   // importing custom hooks for the selection tabs.
-  const [layout, setLayout] = useState<string>('cartesian');
-  const [orientation, setOrientation] = useState<string>('horizontal');
-  const [linkType, setLinkType] = useState<string>('diagonal');
+  const [layout, setLayout] = useState('cartesian');
+  const [orientation, setOrientation] = useState('horizontal');
+  const [linkType, setLinkType] = useState('diagonal');
 
-  const [stepPercent, setStepPercent] = useState<number>(10);
+  const [stepPercent, setStepPercent] = useState(10);
   // Declared this variable and assigned it to the useForceUpdate function that forces a state to change causing that component to re-render and display on the map
   const forceUpdate = useForceUpdate();
   // setting the margins for the Map to render in the tab window.
@@ -136,7 +149,7 @@ export default function ComponentMap({
                           fill="url('#links-gradient')"
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
-                            console.log(node);
+                            // console.log(node);
                             forceUpdate();
                           }}
                         />

babel.config.js

@@ -3,7 +3,6 @@
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable react/require-default-props */
-// @ts-nocheck
 import React from 'react';
 import { diff, formatters } from 'jsondiffpatch';
 import ReactHtmlParser from 'react-html-parser';

src/app/components/AtomsRelationshipLegend.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import {
   MemoryRouter as Router, Route, NavLink, Switch,

src/app/components/ComponentMap.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import Select from 'react-select';
 

src/app/components/Diff.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 
 /* eslint-disable react/prop-types */
 /* eslint-disable semi */

src/app/components/DiffRoute.tsx

@@ -1,10 +1,8 @@
-// @ts-nocheck
 
 import React, { Component, useEffect, useState } from 'react';
 import * as d3 from 'd3';
 import LegendKey from './legend';
-import { changeView, changeSlider } from '../actions/actions';
-
+// import { changeView, changeSlider } from '../actions/actions';
 /**
  * @var colors: Colors array for the diffrerent node branches, each color is for a different branch
  */
@@ -79,6 +77,7 @@ 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()
@@ -152,12 +151,12 @@ 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 (d: any) {
+      .on('mouseout', function () {
         d3.select(this).transition().duration(300).attr('r', 14);
       });