[js][plotter] added possibility to add libraries

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>
 							{