From b2504bdc0d7b7c74f1c3ce52cfa75e7d94d18459 Mon Sep 17 00:00:00 2001 From: Jesus Guerrero Date: Wed, 15 Feb 2023 00:06:38 -0800 Subject: [PATCH 01/37] 3 nodes complete --- server.js | 4 +- .../nodes/components/dictionary-panel.jsx | 73 +++++++- .../nodes/components/dictionary-panel.scss | 7 + .../nodes/components/literal-panel.jsx | 78 ++++++++- .../nodes/components/literal-panel.scss | 25 +++ .../nodes/components/sequence-panel.jsx | 158 ++++++++++++------ src/utils/transform/DictionaryNode.js | 4 +- src/utils/transform/LiteralNode.js | 4 +- src/utils/transform/SequenceNode.js | 49 ++++-- 9 files changed, 330 insertions(+), 72 deletions(-) create mode 100644 src/nlp-visual-editor/nodes/components/literal-panel.scss diff --git a/server.js b/server.js index 4ca5738..9b96942 100644 --- a/server.js +++ b/server.js @@ -87,7 +87,7 @@ const createZipArchive = async (tmpFolder, fileName) => { const moveZipFile = (tmpFolder, fileName) => { const currentPath = `${tmpFolder}/${fileName}`; const destinationPath = `${systemTdataFolder}/user-data-in/${fileName}`; - fs.rename(currentPath, destinationPath, function (err) { + fs.copyFile(currentPath, destinationPath, function (err) { if (err) { console.log(`error moving zipfile ${fileName}`); throw err; @@ -201,7 +201,7 @@ app.post( //read document to render in UI const docPath = `${workingFolder}/payload.txt`; const document = fs.readFileSync(docPath, 'utf8'); - fs.rmSync(workingFolder, { recursive: true, force: true }); + //fs.rmSync(workingFolder, { recursive: true, force: true }); res.status(200).send({ message: 'Execution submitted successfully.', diff --git a/src/nlp-visual-editor/nodes/components/dictionary-panel.jsx b/src/nlp-visual-editor/nodes/components/dictionary-panel.jsx index f9bc15b..6f0b455 100644 --- a/src/nlp-visual-editor/nodes/components/dictionary-panel.jsx +++ b/src/nlp-visual-editor/nodes/components/dictionary-panel.jsx @@ -40,7 +40,7 @@ import { DataTable, } from 'carbon-components-react'; import RHSPanelButtons from '../../components/rhs-panel-buttons'; -import { Delete16 } from '@carbon/icons-react'; +import { Delete16, Edit16 } from '@carbon/icons-react'; import classNames from 'classnames'; import { connect } from 'react-redux'; import { parse } from 'csv-parse/browser/esm'; @@ -62,6 +62,7 @@ class DictionaryPanel extends React.Component { ? props.items?.filter(filterItems) ?? [] : Object.keys(props.items).filter(filterItems); this.state = { + label: props.label, inputText: '', items: filteredItems, caseSensitivity: props.caseSensitivity, @@ -73,6 +74,9 @@ class DictionaryPanel extends React.Component { mappedItems: Array.isArray(props.items ?? []) ? {} : props.items, page: 1, pageSize: 10, + attributes: props.attributes || {}, + editId: null, + editLabel: null, }; this.reader.onload = (event) => { const { items, mapTerms, mappedItems } = this.state; @@ -172,6 +176,7 @@ class DictionaryPanel extends React.Component { externalResourceChecked, mapTerms, mappedItems, + attributes, } = this.state; const { nodeId } = this.props; @@ -184,6 +189,7 @@ class DictionaryPanel extends React.Component { externalResourceChecked, isValid: true, mapTerms, + attributes, }; this.props.saveNlpNode({ node }); this.props.setShowRightPanel({ showPanel: false }); @@ -224,7 +230,13 @@ class DictionaryPanel extends React.Component { items, mapTerms, mappedItems, + attributes, + label, + editId, } = this.state; + const { nodeId } = this.props; + console.log(nodeId); + const dicValue = attributes[0] || label; return (
{ this.setState({ mapTerms: !mapTerms }); }} + id={`toggle-${this.props.nodeId}`} labelText="Map Terms" /> + +
+

Attributes

+ + {nodeId === editId ? ( + { + this.setState({ editLabel: e.target.value }); + }} + onKeyDown={(e) => { + const keyPressed = e.key || e.keyCode; + if (keyPressed === 'Enter' || keyPressed === 13) { + if (this.state.editLabel === '') { + return; + } + this.setState({ + editId: null, + attributes: { + 0: this.state.editLabel, + }, + }); + } else if (keyPressed === 'Escape' || keyPressed === 27) { + this.setState({ editId: null }); + } + }} + value={this.state.editLabel} + /> + ) : ( +
+ + {dicValue} +
+ )} { this.props.setShowRightPanel({ showPanel: false }); diff --git a/src/nlp-visual-editor/nodes/components/dictionary-panel.scss b/src/nlp-visual-editor/nodes/components/dictionary-panel.scss index ffaefba..36097f3 100644 --- a/src/nlp-visual-editor/nodes/components/dictionary-panel.scss +++ b/src/nlp-visual-editor/nodes/components/dictionary-panel.scss @@ -18,6 +18,13 @@ limitations under the License. display: flex; flex-direction: column; + .attributes { + line-height: 30px; + .bx--checkbox-wrapper { + float: left; + padding: 0; + } + } .input-controls { display: inline-flex; flex-direction: row; diff --git a/src/nlp-visual-editor/nodes/components/literal-panel.jsx b/src/nlp-visual-editor/nodes/components/literal-panel.jsx index b8ebb40..4654a72 100644 --- a/src/nlp-visual-editor/nodes/components/literal-panel.jsx +++ b/src/nlp-visual-editor/nodes/components/literal-panel.jsx @@ -16,11 +16,12 @@ limitations under the License. */ import React from 'react'; import PropTypes from 'prop-types'; -import { Checkbox, TextInput } from 'carbon-components-react'; +import { Button, TextInput, Checkbox } from 'carbon-components-react'; +import { Edit16 } from '@carbon/icons-react'; import RHSPanelButtons from '../../components/rhs-panel-buttons'; import classNames from 'classnames'; import { connect } from 'react-redux'; - +import './literal-panel.scss'; // import './dictionary-panel.scss'; import { saveNlpNode, setShowRightPanel } from '../../../redux/slice'; @@ -29,9 +30,13 @@ class LiteralPanel extends React.Component { constructor(props) { super(props); this.state = { + label: props.label, inputText: props.inputText, lemmaMatch: props.lemmaMatch, errorMessage: undefined, + attributes: props.attributes || {}, + editId: null, + editLabel: null, }; } @@ -50,7 +55,7 @@ class LiteralPanel extends React.Component { onSavePane = () => { const errorMessage = this.validateParameters(); - const { lemmaMatch, inputText } = this.state; + const { lemmaMatch, inputText, attributes } = this.state; const { nodeId } = this.props; if (!errorMessage) { @@ -58,6 +63,7 @@ class LiteralPanel extends React.Component { nodeId, inputText, lemmaMatch, + attributes, isValid: true, }; this.props.saveNlpNode({ node }); @@ -76,7 +82,16 @@ class LiteralPanel extends React.Component { }; render() { - const { inputText, lemmaMatch, errorMessage } = this.state; + const { + editId, + inputText, + lemmaMatch, + errorMessage, + attributes, + label, + nodeId, + } = this.state; + const literalValue = attributes[0] || label; return (
+ +
+

Attributes

+ + {nodeId === editId ? ( + { + this.setState({ editLabel: e.target.value }); + }} + onKeyDown={(e) => { + const keyPressed = e.key || e.keyCode; + if (keyPressed === 'Enter' || keyPressed === 13) { + if (this.state.editLabel === '') { + return; + } + this.setState({ + editId: null, + attributes: { + 0: this.state.editLabel, + }, + }); + } else if (keyPressed === 'Escape' || keyPressed === 27) { + this.setState({ editId: null }); + } + }} + value={this.state.editLabel} + /> + ) : ( +
+ + {literalValue} +
+ )}
); } diff --git a/src/nlp-visual-editor/nodes/components/literal-panel.scss b/src/nlp-visual-editor/nodes/components/literal-panel.scss new file mode 100644 index 0000000..7484530 --- /dev/null +++ b/src/nlp-visual-editor/nodes/components/literal-panel.scss @@ -0,0 +1,25 @@ +/* + +Copyright 2022 Elyra Authors + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ +.literal-panel { + .attributes { + line-height: 30px; + .bx--checkbox-wrapper { + float: left; + padding: 0; + } + } +} diff --git a/src/nlp-visual-editor/nodes/components/sequence-panel.jsx b/src/nlp-visual-editor/nodes/components/sequence-panel.jsx index 31449a4..dcead80 100644 --- a/src/nlp-visual-editor/nodes/components/sequence-panel.jsx +++ b/src/nlp-visual-editor/nodes/components/sequence-panel.jsx @@ -33,14 +33,20 @@ import { saveNlpNode, setShowRightPanel } from '../../../redux/slice'; class SequencePanel extends React.Component { constructor(props) { super(props); + const upstreamNodes = JSON.parse(JSON.stringify(this.props.upstreamNodes)); this.state = { nodeId: this.props.nodeId, label: this.props.label, renamed: this.props.renamed, pattern: this.props.pattern, - upstreamNodes: JSON.parse(JSON.stringify(this.props.upstreamNodes)), + upstreamNodes: upstreamNodes, + upstreamNodesHash: upstreamNodes.reduce((sum, curr) => { + sum[curr.nodeId] = curr; + return sum; + }, {}), editId: null, editLabel: '', + attributes: props.attributes || {}, }; } @@ -48,31 +54,50 @@ class SequencePanel extends React.Component { let { pattern, upstreamNodes } = this.props; if (pattern === '') { ({ pattern, upstreamNodes } = this.constructPattern()); - this.setState({ pattern, upstreamNodes }); - } - if (!this.props.renamed) { - this.setState({ renamed: this.state.label }); + this.setState({ + pattern, + upstreamNodes, + upstreamNodesHash: upstreamNodes.reduce((sum, curr) => { + sum[curr.nodeId] = curr; + return sum; + }, {}), + attributes: { + 0: this.props.renamed || this.state.label, + ...upstreamNodes.reduce((sum, curr) => { + sum[curr.nodeId] = curr.label; + return sum; + }, {}), + }, + }); } + // if( /* attributes keys not equal upstream keys*/) + // this.setState({ + // attributes: { + // 0: this.props.renamed || this.state.label, + // ...upstreamNodes.reduce((sum, curr) => { + // sum[curr.nodeId] = null; + // return sum; + // }, {}), + // }, + // }); } componentDidUpdate(prevProps) { if (this.props.nodeId !== prevProps.nodeId) { - let renamed = this.props.renamed; - if (!this.props.renamed || this.props.renamed === '') { - renamed = this.props.label; - } - const { label } = this.props; - if (this.props.pattern === '') { - const { pattern, upstreamNodes } = this.constructPattern(); - this.setState({ label, renamed, pattern, upstreamNodes }); - } else { - this.setState({ - label, - renamed, - pattern: this.props.pattern, - upstreamNodes: this.props.upstreamNodes, - }); - } + const { label, attributes } = this.props; + const { pattern, upstreamNodes } = this.constructPattern(); + this.setState({ + label, + upstreamNodes, + pattern: this.props.pattern || pattern, + attributes: { + 0: this.props.renamed || this.props.label, + ...upstreamNodes.reduce((sum, curr) => { + sum[curr.nodeId] = curr.label; + return sum; + }, {}), + }, + }); } } @@ -94,7 +119,6 @@ class SequencePanel extends React.Component { nodeId, type, visible: visible || false, - renamed: label, }); }); return { pattern, upstreamNodes }; @@ -133,7 +157,7 @@ class SequencePanel extends React.Component { }; validateParameters = () => { - const { pattern, renamed } = this.state; + const { pattern, attributes } = this.state; const { nodeId } = this.props; let errorMessage = @@ -146,7 +170,7 @@ class SequencePanel extends React.Component { const upstreamNodes = this.parsePattern(); const node = { nodeId, - renamed, + attributes, pattern, upstreamNodes, tokens, @@ -158,20 +182,30 @@ class SequencePanel extends React.Component { }; onSaveAttributeLabel(node) { - const localNodes = JSON.parse(JSON.stringify(this.state.upstreamNodes)); - const targetNode = localNodes.find((n) => n.nodeId === node.nodeId); - targetNode.renamed = this.state.editLabel; - this.setState({ upstreamNodes: localNodes, editId: false }); + const attributeUpdate = {}; + attributeUpdate[node.nodeId] = this.state.editLabel; + this.setState({ + editId: false, + attributes: { + ...this.state.attributes, + ...attributeUpdate, + }, + }); } onSaveAttributeVisible(node, value) { - const localNodes = JSON.parse(JSON.stringify(this.state.upstreamNodes)); - const targetNode = localNodes.find((n) => n.nodeId === node.nodeId); - targetNode.visible = value; - this.setState({ upstreamNodes: localNodes }); + const attributeUpdate = {}; + attributeUpdate[node.nodeId] = value ? node.label : null; + this.setState({ + attributes: { + ...this.state.attributes, + ...attributeUpdate, + }, + }); } render() { const { pattern } = this.state; + const sequenceAttributeLabel = this.state.attributes[0]; return (