diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js index 4d02be5..5927681 100644 --- a/frontend/src/js/component/wb-name-and-uuid.js +++ b/frontend/src/js/component/wb-name-and-uuid.js @@ -75,7 +75,7 @@ class WBNameAndUuid extends Component { } } - render({ uuid }, { error, item }) { + render({ uuid, onLinkClicked }, { error, item }) { if (!uuid) return (
{ String(uuid) }
@@ -85,7 +85,7 @@ class WBNameAndUuid extends Component {
{ error ? error : (item ? ( - { arvadosObjectName(item) } + { arvadosObjectName(item) } ) : 'Loading...') }
diff --git a/frontend/src/js/dialog/wb-toolbox-dialog.js b/frontend/src/js/dialog/wb-toolbox-dialog.js index 4db2a06..d5f4527 100644 --- a/frontend/src/js/dialog/wb-toolbox-dialog.js +++ b/frontend/src/js/dialog/wb-toolbox-dialog.js @@ -8,6 +8,7 @@ class WBToolboxDialog extends Component { constructor(...args) { super(...args); this.state.rows = []; + this.state.selectedValues = {}; } componentDidMount() { @@ -20,8 +21,9 @@ class WBToolboxDialog extends Component { } fetchRows() { - const { items } = this.props; + const { items, id, selectMany, onAccepted } = this.props; const { arvHost, arvToken } = this.props.app.state; + const { selectedValues } = this.state; let prom = wbFetchObjects(arvHost, arvToken, items); let lookup; @@ -31,22 +33,46 @@ class WBToolboxDialog extends Component { let ownerLookup; prom = prom.then(lkup => (ownerLookup = lkup)); prom = prom.then(() => { - const rows = items.map(uuid => { + const rows = items.map((uuid, idx) => { const it = lookup[uuid]; const ow = ownerLookup[it.owner_uuid]; - return [ - (
), - ( ), + let r = []; + if (selectMany) + r.push(); + r = r.concat([ + selectMany ? ( +
+ { + if (e.target.value === 'on') + selectedValues[uuid] = true; + else + delete selectedValues[uuid]; + } } /> { '\u00A0' } +
+ ) : ( + + ), + ( $('#' + id).modal('hide') } /> ), it.kind, wbFormatDate(it.created_at), - ( ) - ]; + ( $('#' + id).modal('hide') } /> ) + ]); + return r; }); this.setState({ rows }); }); } - render({ id }, { rows }) { + render({ id, selectMany, onAccepted, items, app }, { rows, selectedValues }) { return ( @@ -74,4 +140,8 @@ class WBToolboxDialog extends Component { } } +WBToolboxDialog.defaultProps = { + 'onAccepted': () => {} +}; + export default WBToolboxDialog; diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js index d3c842c..eccf52b 100644 --- a/frontend/src/js/page/wb-app.js +++ b/frontend/src/js/page/wb-app.js @@ -19,8 +19,7 @@ class WBApp extends Component { this.state.arvToken = window.localStorage['arvToken']; if ('currentUser' in window.localStorage) this.state.currentUser = JSON.parse(window.localStorage['currentUser']); - this.state.toolboxItems = ('toolboxItems' in window.localStorage) ? - JSON.parse(window.localStorage['toolboxItems']) : []; + this.loadToolbox(); } navbarItemUrl(item) { @@ -51,6 +50,16 @@ class WBApp extends Component { JSON.stringify(this.state.toolboxItems); } + clearToolbox() { + this.state.toolboxItems = []; + delete window.localStorage['toolboxItems']; + } + + loadToolbox() { + this.state.toolboxItems = ('toolboxItems' in window.localStorage) ? + JSON.parse(window.localStorage['toolboxItems']) : []; + } + render() { return ( @@ -74,7 +83,7 @@ class WBApp extends Component { - + ); } diff --git a/frontend/src/js/page/wb-launch-workflow-page.js b/frontend/src/js/page/wb-launch-workflow-page.js index 7c64e86..fdc9713 100644 --- a/frontend/src/js/page/wb-launch-workflow-page.js +++ b/frontend/src/js/page/wb-launch-workflow-page.js @@ -1,4 +1,4 @@ -import { h, Component } from 'preact'; +import { h, Component, createRef } from 'preact'; import WBNavbarCommon from 'wb-navbar-common'; import WBArvadosCrumbs from 'wb-arvados-crumbs'; import WBToolboxDialog from 'wb-toolbox-dialog'; @@ -8,27 +8,57 @@ import linkState from 'linkstate'; function createInputsTemplate(workflow) { const g = JSON.parse(workflow.definition)['$graph']; const main = g.find(it => (it.id === '#main')); - /* let res = ''; + let res = ''; main.inputs.map(it => { let id = it.id.split('/'); id = id[id.length - 1]; - if (it.label) res += ' // ' + it.label + '\n'; - if (it.doc) res += ' //' + it.doc + '\n'; - res += ' ' + it.type - res += '\'' + it.id + '\': null' - }); */ - let res = main.inputs.map(it => { it.value = null; return it; }); + if (it.label) res += ' // ' + it.label + '\n'; + if (it.doc) res += ' // ' + it.doc + '\n'; + res += ' // Type: ' + ((typeof(it.type) === 'string') ? + it.type : JSON.stringify(it.type)) + '\n\n'; + res += ' \'' + id + '\': \'\',\n\n'; + //res += ' // ' + ' '.repeat(id.length) + '^^^^\n\n'; + }); + /* let res = main.inputs.map(it => { it.value = null; return it; }); res = JSON.stringify(res, null, 2); res = res.split('\n'); res = res.map((ln, i) => (i == 0 ? ln : ' ' + ln)); - res = res.join('\n'); + res = res.join('\n'); */ return res; } +function uuidsToCwlObjects(spec) { + if (typeof(spec) === 'string') { + if (/^[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(spec)) { + return { + 'class': 'Directory', + 'location': 'keep:' + spec + }; + } else if (/^[a-f0-9]{32}\+[0-9]+/.exec(spec)) { + return { + 'class': 'Directory', + 'location': 'keep:' + spec + }; + } else { + return spec; + } + } else if (typeof(spec) === 'object') { + const res = (spec instanceof Array) ? [] : {}; + Object.keys(spec).map(k => (res[k] = uuidsToCwlObjects(spec[k]))); + return res; + + } else { + return spec; + } +} + class WBLaunchWorkflowPage extends Component { constructor(...args) { super(...args); - this.state.toolboxDialogId = uuid.v4(); + this.state.browseDialogId = uuid.v4(); + this.state.insertDialogId = uuid.v4(); + this.state.insertManyDialogId = uuid.v4(); + this.inputsTextArea = createRef(); } componentDidMount() { @@ -39,24 +69,44 @@ class WBLaunchWorkflowPage extends Component { '/arvados/v1/workflows/' + workflowUuid); prom = prom.then(xhr => this.setState({ 'workflow': xhr.response, - 'processName': xhr.response.name, - 'processDescription': xhr.response.description, - 'inputsFunctionText': '(() => {\n return ' + + 'defaultProcessName': xhr.response.name + ' ' + (new Date().toISOString()), + 'defaultProcessDescription': xhr.response.description, + 'inputsFunctionText': '(() => {\n return {\n' + createInputsTemplate(xhr.response) + - ';\n})()' + ' };\n})()' })); } - render({ app, projectUuid, workflowUuid }, - { workflow, processName, processDescription, - inputsFunctionText, toolboxDialogId }) { + render({ app, workflowUuid }, + { workflow, projectUuid, processName, processDescription, + defaultProcessName, defaultProcessDescription, + inputsFunctionText, browseDialogId, + insertDialogId, insertManyDialogId, + inputsPreview }) { return (
- + + this.setState({ 'projectUuid': value }) } /> + + { + const t = this.inputsTextArea.current; + const start = t.selectionStart; + const end = t.selectionEnd; + this.setState({ + 'inputsFunctionText': t.value.substr(0, start) + value + + t.value.substr(end) + }); + } } /> + + alert(values) } /> { workflow ? (
@@ -69,8 +119,24 @@ class WBLaunchWorkflowPage extends Component {
- - + +
+ { projectUuid ? ( + + ) : null } + +
+ +
+ +
+
+
@@ -81,22 +147,55 @@ class WBLaunchWorkflowPage extends Component {
- +
+
+ + + +
+ + + +
+ +
+ + +
+
) :
Loading...
}