Need best practice example of how to highlight from separate component

[ilanl]

First of all, thank you for this amazing library!

In react app: I'd like to know how to call highlight on pc chart from a react-table or similar 'mouseover' row action. App has 2 components:

1. pc chart
2. a table or grid below

How can the chart register to another component mouseover event. what's the best practice here so both component are not tightly coupled? any idea?

[xy2i]

Hi, here's how I approached it. Suppose your structure is like this:

App
├-> Chart
└-> Table

1. In your App component, have your app manage state for a highlight:

   const [highlightedDataIndex, setHighlightedDataIndex] = useState(null) 
   // The highlighted data via the table. Just the index, for performance.

2. In your parcoords chart component, take the getter as a prop:

   const Chart = ({ data, highlightedDataIndex }) => { ... }

3. In your render, highlight as necessary. I'm using something like this:

   // Wait for highlighted data, and then highlight it in the chart.
   if (highlightedDataIndex !== null) {
   parcoords.highlight([data[highlightedDataIndex]])
   } else {
   parcoords.unhighlight()
   }

4. Pass the setter prop to your table, and highlight on hover of a row, for example. If your IDs start from 1, substract to get the correct ID. For example, using react-table:

   <tr
   onMouseEnter={() => {
   // id is the id in the table.
   // We do id-1 to get the real value.
   setHighlightedDataIndex(row.values['id'] - 1)
   }}
   onMouseLeave={() => setHighlightedDataIndex(null)}
   {...row.getRowProps()}
   ></tr>

Note that we pass the ID directly from the data. This ensures that it works even when the rows are filtered.

[ilanl]

Thanks! perfect