Skip to content

Commit

Permalink
show element options from sidebar implemented
Browse files Browse the repository at this point in the history
  • Loading branch information
@rrmerugu
rrmerugu committed Jun 2, 2021
1 parent 7ff5565 commit 87db720
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 22 deletions.
22 changes: 12 additions & 10 deletions src/web/interface/element-options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default class ElementOptions extends DefaultRemoteComponent {
this.state = {
...this.state,
nodeOptions: null,
propertyFieldKeys: ["_id"]
propertyFieldKeys: ["_id", "_label"]
}
}

Expand All @@ -37,11 +37,12 @@ export default class ElementOptions extends DefaultRemoteComponent {
}

getElementLabel() {
return this.props.selectedElementData._label;
return this.props.elementOptionsToShow.label;
}

getElementType() {
return this.props.selectedElementData.type.replace("g:", "").toLowerCase();
console.log("this.props.elementOptionsToShow", this.props.elementOptionsToShow)
return this.props.elementOptionsToShow.elementType.replace("g:", "").toLowerCase();
}

getElementInitialConfig() {
Expand All @@ -57,7 +58,8 @@ export default class ElementOptions extends DefaultRemoteComponent {
STUDIO_SETTINGS.MANAGEMENT_VERTEX_LABEL, {name: this.getElementLabel()}
);
const getLabelSchemaPayload = this.connector.requestBuilder.getLabelSchema(
this.getElementLabel(), this.getElementType()
this.getElementLabel(),
this.getElementType()
);
const queryObject = this.connector.requestBuilder.combineQueries(
getOrCreateElementPayload, getLabelSchemaPayload
Expand All @@ -69,8 +71,8 @@ export default class ElementOptions extends DefaultRemoteComponent {
console.log("VO componentDidUpdate")
// const label = this.getElementLabel();

const prevGroupName = prevProps.selectedElementData ? prevProps.selectedElementData.group : null;
const thisPropGroupName = this.props.selectedElementData ? this.props.selectedElementData.group : null;
const prevGroupName = prevProps.elementOptionsToShow ? prevProps.elementOptionsToShow.label : null;
const thisPropGroupName = this.props.elementOptionsToShow ? this.props.elementOptionsToShow.label : null;
if (prevGroupName !== thisPropGroupName) {
// already data exist
this.setState({nodeOptions: null});
Expand Down Expand Up @@ -185,7 +187,7 @@ export default class ElementOptions extends DefaultRemoteComponent {
const allNodeShapes = getAllNodeShapes();
return (
<div className={"p-2"}>
{this.state.nodeOptions && this.props.selectedElementData
{this.state.nodeOptions && this.props.elementOptionsToShow
?

<Form className={"p-2"} onSubmit={this.onFormSubmit.bind(this)}>
Expand All @@ -200,7 +202,7 @@ export default class ElementOptions extends DefaultRemoteComponent {
<input type="hidden" name={"name"} readOnly={true} spellCheck="false"
defaultValue={this.getElementLabel()}/>
<input type="hidden" name={"label"} defaultValue={this.getElementLabel()}/>
{/*<input type="hidden" name={"uid"} defaultValue={selectedElementData.id}/>*/}
{/*<input type="hidden" name={"uid"} defaultValue={elementOptionsToShow.id}/>*/}


<div className="row">
Expand All @@ -225,7 +227,7 @@ export default class ElementOptions extends DefaultRemoteComponent {

{
this.getElementType() === "vertex" &&
!allNodeShapes['inLabelShapes'].includes(this.state.nodeOptions.properties.elementShape)
!allNodeShapes['inLabelShapes'].includes(this.state.nodeOptions.properties.elementShape)
?
<React.Fragment>
<Form.Group controlId="labelFontSize">
Expand Down Expand Up @@ -352,7 +354,7 @@ export default class ElementOptions extends DefaultRemoteComponent {
type={"submit"}>update</Button>
<Button variant={"outline-secondary"} size={"sm"} className={"mt-3 "}
onClick={() => this.props.onClose()}
type={"type"}>cancel
type={"button"}>cancel
</Button>


Expand Down
25 changes: 19 additions & 6 deletions src/web/interface/label-hover-options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Nav} from "react-bootstrap";
import Button from "react-bootstrap/Button";
// import "./label-hover-options.scss";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faCircle, faEye, faEyeSlash, faPlayCircle, faTerminal} from "@fortawesome/free-solid-svg-icons";
import {faCircle, faCog, faEye, faEyeSlash, faPlayCircle, faTerminal} from "@fortawesome/free-solid-svg-icons";
import PropTypes from "prop-types";

export default class LabelHoverOptions extends React.Component {
Expand All @@ -22,6 +22,9 @@ export default class LabelHoverOptions extends React.Component {
hiddenEdgeLabels: PropTypes.array,
canvasCtrl: PropTypes.object,


showElementSettings: PropTypes.func,

}
child = React.createRef();

Expand Down Expand Up @@ -51,7 +54,8 @@ export default class LabelHoverOptions extends React.Component {
{
this.props.startNewQueryInConsole
? <Nav.Item>
<Button size={"sm"} className={"text-muted"} variant={"link"} title={"start query with this label"}
<Button size={"sm"} className={"text-muted"} variant={"link"}
title={"start query with this label"}
onClick={() => {
if (this.props.hoveredLabelType === "edge") {
this.props.startNewQueryInConsole('g.E().hasLabel("' + this.props.hoveredLabelName + '")')
Expand All @@ -68,7 +72,7 @@ export default class LabelHoverOptions extends React.Component {
}

<Nav.Item>
<Button size={"sm"} variant={"link"} className={"text-muted"}
<Button size={"sm"} variant={"link"} className={"text-muted"}
title={"load vertices data with neighbouring edges and vertices"}
onClick={() => this.props.onItemClick(this.props.hoveredLabelName, this.props.hoveredLabelType)}>
<FontAwesomeIcon icon={faPlayCircle}/>
Expand All @@ -77,27 +81,36 @@ export default class LabelHoverOptions extends React.Component {

<Nav.Item>

<Button size={"sm"} variant={"link"} title={"load vertices data"} className={"text-muted"}
<Button size={"sm"} variant={"link"} title={"load vertices data"} className={"text-muted"}
onClick={() => this.props.loadElementData(this.props.hoveredLabelName, this.props.hoveredLabelType)}>
<FontAwesomeIcon icon={faCircle}/>

</Button>
</Nav.Item>

<Nav.Item>

<Button size={"sm"} variant={"link"} title={"load vertices data"} className={"text-muted"}
onClick={() => this.props.showElementSettings(this.props.hoveredLabelName, this.props.hoveredLabelType)}>
<FontAwesomeIcon icon={faCog}/>

</Button>
</Nav.Item>


<Nav.Item>
{
this.checkIfLabelAlreadyHidden(this.props.hoveredLabelName, this.props.hoveredLabelType)
? <Button size={"sm"} variant={"link"} title={"show this label data"}
className={"text-muted"}
className={"text-muted"}
onClick={() => {

this.props.removeFromHiddenLabels(this.props.hoveredLabelName, this.props.hoveredLabelType)
}}
> <FontAwesomeIcon icon={faEyeSlash}/>
</Button>
: <Button size={"sm"} variant={"link"} title={"hide this label data"}
className={"text-muted"}
className={"text-muted"}
onClick={() => {
this.props.addToHiddenLabels(this.props.hoveredLabelName, this.props.hoveredLabelType);
}}
Expand Down
13 changes: 11 additions & 2 deletions src/web/interface/node-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ export default class NodeMenu extends React.Component {

}
static propTypes = {

// setElementOptionsToShow: PropTypes.func,
showElementSettings: PropTypes.func,

getFocusedNodes: PropTypes.func,
addNodeToFocusedNodes: PropTypes.func,
connector: PropTypes.object,
Expand Down Expand Up @@ -92,11 +96,16 @@ export default class NodeMenu extends React.Component {
}

hideMenu() {
this.props.setSelectedElementData(null);
// this.props.setSelectedElementData(null);
// this.props.setElementOptionsToShow(null);
this.props.showElementSettings(null, null)
}

openElementSettings() {
this.props.setModalContentName("element-options");
this.props.showElementSettings(
this.props.selectedElementData._label,
this.props.selectedElementData.type
)
}

getVerboseIdentifier() {
Expand Down
36 changes: 32 additions & 4 deletions src/web/viewlets/canvas/graph-canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,11 @@ export default class GraphCanvas extends DefaultRemoteComponent {

lastResponse: null,

elementOptionsToShow: {
label: null,
elementType: null
},

leftContentName: false, // query-console, query-history, canvas-display-settings, graph-management
}
this.canvasUtils = new VisJsGraphCanvasUtils();
Expand All @@ -71,6 +76,9 @@ export default class GraphCanvas extends DefaultRemoteComponent {
this.setState({modalContentName: contentName});
}

setElementOptionsToShow(options) {
this.setState({elementOptionsToShow: options});
}

startNewQueryInConsole(queryString) {
this.setState({canvasQueryString: queryString, leftContentName: "query-console"});
Expand Down Expand Up @@ -508,6 +516,21 @@ export default class GraphCanvas extends DefaultRemoteComponent {
this.canvasCtrl.hideData(this.state.hiddenNodeLabels, this.state.hiddenEdgeLabels);
}

getSelectedElementDetails() {
return {
label: this.props.selectedElementData.group,
labelType: this.props.selectedElementData.type
}
}

showElementSettings(label, elementType) {
this.setElementOptionsToShow({
label: label,
elementType: elementType
});
this.setModalContentName("element-options");
}

render() {
const _this = this;
return (
Expand All @@ -528,7 +551,7 @@ export default class GraphCanvas extends DefaultRemoteComponent {
menuPositionX={this.state.menuPositionX}
menuPositionY={this.state.menuPositionY}

setModalContentName={this.setModalContentName.bind(this)}
showElementSettings={this.showElementSettings.bind(this)}
// setNodeMenuPosition={this.setNodeMenuPosition.bind(this)}

selectedElementData={this.state.selectedElementData}
Expand Down Expand Up @@ -681,6 +704,9 @@ export default class GraphCanvas extends DefaultRemoteComponent {
canvasCtrl={this.canvasCtrl}
nodeLabelsInCanvas={this.state.nodeLabelsInCanvas}
edgeLabelsInCanvas={this.state.edgeLabelsInCanvas}
showElementSettings={this.showElementSettings.bind(this)}


/>

: <React.Fragment/>
Expand Down Expand Up @@ -725,7 +751,7 @@ export default class GraphCanvas extends DefaultRemoteComponent {
: <React.Fragment/>
}
{
this.state.modalContentName === "element-options" && this.state.selectedElementData
this.state.modalContentName === "element-options" && this.state.elementOptionsToShow
? <Modal
className={"border-0 "}
size="lg"
Expand All @@ -738,14 +764,16 @@ export default class GraphCanvas extends DefaultRemoteComponent {

<Modal.Body style={{"width": "600px"}}>
<ElementOptions
selectedElementData={this.state.selectedElementData}
// selectedElementData={this.state.selectedElementData}
elementOptionsToShow={this.state.elementOptionsToShow}
setModalContentName={this.setModalContentName.bind(this)}
// selectedLabelType={this.state.selectedLabelType}
setStatusMessage={this.setStatusMessage.bind(this)}
setErrorMessage={this.setErrorMessage.bind(this)}
// setHideVertexOptions={this.setHideVertexOptions.bind(this)}
onClose={() => {
_this.setModalContentName(null)
_this.setElementOptionsToShow(null);
_this.setModalContentName(null);
}}
reRenderVisualizer={this.reRenderVisualizer.bind(this)}
// reRenderCanvas={this.reRenderCanvas.bind(this)}
Expand Down
6 changes: 6 additions & 0 deletions src/web/viewlets/data-management/data-sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,8 @@ export default class DataSidebarViewlet extends DefaultRemoteComponent {
statsData={this.state.filteredNodeStats}
nodeLabelsInCanvas={this.props.nodeLabelsInCanvas}
edgeLabelsInCanvas={this.props.edgeLabelsInCanvas}
showElementSettings={this.props.showElementSettings}


/>
<DataEdgeManagement onItemClick={this.props.onItemClick} {...this.props}
Expand All @@ -241,6 +243,7 @@ export default class DataSidebarViewlet extends DefaultRemoteComponent {
statsData={this.state.filteredEdgeStats}
nodeLabelsInCanvas={this.props.nodeLabelsInCanvas}
edgeLabelsInCanvas={this.props.edgeLabelsInCanvas}
showElementSettings={this.props.showElementSettings}
/>
</div>
: <React.Fragment/>
Expand All @@ -254,6 +257,8 @@ export default class DataSidebarViewlet extends DefaultRemoteComponent {
statsData={this.state.verticesStats}
nodeLabelsInCanvas={this.props.nodeLabelsInCanvas}
edgeLabelsInCanvas={this.props.edgeLabelsInCanvas}
showElementSettings={this.props.showElementSettings}

/>
<DataEdgeManagement onItemClick={this.props.onItemClick} {...this.props}
loadElementData={this.props.loadElementData}
Expand All @@ -262,6 +267,7 @@ export default class DataSidebarViewlet extends DefaultRemoteComponent {
statsData={this.state.edgeStats}
nodeLabelsInCanvas={this.props.nodeLabelsInCanvas}
edgeLabelsInCanvas={this.props.edgeLabelsInCanvas}
showElementSettings={this.props.showElementSettings}
/>
</div>
</React.Fragment>
Expand Down
5 changes: 5 additions & 0 deletions src/web/viewlets/data-management/sidebar-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ export default class SidebarListBase extends React.Component {
canvasCtrl: PropTypes.object,
edgeLabelsInCanvas: PropTypes.array,
nodeLabelsInCanvas: PropTypes.array,


showElementSettings: PropTypes.func,
}

constructor(props) {
Expand Down Expand Up @@ -186,6 +189,8 @@ export default class SidebarListBase extends React.Component {
hoveredLabelType: null
})
}}

showElementSettings={this.props.showElementSettings}
canvasCtrl={this.props.canvasCtrl}
/>
: <React.Fragment/>
Expand Down

0 comments on commit 87db720

Please sign in to comment.