anacostiaAI / anacostia-pipeline

Anacostia is a framework for creating machine learning operations (MLOps) pipelines
Apache License 2.0
2 stars 2 forks source link

enable edges to light up using SSE #11

Closed mdo6180 closed 4 months ago

mdo6180 commented 5 months ago

perhaps use hyperscript's eventsource in dag.js to listen for SSE with color in the data attribute.

mdo6180 commented 4 months ago

in commit f330fd2043e2a0f788160684109d34c6b44127d3, the edges are lighting up improperly. for some reason, the event source connection between the retraining node and the haiku_eval and shakespeare_eval is made only upon exiting the browser, thus, causing the messages to not be sent.

mdo6180 commented 4 months ago

according to mdn web docs

you can open 6 SSE connections across all of the tabs to www.example1.com

thus, since the top 6 edges have already opened its own event source, the top 6 edges are the only ones that light up. the bottom two edges (retraining node -> the haiku_eval and retraining node -> shakespeare_eval) are never made and hence why it doesn't light up.

mdo6180 commented 4 months ago
<div _="eventsource EventStream from /event-source
          on open
            log 'event source connected'
          end
        end">
    <div _="on HelloEvent from EventStream 
              toggle .red on me
              log event.data
            end">event1</div>
    <div _="on GoodbyeEvent from EventStream 
              toggle .green on me
              log event.data
            end">event1</div>
</div>

it turns out you can declare an event source in hyperscript and then refer to the event source somewhere else later on in your code.

so in the future, the plan is to declare one event source for the entire dag page in the #pagecontent div, and then each edge would listen for an event with the name of the form _change_edge_color.

the color of the edge would be sent through an SSE message like so:

event: <source>_<target>_change_edge_color
data: green

and then the data could be accessed by hyperscript via the event.data call and then used to set @stroke and @fill.