Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outdated dependency 'vis' #808

Merged
merged 2 commits into from
Aug 24, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 9 additions & 34 deletions front/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion front/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@
"unistore": "^3.2.1",
"useragent-parser-js": "^1.0.3",
"uuid": "^3.3.2",
"vis": "^4.21.0"
"vis-data": "^7.0.0",
"vis-network": "^8.2.0"
},
"jest": {
"coverageDirectory": "./coverage/",
Expand Down
94 changes: 71 additions & 23 deletions front/src/routes/integration/all/zwave/network-page/NetworkTab.jsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,77 @@
import { Component } from 'preact';
import { Text } from 'preact-i18n';
import { Network } from 'vis-network';
import { RequestStatus } from '../../../../../utils/consts';

const NetworkTab = ({ children, ...props }) => {
const zwaveNotConfigured = props.zwaveGetNeighborsStatus === RequestStatus.ServiceNotConfigured;
return (
<div class="card">
<div class="card-header">
<h3 class="card-title">
<Text id="integration.zwave.network.title" />
</h3>
</div>
{zwaveNotConfigured && (
<div class="alert alert-warning">
<Text id="integration.zwave.setup.zwaveNotConfiguredError" />
class NetworkTab extends Component {
setNetworkInput(input) {
this.networkInput = input;
}

constructor(props) {
super(props);

this.setNetworkInput = this.setNetworkInput.bind(this);
}

componentDidUpdate() {
const { zwaveNodesNeighbors } = this.props;
if (zwaveNodesNeighbors) {
const nodes = zwaveNodesNeighbors.map(node => ({
id: node.id,
label: node.product
}));

const edges = [];

const alreadyIn = {};

zwaveNodesNeighbors.forEach(node => {
node.neighbors.forEach(neighborId => {
if (!alreadyIn[`${neighborId}-${node.id}`]) {
edges.push({
from: node.id,
to: neighborId
});
alreadyIn[`${node.id}-${neighborId}`] = true;
}
});
});

// provide the data in the vis format
let data = {
nodes,
edges
};
let options = {};
new Network(this.networkInput, data, options);
}
}

render(props) {
const zwaveNotConfigured = props.zwaveGetNeighborsStatus === RequestStatus.ServiceNotConfigured;
return (
<div class="card">
<div class="card-header">
<h3 class="card-title">
<Text id="integration.zwave.network.title" />
</h3>
</div>
)}
<div
id="zwave-network-graph"
style={{
width: '100%',
height: '400px'
}}
/>
</div>
);
};
{zwaveNotConfigured && (
<div class="alert alert-warning">
<Text id="integration.zwave.setup.zwaveNotConfiguredError" />
</div>
)}
<div
ref={this.setNetworkInput}
style={{
width: '100%',
height: '400px'
}}
/>
</div>
);
}
}

export default NetworkTab;
42 changes: 0 additions & 42 deletions front/src/routes/integration/all/zwave/network-page/actions.js
Original file line number Diff line number Diff line change
@@ -1,49 +1,8 @@
import vis from 'vis';
import get from 'get-value';

import { RequestStatus } from '../../../../../utils/consts';
import { ERROR_MESSAGES } from '../../../../../../../server/utils/constants';

function renderGraph(zwaveNodes) {
const nodeData = zwaveNodes.map(node => ({
id: node.id,
label: node.product
}));
let nodes = new vis.DataSet(nodeData);

const edgeData = [];

const alreadyIn = {};

zwaveNodes.forEach(node => {
node.neighbors.forEach(neighborId => {
if (!alreadyIn[`${neighborId}-${node.id}`]) {
edgeData.push({
from: node.id,
to: neighborId
});
alreadyIn[`${node.id}-${neighborId}`] = true;
}
});
});

// create an array with edges
let edges = new vis.DataSet(edgeData);

// create a network
let container = document.getElementById('zwave-network-graph');

// provide the data in the vis format
let data = {
nodes,
edges
};
let options = {};

// initialize your network!
return new vis.Network(container, data, options);
}

const actions = store => ({
async getNeighbors(state) {
store.setState({
Expand All @@ -55,7 +14,6 @@ const actions = store => ({
zwaveNodesNeighbors,
zwaveGetNeighborsStatus: RequestStatus.Success
});
renderGraph(zwaveNodesNeighbors);
} catch (e) {
const responseMessage = get(e, 'response.data.message');
if (responseMessage === ERROR_MESSAGES.SERVICE_NOT_CONFIGURED) {
Expand Down