From 16a7fc2f503b24095a8b9829fd7f201d3319c05d Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Tue, 19 May 2015 16:48:03 +0200 Subject: [PATCH] removed unused stats styles, search and options --- client/app/scripts/charts/node-explorer.js | 302 ------------------ client/app/scripts/components/app.js | 2 - client/app/scripts/components/search-bar.js | 89 ------ client/app/scripts/components/stat-value.js | 18 -- client/app/scripts/components/stats.js | 30 -- client/app/scripts/components/view-options.js | 93 ------ client/app/styles/main.less | 20 -- 7 files changed, 554 deletions(-) delete mode 100644 client/app/scripts/charts/node-explorer.js delete mode 100644 client/app/scripts/components/search-bar.js delete mode 100644 client/app/scripts/components/stat-value.js delete mode 100644 client/app/scripts/components/stats.js delete mode 100644 client/app/scripts/components/view-options.js diff --git a/client/app/scripts/charts/node-explorer.js b/client/app/scripts/charts/node-explorer.js deleted file mode 100644 index 1def9fa89..000000000 --- a/client/app/scripts/charts/node-explorer.js +++ /dev/null @@ -1,302 +0,0 @@ -var d3 = require('d3'); -var _ = require('lodash'); -var EventEmitter = require('events').EventEmitter; -var Node = require('./node'); - - -function determineAllEdges(nodes, allNodes) { - var edges = [], - edgeIds = {}, - nodeIds = _.pluck(nodes, 'id'); - - _.each(nodes, function(node) { - var nodeId = node.id; - - _.each(node.adjacency, function(adjacent) { - var edge = [nodeId, adjacent], - edgeId = edge.join('-'); - - if (!edgeIds[edgeId] && _.contains(nodeIds, nodeId) && _.contains(nodeIds, adjacent)) { - edges.push({ - id: edgeId, - value: 5, - source: allNodes[edge[0]], - target: allNodes[edge[1]] - }); - edgeIds[edgeId] = true; - } - }); - }); - - return edges; -} - -function getAdjacentNodes(nodes, rootNodeIds) { - var rootNodes = _.compact(_.map(rootNodeIds, function(nodeId) { - return nodes[nodeId]; - })); - - var allAdjacentNodeIds = _.union(_.flatten(_.map(rootNodes, function(node) { - return node.adjacency; - })), rootNodeIds); - - return _.compact(_.map(allAdjacentNodeIds, function(nodeId) { - return nodes[nodeId]; - })); -} - -function getAdjacentEdges(nodes, root) { - return _.map(root.adjacency, function(nodeId) { - var edge = [root.id, nodeId], - edgeId = edge.join('-'); - - return { - id: edgeId, - value: 10, - source: nodes[edge[0]], - target: nodes[edge[1]] - }; - }); -} - -function id(d) { - return d.id; -} - -function degree(d) { - return d.adjacency ? d.adjacency.length : 1; -} - -function getChildren(node, allNodes) { - return _.map(node.adjacency, function(nodeId) { - return allNodes[nodeId]; - }); -} - -function dblclick(d) { - d.fixed = false; -} - -function nodeExplorer() { - - var color = d3.scale.category20(); - - var pie = d3.layout.pie() - .value(degree); - - var radius = d3.scale.sqrt() - .range([1, 8]); - - var drag = d3.behavior.drag(); - - var dispatcher = new EventEmitter(); - - var nodeLocations = {}; - - var width, height; - - function circleRadius() { - return width / 4; - } - - function radialLayout(centerNode, nodes, radius) { - var slices = pie(_.sortBy(_.filter(nodes, function(node) { - return !node.layedout && _.contains(centerNode.adjacency, node.id); - }), 'id')); - - _.each(slices, function(slice) { - var previousXY = nodeLocations[slice.data.id]; - - slice.data.x = centerNode.x + circleRadius() * Math.sin((slice.startAngle + slice.endAngle) / 2); - slice.data.y = centerNode.y + circleRadius() * Math.cos((slice.startAngle + slice.endAngle) / 2); - slice.data.layedout = true; - // nodeLocations[slice.data.id] = [slice.data.forceX, slice.data.forceY]; - }); - } - - - function chart(selection) { - selection.each(function(data) { - var allNodes = data.nodes; - var root = allNodes[data.root]; - var expandedNodeIds = data.expandedNodes; - - var centerX = width / 2; - var centerY = height / 2; - - var nodes = getAdjacentNodes(allNodes, expandedNodeIds); - - if (root) { - var previousXY = nodeLocations[root.id]; - root.x = previousXY ? previousXY[0] : centerX; - root.y = previousXY ? previousXY[1] : centerY; - root.layedout = true; - - _.each(nodes, function(node) { - if (node.id !== root.id) { - node.layedout = false; - } - }); - - _.each(expandedNodeIds, function(nodeId, i) { - var centerNode = allNodes[nodeId]; - if (centerNode) { - radialLayout(centerNode, nodes, i ? circleRadius() / 4 : circleRadius()); - } - }); - - if (nodes.length == 0) { - nodes.push(root); - } - } - - var edges = determineAllEdges(nodes, allNodes); - - // Select the svg element, if it exists. - var svg = d3.select(this).selectAll("svg").data([data]); - - // Otherwise, create the skeletal chart. - var gEnter = svg.enter().append("svg") - .attr('width', "100%") - .attr('height', "100%"); - - gEnter.append('g') - .classed('links', true); - gEnter.append('g') - .classed('nodes', true); - - var link = svg.select('.links').selectAll(".link") - .data(edges, id); - link.exit() - .remove() - link.enter().append("line") - .attr("class", "link") - .style("stroke-width", function(d) { return Math.sqrt(d.value); }); - - var node = svg.select('.nodes').selectAll(".node") - .data(nodes, id); - - node.exit() - .remove(); - - gEnter = node.enter().append("g") - .attr("class", "node") - .on("dblclick", dblclick) - .on('click', function(d) { - if (d3.event.defaultPrevented) { - return; // click suppressed - } - dispatcher.emit('node.click', d); - }) - .call(drag); - - gEnter.append("circle") - .attr('class', 'outer') - .style("fill", function(d) { - return color(d.label_major); - }) - .attr("r", function(d) { - return radius(degree(d)) + 4; - }); - - gEnter.append("circle") - .style("fill", function(d) { - return color(d.label_major); - }) - .attr("r", function(d) { - return radius(degree(d)); - }); - - gEnter.append("text") - .attr('class', 'label-major') - .attr("dy", "-.25em") - .text(function(d) { return d.label_major; }); - - gEnter.append("text") - .attr('class', 'label-minor') - .attr("dy", ".75em") - .text(function(d) { return d.label_minor; }); - - if (!root) { - return; - } - - node - .classed('node-root', function(d) { - return d.id === root.id; - }) - .classed('node-expanded', function(d) { - return _.contains(expandedNodeIds, d.id); - }) - .classed('node-leaf', function(d) { - return _.size(d.adjacency) === 0; - }); - - function updatePositions() { - link.attr("x1", function(d) { return d.source.x; }) - .attr("y1", function(d) { return d.source.y; }) - .attr("x2", function(d) { return d.target.x; }) - .attr("y2", function(d) { return d.target.y; }); - - node.attr("transform", function(d) { - return "translate(" + d.x + "," + d.y + ")"; - }); - - node.selectAll('text') - .attr("dx", function(d) { return d.x > centerX ? radius(degree(d)) + 6 : - radius(degree(d)) - 6}) - .attr("text-anchor", function(d) { return d.x > centerX ? "start" : "end"; }); - } - - var density = Math.sqrt(nodes.length / (width * height)); - - drag.on('drag', function(d) { - d.x = d3.event.x; - d.y = d3.event.y; - updatePositions(); - }); - - updatePositions(); - }); - } - - - chart.create = function(el, state) { - d3.select(el) - .datum(state) - .call(chart); - - return chart; - }; - - chart.update = _.throttle(function(el, state) { - d3.select(el) - .datum(state) - .call(chart); - - return chart; - }, 500); - - chart.on = function(event, callback) { - dispatcher.on(event, callback); - }; - - chart.teardown = function() { - force.on('tick', null); - }; - - chart.width = function(_) { - if (!arguments.length) return width; - width = _; - return chart; - }; - - chart.height = function(_) { - if (!arguments.length) return height; - height = _; - return chart; - }; - - return chart; -} - -module.exports = nodeExplorer; \ No newline at end of file diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js index ad0e5093a..7f815ecd5 100644 --- a/client/app/scripts/components/app.js +++ b/client/app/scripts/components/app.js @@ -4,7 +4,6 @@ var React = require('react'); var _ = require('lodash'); var Logo = require('./logo'); -var SearchBar = require('./search-bar.js'); var AppStore = require('../stores/app-store'); var Groupings = require('./groupings.js'); var Status = require('./status.js'); @@ -14,7 +13,6 @@ var WebapiUtils = require('../utils/web-api-utils'); var AppActions = require('../actions/app-actions'); var Details = require('./details'); var Nodes = require('./nodes'); -var ViewOptions = require('./view-options'); var RouterUtils = require('../utils/router-utils'); diff --git a/client/app/scripts/components/search-bar.js b/client/app/scripts/components/search-bar.js deleted file mode 100644 index db3f5851f..000000000 --- a/client/app/scripts/components/search-bar.js +++ /dev/null @@ -1,89 +0,0 @@ -/** @jsx React.DOM */ - -var React = require('react'); -var _ = require('lodash'); - -var Stats = require('./stats.js'); -var TopologyActions = require('../actions/topology-actions'); - -var SearchBar = React.createClass({ - - getDefaultProps: function() { - return { - initialFilterText: '' - }; - }, - - getInitialState: function() { - return { - filterAdjacent: false, - filterText: this.props.filterText - }; - }, - - handleChange: function() { - TopologyActions.inputFilterText(this.state.filterText); - }, - - onVolatileChange: function(event) { - this.setState({ - filterText: event.target.value - }); - - this.scheduleChange(); - }, - - scheduleChange: _.debounce(function() { - this.handleChange(); - }, 300), - - onFilterAjacent: function(event) { - this.setState({ - filterAdjacent: event.target.checked - }); - TopologyActions.checkFilterAdjacent(event.target.checked); - }, - - componentWillMount: function() { - this.setState({ - filterText: this.props.filterText - }); - }, - - componentDidMount: function() { - this.refs.filterTextInput.getDOMNode().focus(); - }, - - render: function() { - return ( - - ); - } - -}); - -module.exports = SearchBar; \ No newline at end of file diff --git a/client/app/scripts/components/stat-value.js b/client/app/scripts/components/stat-value.js deleted file mode 100644 index b640a3b16..000000000 --- a/client/app/scripts/components/stat-value.js +++ /dev/null @@ -1,18 +0,0 @@ -/** @jsx React.DOM */ - -var React = require('react'); - -var StatValue = React.createClass({ - - render: function() { - return ( -
- {this.props.value} - {this.props.label} -
- ); - } - -}); - -module.exports = StatValue; \ No newline at end of file diff --git a/client/app/scripts/components/stats.js b/client/app/scripts/components/stats.js deleted file mode 100644 index 8c7f01c20..000000000 --- a/client/app/scripts/components/stats.js +++ /dev/null @@ -1,30 +0,0 @@ -/** @jsx React.DOM */ - -var React = require('react'); -var _ = require('lodash'); - -var StatValue = require('./stat-value.js'); - -var Stats = React.createClass({ - - render: function() { - var nodeCount = _.size(this.props.nodes), - edgeCount = _.reduce(this.props.nodes, function(result, node) { - return result + _.size(node.adjacency); - }, 0); - - return ( -
-
- -
-
- -
-
- ); - } - -}); - -module.exports = Stats; \ No newline at end of file diff --git a/client/app/scripts/components/view-options.js b/client/app/scripts/components/view-options.js deleted file mode 100644 index 1fff4dc1a..000000000 --- a/client/app/scripts/components/view-options.js +++ /dev/null @@ -1,93 +0,0 @@ -/** @jsx React.DOM */ - -var React = require('react'); -var _ = require('lodash'); - -var AppActions = require('../actions/app-actions'); - -var ViewOptions = React.createClass({ - - getInitialState: function() { - return { - menuVisible: false - }; - }, - - onClick: function(ev) { - ev.preventDefault(); - AppActions.clickTopologyMode(ev.currentTarget.rel); - }, - - onMouseOver: function(ev) { - this.handleMouseDebounced(true); - }, - - onMouseOut: function(ev) { - this.handleMouseDebounced(false); - }, - - componentWillMount: function() { - this.handleMouseDebounced = _.debounce(function(isOver) { - this.setState({ - menuVisible: isOver - }); - }, 200); - }, - - getActiveViewMode: function() { - var className = this.props.active === 'class' ? "glyphicon glyphicon-th-large" : "glyphicon glyphicon-th"; - - return ( -
-
-
- -
-
- View Options -
-
-
- ); - }, - - render: function() { - var activeMode = this.props.active, - activeOptions = this.getActiveViewMode(), - baseClass = "", - individualClass = activeMode == 'individual' ? baseClass + ' active' : baseClass, - classClass = activeMode == 'class' ? baseClass + ' active' : baseClass, - navClassName = "nav navbar-nav"; - - return ( -
- {activeOptions} - {this.state.menuVisible && } -
- ); - } - -}); - -module.exports = ViewOptions; \ No newline at end of file diff --git a/client/app/styles/main.less b/client/app/styles/main.less index 03e7ebca2..f508e89ec 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -124,26 +124,6 @@ body { } } -#stats { - - .stat-value { - text-align: center; - padding-top: 15px; - } - - .value { - font-size: 36px; - display: block; - } - .stat-label { - position: relative; - top: 4px; - color: @text-secondary-color; - text-transform: uppercase; - font-weight: normal; - } -} - #nodes { svg {