Files
weave-scope/client/app/scripts/charts/nodes-chart-elements.js
Filip Barl 69fd397217 Initial version of the resource view (#2296)
* Added resource view selector button

* Showing resource boxes in the resource view

* Crude CPU resource view prototype

* Improved the viewMode state logic

* Extracted zooming into a separate wrapper component

* Split the layout selectors between graph-view and resource-view

* Proper zooming logic for the resource view

* Moved all node networks utils to selectors

* Improved the zoom caching logic

* Further refactoring of selectors

* Added sticky labels to the resource boxes

* Added panning translation limits in the resource view

* Renamed GridModeSelector -> ViewModeSelector

* Polished the topology resource view selection logic

* Search bar hidden in the resource view

* Added per-layer topology names to the resource view

* Made metric selectors work for the resource view

* Adjusted the viewport selectors

* Renamed viewport selector to canvas (+ maximal zoom fix)

* Showing more useful metric info in the resource box labels

* Fetching only necessary nodes for the resource view

* Refactored the resource view layer component

* Addressed first batch UI comments (from the Scope meeting)

* Switch to deep zooming transform in the resource view to avoid SVG precision errors

* Renamed and moved resource view components

* Polished all the resource view components

* Changing the available metrics selection

* Improved and polished the state transition logic for the resource view

* Separated zoom limits from the zoom active state

* Renaming and bunch of comments

* Addressed all the UI comments (@davkal + @fons)

* Made graph view selectors independent from resource view selectors
2017-03-24 14:51:53 +01:00

46 lines
1.2 KiB
JavaScript

import React from 'react';
import { connect } from 'react-redux';
import NodesChartEdges from './nodes-chart-edges';
import NodesChartNodes from './nodes-chart-nodes';
import { graphExceedsComplexityThreshSelector } from '../selectors/topology';
import {
selectedScaleSelector,
layoutNodesSelector,
layoutEdgesSelector
} from '../selectors/graph-view/layout';
class NodesChartElements extends React.Component {
render() {
const { layoutNodes, layoutEdges, selectedScale, isAnimated } = this.props;
return (
<g className="nodes-chart-elements">
<NodesChartEdges
layoutEdges={layoutEdges}
selectedScale={selectedScale}
isAnimated={isAnimated} />
<NodesChartNodes
layoutNodes={layoutNodes}
selectedScale={selectedScale}
isAnimated={isAnimated} />
</g>
);
}
}
function mapStateToProps(state) {
return {
layoutNodes: layoutNodesSelector(state),
layoutEdges: layoutEdgesSelector(state),
selectedScale: selectedScaleSelector(state),
isAnimated: !graphExceedsComplexityThreshSelector(state),
};
}
export default connect(
mapStateToProps
)(NodesChartElements);