Job output page

[masonlr]

• [x] Mock visualisation of 2D data (charts.js via ng2 wrapper - now using ngx-charts)
• [x] Decide on whether log files are to be streamed to output page

  No

• [x] Mechanism for supplying download links (to csv files, to raw data files)
• [x] Create configuration card from same component used when creating new job (rather than duplicating code), disable all elements

  Elements should be made transparent so that it is obvious that they are disabled. This should be supported by ng2-ion-range-slider

• [x] remove job id from url; use different method to retrieve (e.g. local storage)

[radka-j]

Current requirements for interactive mock 2D graph:

• [ ] decide whether start with blank component or some default graph
• [X] axes that can change range and labels with each update (dynamic)
• [x] x-axis that can be categorical OR numeric based on plotted variable
• [x] dropdown menu from which to select which variables want to plot (one for each axis)
• [x] link choices from menu to graph

[masonlr]

Something that would be effective for the demo is to populate the dashboard with several existing/mock jobs so we can go "here's one I prepared earlier" to demonstrate the capabilities of Blue. The results pages for these mock jobs will have rich two-dimensional data and we could render a single three-dimensional scene using a manual vtk-js conversion (which @dpshelio and I checked yesterday is feasible). This also lines up with what @klapaukh mentioned regarding mocking relay of results from the middleware to the front-end, so that UI tweaks and feedback can be addressed in some isolation from middleware development.

[masonlr]

These are some more design tweaks that need implementing:

• [ ] Embed everything in a card so that submit button stays in the same place on scrolling
• [x] /#/output/output;id=47684a76-2841-4626-a3de-dfa532c1d012 is a weird link structure. Is it common to use ; for this role within a link?
• [x] "Configuration" tab needs padding prior to first input component
• [x] Rename graph in code variable names to chart to be consistent with ngx-charts
• [ ] For certain widths the hamburger menu icon (three lines icon) is missing (no obvious way to open the side menu, clicking on the logo does work but this is not intuitive)

[radka-j]

We have now changed the code so that job id is retrieved from local storage rather than the url

[radka-j]

@masonlr we want the users to be able to download data files - is there anything else they should be able to download (e.g. logs)? I am assuming this means at the front end I should implement something that will convert the provided json data into csv? what format would raw files have?

[masonlr]

Long term we're thinking of moving the data files into third-party storage (eg, azure) and providing links to the file locations. For the prototype though, a direct download of the csv file and log would be good. There is no need to convert to csv -- we can send the raw csv file directly. The log files will just be ascii text as well.

[masonlr]

I'm starting on this mock blue version now on Azure, so we can use that for any testing that's needed (MIME types, etc.)

[radka-j]

@masonlr I am still a bit unclear with the prototype where the csv file is going to come from? Will you give us a link to where it's stored or will it be part of the job json object? Or is there another way for us to access it?

[masonlr]

There may need to be an outputs structure in the job json (just as there is an inputs structure).

"outputs": [
     {"source_uri": "./output.csv"}
]

We can add a middleware endpoint, such as GET api/outputs/<job-id> that will zip and provide the output data files that are listed in the job structure. We could also support wildcards such as

"outputs": [
     {"source_uri": "./*.vtr"}
]

to download all .vtr files when we don't know from the outset how many there will be.

Down the track, we could refactor outputs to contain the links to the third-party file storage.