website

Author: Haider Ali

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

@@ -21,15 +21,19 @@ import ToolTipDataDisplay from './ToolTipDataDisplay';
 import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
 import { useDispatch } from 'react-redux';
 import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../FrontendTypes';
+import { store } from '../../../store';
 
 const linkStroke = '#F00008'; //#F00008 original
 const rootStroke = '#F00008'; //#F00008 original
 const nodeParentFill = '#161521'; //#161521 original
 const nodeChildFill = '#62d6fb'; //#62d6fb original
 const nodeParentStroke = '#F00008'; //#F00008 original
 const nodeChildStroke = '#4D4D4D'; //#4D4D4D original
+const hoverClass = '#ab269b'; //pinkish
+
 let stroke = ''; 
 
+
 /* Heat Map Colors (for links) */
 const lightOrange = '#F1B476';
 const darkOrange = '#E4765B';
@@ -235,9 +239,11 @@ export default function ComponentMap({
             {(tree) => (
               <Group top={origin.y + 35} left={origin.x + 50 / aspect}>
                 {tree.links().map((link, i) => {
+
                   const linkName = link.source.data.name; 
                   const propsObj = link.source.data.componentData.props;
                   const childPropsObj = link.target.data.componentData.props;
+                  //consolelog const above
                   let propsLength;
                   let childPropsLength;
 
@@ -250,7 +256,7 @@ export default function ComponentMap({
                   }
                   // go to https://en.wikipedia.org/wiki/Logistic_function 
                   // for an explanation of Logistic functions and parameters used
-                  const yshift = -3;
+                  const y0 = -3;
                   const x0 = 5;
                   const L = 25;
                   const k = .4;
@@ -268,19 +274,46 @@ export default function ComponentMap({
                     } else {
                       stroke = plum;
                     }
-                    // stroke = '#df6f37'
                   }
+                  
+                 
+                  const [isHovered, setIsHovered] = useState(false);
+                  const handleMouseEnter = () => {
+                    setIsHovered(true);
+                  };
+                  const handleMouseLeave = () => {
+                    setIsHovered(false)
+                  }
+                  
+                  let strokeColor; //isHovered ? hoverClass : stroke;
+                  let chooseCursor; 
+
+                  if (isHovered){
+                    strokeColor = hoverClass;
+                  }
+                  else { 
+                    strokeColor = stroke
+                  }
+                   
 
                   return (
-                  <LinkComponent
-                    className='compMapLink'
-                    key={i}
-                    data={link}
-                    percent={stepPercent}
-                    stroke={stroke} // color of the link --not used--
-                    strokeWidth= {strokeWidthIndex} /* strokeWidth */ // width of the link
-                    fill='none'
-                  />
+                  <>
+                    <LinkComponent
+                      className='compMapLink'
+                      key={i}
+                      data={link}
+                      percent={stepPercent}
+                      stroke={strokeColor} // changing this color on hover
+                      strokeWidth= {strokeWidthIndex} /* strokeWidth */ // width of the link
+                      fill='none'
+                      //testing hover functionality
+                      onMouseEnter={handleMouseEnter}
+                      onMouseLeave={handleMouseLeave}
+                    />
+                    <div className="linkHoverInfo">
+                      <h1>Props</h1>
+                    </div>
+                  </>
                   )
                 })
                 }
@@ -494,7 +527,7 @@ export default function ComponentMap({
           </Tree>
         </Group>
       </svg>
-      {tooltipOpen && tooltipData && (
+      {tooltipOpen && tooltipData && (  // if the tooltip is open and there is data to display...
         <TooltipInPortal
           // set this to random so it correctly updates with parent bounds
           key={Math.random()}
@@ -537,6 +570,11 @@ export default function ComponentMap({
           </div>
         </TooltipInPortal>
       )}
+      <div className="linkHover-Info">
+        <p><strong>Props </strong>():</p>
+        <div></div>
+      </div>
+
     </div>
   );
 }

src/app/styles/components/_componentMap.scss

@@ -1,10 +1,5 @@
-// .compMapLink {
-//   // stroke: $map-link;
-//   stroke: $secondary-color;
-// }
-.compMapLink:hover {
-  box-shadow: 10px 10px rgb(163, 205, 24);
-};
+
+
 
 .comp-map-options {
   color: $map-options-label;
@@ -22,6 +17,8 @@
 //   //stroke: $map-parent-stroke;
 // }
 
+
+
 .compMapParentText {
   fill: $map-parent-text
 }
@@ -44,3 +41,19 @@
   fill: $map-root-text;
 }
 
+<<<<<<< HEAD
+
+.linkHover-Info {
+  height: 100px;
+  width: 100px;
+  // border: 1px solid red;
+  z-index: 100;
+  overflow: visible;
+  // position: absolute;
+  offset-position: 100px;
+  border-radius: 5px;
+  background-color: rgba(255, 0, 0, 0.067);
+  // margin-bottom: 10px;
+}
+=======
+>>>>>>> dev

src/app/styles/layout/_stateContainer.scss

@@ -242,10 +242,6 @@
   z-index: 2;
 }
 
-// .state-container .router-link {
-//   border: 0.5px solid rgba(0, 0, 0, 0.5);
-//   border-bottom: none;
-// }
 
 .tooltipData {
   background-color: #373737;