burr icon indicating copy to clipboard operation
burr copied to clipboard
verified publisher icon apache

Add highlight on graph view

Open elijahbenizzy opened this issue 1 year ago • 5 comments

Is your feature request related to a problem? Please describe. We can mouse-over the action line in the telemetry interface and it'll highlight in the graph. I want the reverse as well! Mouse overf graph and highligth in the telemetry.

Describe the solution you'd like Same thing that happens when youmouse over in the telemetry

Describe alternatives you've considered N/A

Additional context

image

Should highlight when mouse-over on he graph below, as displayed in this image

elijahbenizzy avatar Jul 19 '24 15:07 elijahbenizzy

Hello @elijahbenizzy and @skrawcz, I'd like to attempt this one. I'm not very familiar with the code base. Taking the time to go through it. I could of course use some pointers too. Thanks.

AgnesNM avatar Oct 07 '24 13:10 AgnesNM

Hello @elijahbenizzy and @skrawcz, I'd like to attempt this one. I'm not very familiar with the code base. Taking the time to go through it. I could of course use some pointers too. Thanks.

sure. we'll have office hours Wednesday 9:30am PT -- please join our discord for the link.

Otherwise @elijahbenizzy can try to point you to the likely files that you would need to touch.

skrawcz avatar Oct 08 '24 06:10 skrawcz

Hello @elijahbenizzy and @skrawcz, I'd like to attempt this one. I'm not very familiar with the code base. Taking the time to go through it. I could of course use some pointers too. Thanks.

sure. we'll have office hours Wednesday 9:30am PT -- please join our discord for the link.

Otherwise @elijahbenizzy can try to point you to the likely files that you would need to touch.

Awesome, I'll join the office hours.

AgnesNM avatar Oct 08 '24 08:10 AgnesNM

Hello @elijahbenizzy and @skrawcz, I'd like to attempt this one. I'm not very familiar with the code base. Taking the time to go through it. I could of course use some pointers too. Thanks.

sure. we'll have office hours Wednesday 9:30am PT -- please join our discord for the link. Otherwise @elijahbenizzy can try to point you to the likely files that you would need to touch.

Awesome, I'll join the office hours.

Hey @AgnesNM, just to get you started if you want to take a look. On writing this, I'm realizing it's a little complex -- might be completely in your wheelhouse, but if you feel like getting started with something simpler, take a look at the other good first issues! https://github.com/DAGWorks-Inc/burr/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22

That said, I'm releasing something soon that's modifying these files, so might want to start in a day or two! The only tricky thing is that we currently highlight a sequence ID, but that's not expressed on the graph. Instead, the graph consists of actions (which can be run multiple times, thus there is a 1:n action:sequence_id mapping)

The high-level:

  1. We currently highlight on a "hover index" (E.G. the action's sequence ID here
  2. We'd want to add the ability to highlight a "action" (I think that's another field in the context)
  3. Then wherever we use that, we'd want to highlight it if it's either matching the sequence ID or the action name matches

Places we'd want to highlight:

  • https://github.com/DAGWorks-Inc/burr/blob/main/telemetry/ui/src/components/routes/app/StepList.tsx#L155
  • https://github.com/DAGWorks-Inc/burr/blob/bf00101d8440e79d0de0c726d4580d58e232f6b3/telemetry/ui/src/components/routes/app/InsightsView.tsx#L390

So, the steps would be:

  1. Add a hover listener to the node
  2. Modify the app state's to take in multiple hover actions (https://github.com/DAGWorks-Inc/burr/blob/main/telemetry/ui/src/components/routes/app/StateMachine.tsx#L25)
  3. Make this a list of hover actions: https://github.com/DAGWorks-Inc/burr/blob/main/telemetry/ui/src/components/routes/app/AppView.tsx#L258
  4. Change the context above to match -- using the action name to set the list of sequence IDs

elijahbenizzy avatar Oct 08 '24 16:10 elijahbenizzy

Hello @elijahbenizzy and @skrawcz, I'd like to attempt this one. I'm not very familiar with the code base. Taking the time to go through it. I could of course use some pointers too. Thanks.

sure. we'll have office hours Wednesday 9:30am PT -- please join our discord for the link. Otherwise @elijahbenizzy can try to point you to the likely files that you would need to touch.

Awesome, I'll join the office hours.

Hey @AgnesNM, just to get you started if you want to take a look. On writing this, I'm realizing it's a little complex -- might be completely in your wheelhouse, but if you feel like getting started with something simpler, take a look at the other good first issues! https://github.com/DAGWorks-Inc/burr/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22

That said, I'm releasing something soon that's modifying these files, so might want to start in a day or two! The only tricky thing is that we currently highlight a sequence ID, but that's not expressed on the graph. Instead, the graph consists of actions (which can be run multiple times, thus there is a 1:n action:sequence_id mapping)

The high-level:

1. We currently highlight on a "hover index" (E.G. the action's sequence ID [here](https://github.com/DAGWorks-Inc/burr/blob/main/telemetry/ui/src/components/routes/app/AppView.tsx#L97)

2. We'd want to add the ability to highlight a "action" (I think that's another field in the context)

3. Then wherever we use that, we'd want to highlight it if it's either matching the sequence ID _or_ the action name matches

Places we'd want to highlight:

* https://github.com/DAGWorks-Inc/burr/blob/main/telemetry/ui/src/components/routes/app/StepList.tsx#L155

* https://github.com/DAGWorks-Inc/burr/blob/bf00101d8440e79d0de0c726d4580d58e232f6b3/telemetry/ui/src/components/routes/app/InsightsView.tsx#L390

So, the steps would be:

1. Add a hover listener to the [node](https://github.com/DAGWorks-Inc/burr/blob/bf00101d8440e79d0de0c726d4580d58e232f6b3/telemetry/ui/src/components/routes/app/GraphView.tsx#L74)

2. Modify the app state's to take in multiple hover actions (https://github.com/DAGWorks-Inc/burr/blob/main/telemetry/ui/src/components/routes/app/StateMachine.tsx#L25)

3. Make this a list of hover actions: https://github.com/DAGWorks-Inc/burr/blob/main/telemetry/ui/src/components/routes/app/AppView.tsx#L258

4. Change the context above to match -- using the action name to set the list of sequence IDs

Hey @elijahbenizzy let me start with more simpler first issues. I see the code you're referring to has a lot of React which I'm not familiar with, unfortunately. Plus you are working on something so it's all good for now?

AgnesNM avatar Oct 13 '24 08:10 AgnesNM