Enable locally runnable visualiser

zanete commented 3 weeks ago

Why: Sub of #951 What: enable visualising a manifest file locally without needing to upload it anywhere to get a URL

Scope of work:

[ ] Discuss the potential solutions
[ ] TBC

Acceptance Criteria

Scenario 1: Happy path

GIVEN user has IF set up on their localhost AND user has a webserver and runnable if visualiser code AND user has prepared a manifest file stored in path A WHEN user calls if-vis with path A as parameter THEN TBC

Scenario 2: Refresh after changes

GIVEN user has IF set up on their localhost AND user has a webserver and runnable if visualiser code AND user has prepared a manifest file stored in path A AND user has successfully run if-vis for the manifest file stored in path A AND user has made changes to the manifest file stored in path A WHEN user TBC - what is the trigger to get the web to update THEN

Scenario 3: Errors

GIVEN user has IF set up on their localhost WHEN user calls if-vis in conditions described in table below THEN user gets an error message that corresponds to the condition as described in the table below

ID	Condition	Error message
1	Path param not provided	error message 1
2	No file exists	error message 2
3	Empty file	error message 3
4	Manifest not parsable	error message 4

NOTES:

https://visualiser.if.greensoftware.foundation/?manifest=path/to/manifest.yaml

<script type=js “path/to/js”>

https://localhost:8080/?manifest=http://localhost:3000/manifest.yaml

if-vis manifest.yaml  https://localhost:8080/

zanete commented 3 weeks ago

hey @osamajandali I hope you have had a chance to check out the video that @jawache sent on the 9th of August about the IF website.

He mentioned needing to film a quick walk through where he wants to be able to frequently visualise a manifest file that's only available on the local machine without needing to upload it. He envisages running if-vis on the local machine command line which would somehow pull up a browser with the visualiser running on the manifest file that was passed as an argument.

I wanted to hear your thoughts on how this could work. Please give your opinion on how this could be implemented and what development steps would need to be done. 🙏

cc @jawache @jmcook1186

osamajandali commented 2 weeks ago

I agree with the approach of creating a command that takes the manifest file and sends it to the visualizer. The next step is to determine the mechanism for sending the file. Given the file size, it cannot be stringified and sent as a parameter via the URL.

I suggest that when the command is executed, it should upload the file to a CDN (e.g., S3). The visualizer can then fetch the file from the CDN URL and proceed to handle it as it normally would.

cc: @zanete @jawache @jmcook1186

jawache commented 2 weeks ago

Thanks @zanete and @osamajandali generally I'm against uploading it to something like S3 since people might have sensitive data on their manifest files.

For the demo can I just run the visualizer locally and then drag a local filesystem file in there?

I was proposing in the video maybe we can just POST the file over https and never store it?

Best solution is a command that just opens a localhost browser with visualizer running and the file passed via localhost or something?

Basically, best solution is a solution where the manifest file doesn't leave your computer.

zanete commented 2 weeks ago

@narekhovhannisyan FYI

zanete commented 2 weeks ago

fyi @jawache @osamajandali, @narekhovhannisyan will do some investigation on how the manifest could be passed to the visualiser and will let us know

jawache commented 2 weeks ago

@narekhovhannisyan and folk can you describe in detail what is being proposed as a solution?

narekhovhannisyan commented 2 weeks ago

@jawache @zanete @osamajandali if we are going to run if-vis in the command line and pass the file path to it, then the solution can be:

Downloading/reading file.
Passing that file to the server before starting, then it will render the result by injecting it into template (in this case website should be implemented using templating f.ex. pug or ejs). The server will render it using the given yaml.

narekhovhannisyan commented 2 weeks ago

Locally bootstrapped something like that.

jawache commented 2 weeks ago

Gotcha, so just POST the local file to a local (?) web server. On POST web server injects the YAML in the JavaScript as a string and then when the visualizer loads, the YAML is right there for it to load and display?

If so that works for me and the demo onstage, will look good.

if-vis doesn't need to launch a browser, I will just open one up pointed to localhost:8080, make it fit the right size of the screen, and just refresh that. It will be annoying if it keeps on opening up a browser every time I run it, and then I have to make sure that new browser window is in the right place.

If the above is the approach let's just use localhost for now.

In fact, I'd say if-vis IS the local web server, when you run if-vis, it just launches a localhost:8080 server which if you load has the YAML injected into it!

narekhovhannisyan commented 2 weeks ago

@jawache almost yeah, I think for not making things complicated with requests, we can just await for the readFile operation, and then render the website with the YAML injected. WDYT?

zanete commented 2 weeks ago

Final resolution:

for the conference and the video walk through Asim is happy to check out the hosted version locally and serve manifest locally, and run this combo manually without needing a bash script
the visualiser will be a react app which will be reused in the hosted as well as the local version
@osamajandali and @narekhovhannisyan to discuss the implementation closer the time, but roughly the local will be run on command line as if-vis with the manifest path, the bash script will start the server that serves the react frontend.

Green-Software-Foundation / if