From fd1f107883a1ffeac9628ac122902e145d246b2c Mon Sep 17 00:00:00 2001
From: Flavio Tarsetti <Flavio.Tarsetti@idiap.ch>
Date: Mon, 24 Sep 2018 15:31:48 +0200
Subject: [PATCH] [js][plotter] added possibility to add libraries
---
.../src/components/plotter/PlotterEditor.jsx | 79 +++++++++++++++++++
1 file changed, 79 insertions(+)
diff --git a/conda/js/src/components/plotter/PlotterEditor.jsx b/conda/js/src/components/plotter/PlotterEditor.jsx
index 910b3586..b5ba23f7 100644
--- a/conda/js/src/components/plotter/PlotterEditor.jsx
+++ b/conda/js/src/components/plotter/PlotterEditor.jsx
@@ -86,6 +86,81 @@ export class PlotterEditor extends React.Component<Props, State> {
this.setContents({ parameters: params });
}
+ // helper to change a value in the "contents" subobject of a plotter
+ // (this is where the vast majority of change happens)
+ changeContentsVal = (field: string, val: any) => {
+ const newCache = {
+ ...this.props.data,
+ contents: {
+ ...this.props.data.contents,
+ [field]: val
+ }
+ };
+
+ this.props.updateFunc(newCache);
+ }
+
+
+ renderLibraries = () => (
+ <TabPane tabId='2'>
+ <Row>
+ <Col sm='12'>
+ {
+ // loop through all the used libs
+ (Object.entries(this.props.data.contents.uses): [string, any][])
+ .map(([name, lib], i, lEntries) => (
+ <TypedField
+ key={i}
+ name={name}
+ type={lib}
+ types={this.props.libraries.map(l => l.name)}
+ existingFields={lEntries.map(([n, v]) => n)}
+ nameUpdateFunc={str => {
+ // update the alias
+ this.changeContentsVal('uses',
+ changeObjFieldName(
+ this.props.data.contents.uses,
+ name,
+ str
+ )
+ );
+ }}
+ typeUpdateFunc={str => {
+ // update the chosen library for the alias
+ const libs = {
+ ...this.props.data.contents.uses,
+ [name]: str
+ };
+ this.changeContentsVal('uses', libs);
+ }}
+ deleteFunc={() => {
+ const libs = { ...this.props.data.contents.uses };
+ delete libs[name];
+ this.changeContentsVal('uses', libs);
+ }}
+ />
+ ))
+ }
+ </Col>
+ </Row>
+ <Button outline block
+ id='newLibraryBtn'
+ onClick={() => {
+ const newKey = generateNewKey('library', Object.keys(this.props.data.contents.uses));
+ this.changeContentsVal('uses',
+ {
+ ...this.props.data.contents.uses,
+ [newKey]: ''
+ }
+ );
+ }}
+ >
+ New Library
+ </Button>
+ </TabPane>
+ );
+
+
render = () => {
return (
<div>
@@ -131,6 +206,10 @@ export class PlotterEditor extends React.Component<Props, State> {
}
</Input>
</FormGroup>
+ <FormGroup>
+ <h5>Libraries</h5>
+ { this.renderLibraries() }
+ </FormGroup>
<FormGroup>
<h5>Parameters</h5>
{
--
GitLab