start creating grammarrelationship component using TS

package.json

@@ -13,7 +13,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-leader-line": "^1.0.5",
-    "react-xarrows": "^2.0.2"
+    "react-xarrows": "^2.0.2",
+    "vite-tsconfig-paths": "^3.5.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",

src/App.css

@@ -5,37 +5,3 @@
   text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Home from "./pages/Home";
+
+function App() {
+  return (
+    <div className="App">
+      <Home/>
+    </div>
+  );
+}
+
+export default App;

src/components/GrammarRelationship/index.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import LeaderLine from "react-leader-line";
+import { IGrammarRelationshipData } from '../../interfaces/grammar-relationship-interface'
+
+interface Props {
+    data?: IGrammarRelationshipData;
+    /**
+     * style
+     * arrows
+     * colors
+     * onClick span callback (freeze) - not prop? clicked span
+     * 
+     */
+}
+
+const color_pallete = [
+    "rgba(252, 186, 3, 0)",
+    "rgba(247, 16, 0, 0)",
+    "rgba(0, 247, 86, 0)",
+    "rgba(0, 202, 247, 0)",
+    "rgba(82, 0, 247, 0)",
+    "rgba(247, 0, 235, 0)",
+  ]
+
+const GrammarRelationshipComponent = ({data}: Props) => {
+  const [tags, setTags] = useState<any[]>([])
+
+  useEffect(() => {
+    if (!data) return;
+    var newTags: any[] = []
+    Object.entries(data).forEach(([key, value], index) => {
+      const tag = 
+        <span
+          className='indent'
+          key={2*index}
+          id={`span-tag-${index}`}
+          style={{
+            backgroundColor: color_pallete[index],
+            fontSize: "35px",
+            marginLeft: "25px",
+            marginRight: "25px"
+          }}
+        > 
+          {value['text']}
+        </span>
+      newTags.push(tag)
+    })
+    setTags(newTags);
+  }, [data])
+
+  useEffect(()=>{
+    if (!data) return;
+    for (let i=0; i<tags.length; i++) {
+      const targetNode = document.getElementById(tags[i].props.id)
+      const tokenObj = data[i.toString()];
+      const tokenHead = tokenObj.head
+      if (tokenHead != null) {
+        const sourceNode = document.getElementById('span-tag-' + tokenHead.ind);
+        if (i % 2 === 0) {
+          var position = 'top';
+          var gravity = -100;
+        } else {
+          var position = 'bottom';
+          var gravity = 100;
+        }
+        const lineOptions = {
+          path: "fluid",
+          startSocket: position,
+          endSocket: position,
+          size: 4,
+          dropShadow: true,
+          startSocketGravity: [0, gravity],
+          endSocketGravity: [0, gravity],
+          middleLabel: LeaderLine.captionLabel(tokenHead.relationship, { color: 'black', fontSize: "25px" }),
+        };
+        var line = new LeaderLine(
+          // @ts-ignore
+          LeaderLine.mouseHoverAnchor(
+            sourceNode,
+            'draw',
+            {
+              animOptions: { duration: 800, timing: 'ease' },
+              style: { backgroundColor: 'rgba(0,0,0,0)', backgroundImage: null, color: null },
+              hoverStyle: { backgroundColor: 'rgba(0,0,0,0)', backgroundImage: null, color: null }
+            }
+          ),
+          // targetNode,
+          // @ts-ignore
+          LeaderLine.mouseHoverAnchor(
+            targetNode,
+            'draw',
+            {
+              animOptions: { duration: 800, timing: 'ease' },
+              style: { backgroundColor: 'rgba(0,0,0,0)', backgroundImage: null, color: null },
+              hoverStyle: { backgroundColor: 'rgba(0,0,0,0)', backgroundImage: null, color: null }
+            }
+          ),
+          lineOptions
+        );
+        // @ts-ignore
+        line.id = "arrow-line-" + i.toString() + '-' + tokenHead.ind
+      }
+    }
+  }, [tags, data])
+
+  return (
+    <div>
+      {tags}
+    </div>
+  )
+}
+
+export default GrammarRelationshipComponent;