blob: fe095e7456aa416b4faf6b7f34dfc3a8796a25ca [file] [log] [blame]
/*
* Copyright 2020 Bitnine Co., Ltd.
*
* 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.
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Badge } from 'react-bootstrap';
import uuid from 'react-uuid';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
class CypherResultCytoscapeLegend extends Component {
constructor(props) {
super(props);
this.state = {
nodeBadges: new Map(),
edgeBadges: new Map(),
nodeLegendExpanded: false,
edgeLegendExpanded: false,
legendData: props.legendData,
};
}
componentDidMount() {
}
static getDerivedStateFromProps(nextProps, prevState) {
let newNodeBadges = prevState.nodeBadges;
let newEdgeBadges = prevState.edgeBadges;
if (nextProps.isReloading) {
newNodeBadges = new Map();
newEdgeBadges = new Map();
}
for (let i1 = 0; i1 < Object.entries(nextProps.legendData.nodeLegend).length; i1 += 1) {
const [label, legend] = Object.entries(nextProps.legendData.nodeLegend)[i1];
if (prevState.legendData !== undefined && prevState.legendData.nodeLegend !== undefined) {
let isChanged = false;
for (let i = 0; i < Object.entries(prevState.legendData.nodeLegend).length; i += 1) {
const [prevLabel, prevLegend] = Object.entries(prevState.legendData.nodeLegend)[i];
if (label === prevLabel && legend.color !== prevLegend.color) {
isChanged = true;
} else if (label === prevLabel && legend.size !== prevLegend.size) {
isChanged = true;
} else if (label === prevLabel && legend.caption !== prevLegend.caption) {
isChanged = true;
}
}
if (isChanged) {
nextProps.onLabelClick({
type: 'labels',
data: {
type: 'node',
backgroundColor: legend.color,
fontColor: legend.fontColor,
size: legend.size,
label,
},
});
}
}
newNodeBadges.set(label,
<Badge
className="nodeLabel px-3 py-2 mx-1 my-2"
pill
key={uuid()}
onClick={() => nextProps.onLabelClick({
type: 'labels',
data: {
type: 'node',
backgroundColor: legend.color,
fontColor: legend.fontColor,
size: legend.size,
label,
},
})}
style={{ backgroundColor: legend.color, color: legend.fontColor }}
>
{label}
</Badge>);
}
for (let i = 0; i < Object.entries(nextProps.legendData.edgeLegend).length; i += 1) {
const [label, legend] = Object.entries(nextProps.legendData.edgeLegend)[i];
if (prevState.legendData !== undefined && prevState.legendData.edgeLegend !== undefined) {
let isChanged = false;
for (let i1 = 0; i1 < Object.entries(prevState.legendData.edgeLegend).length; i1 += 1) {
const [prevLabel, prevLegend] = Object.entries(prevState.legendData.edgeLegend)[i1];
if (label === prevLabel && legend.color !== prevLegend.color) {
isChanged = true;
} else if (label === prevLabel && legend.size !== prevLegend.size) {
isChanged = true;
} else if (label === prevLabel && legend.caption !== prevLegend.caption) {
isChanged = true;
}
}
if (isChanged) {
nextProps.onLabelClick({
type: 'labels',
data: {
type: 'edge',
backgroundColor: legend.color,
fontColor: legend.fontColor,
size: legend.size,
label,
},
});
}
}
newEdgeBadges.set(label,
<Badge
className="edgeLabel px-3 py-2 mx-1 my-2"
key={uuid()}
onClick={() => nextProps.onLabelClick({
type: 'labels',
data: {
type: 'edge',
backgroundColor: legend.color,
fontColor: legend.fontColor,
size: legend.size,
label,
},
})}
style={{ backgroundColor: legend.color, color: legend.fontColor }}
>
{label}
</Badge>);
}
return {
nodeBadges: newNodeBadges,
edgeBadges: newEdgeBadges,
legendData: nextProps.legendData,
};
}
shouldComponentUpdate() {
return true;
}
componentDidUpdate() {
}
render() {
const nodeLedgend = [];
const edgeLedgend = [];
const {
nodeBadges, edgeBadges, nodeLegendExpanded, edgeLegendExpanded,
} = this.state;
nodeBadges.forEach((value) => nodeLedgend.push(value));
edgeBadges.forEach((value) => edgeLedgend.push(value));
return (
<div className="legend-area" style={{ width: '80%' }}>
<div className="d-flex nodeLegend">
<div className={`mr-auto legends legend ${nodeLegendExpanded ? 'expandedLegend' : ''}`}>
<sapn>Node: </sapn>
{nodeLedgend}
</div>
<button
type="button"
className="frame-head-button btn btn-link px-3"
onClick={() => this.setState({ nodeLegendExpanded: !nodeLegendExpanded })}
>
<FontAwesomeIcon
icon={nodeLegendExpanded ? faAngleUp : faAngleDown}
/>
</button>
</div>
<div className="d-flex edgeLegend">
<div className={`mr-auto legends legend ${edgeLegendExpanded ? 'expandedLegend' : ''}`}>
<sapn>Edge: </sapn>
{edgeLedgend}
</div>
<button
type="button"
className="frame-head-button btn btn-link px-3"
onClick={() => this.setState({ edgeLegendExpanded: !edgeLegendExpanded })}
>
<FontAwesomeIcon
icon={edgeLegendExpanded ? faAngleUp : faAngleDown}
/>
</button>
</div>
</div>
);
}
}
CypherResultCytoscapeLegend.propTypes = {
legendData: PropTypes.shape({
// eslint-disable-next-line react/forbid-prop-types
nodeLegend: PropTypes.any,
// eslint-disable-next-line react/forbid-prop-types
edgeLegend: PropTypes.any,
}).isRequired,
isReloading: PropTypes.bool.isRequired,
onLabelClick: PropTypes.func.isRequired,
};
export default CypherResultCytoscapeLegend;