diff --git a/src/app/components/adjustableColorScale/adjustableColorScale.css b/src/app/components/adjustableColorScale/adjustableColorScale.css new file mode 100644 index 0000000..7052799 --- /dev/null +++ b/src/app/components/adjustableColorScale/adjustableColorScale.css @@ -0,0 +1,16 @@ +/* These are copied from pathfinder's style.css */ + +g.legend path { + fill: none; + stroke: #505050; + stroke-width: 1px; +} + +g.legend line { + stroke: #000; + shape-rendering: crispEdges; +} + +g.legend text { + font-size: 10px; +} diff --git a/src/app/components/adjustableColorScale/adjustableColorScale.directive.html b/src/app/components/adjustableColorScale/adjustableColorScale.directive.html new file mode 100644 index 0000000..5a7c6af --- /dev/null +++ b/src/app/components/adjustableColorScale/adjustableColorScale.directive.html @@ -0,0 +1,6 @@ + +
+ Legend +
+ + diff --git a/src/app/components/adjustableColorScale/adjustableColorScale.directive.js b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js new file mode 100644 index 0000000..9b4920f --- /dev/null +++ b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js @@ -0,0 +1,191 @@ +/*globals d3 + */ + +export function AdjustableColorScaleDirective() { + 'ngInject'; + + let directive = { + restrict: 'E', + templateUrl: 'app/components/adjustableColorScale/adjustableColorScale.directive.html', + scope: { + colorScaleIndex: '=' + }, + controller: AdjustableColorScaleController, + controllerAs: 'controller', + bindToController: true, + link: linkFn + }; + + function linkFn(scope, element) { + scope.controller.element = element; + } + + return directive; +} + +class AdjustableColorScaleController { + constructor($scope, $log, colorScaleService) { + 'ngInject'; + this.$log = $log; + this.$scope = $scope; + this.colorScaleService = colorScaleService; + this.svg = null; + this.$scope.$on("setColorScale", this.setColorScale.bind(this)); + this.formatNumber = d3.format("d"); + this.marginLeft = 10; + this.marginRight = 10; + this.width = 180; + } + + setColorScale(signal, colorScaleIndex, colorScale) { + + if (colorScaleIndex == this.colorScaleIndex) { + + this.colorScale = colorScale; + + // Create or clear the svg + if (!this.svg) { + + this.svg = d3.select(this.element[0]) + .select(".legend-container") + .append("svg") + .attr("width", this.width) + .attr("height", 30); + + } else { + + this.svg.selectAll("*") + .remove(); + + } + + let colorScaleDomain = colorScale.domain(); + let xDomain = [colorScaleDomain[0], colorScaleDomain[colorScaleDomain.length - 1]]; + + this.xScale = d3.scale.linear() + .domain(xDomain) + .range([this.marginRight, this.width - this.marginLeft]); + + this.xAxis = d3.svg.axis() + .scale(this.xScale) + .orient("bottom") + .tickSize(13) + .tickValues(colorScale.domain()) + .tickFormat(function (d) { + return Math.floor(d); + }); + + this.group = this.svg.append("g") + .attr("class", "legend"); + + this.update(); + + } + } + + drag() { + let self = this; + let xMin = self.xScale.domain()[0]; + let xMax = self.xScale.domain()[1]; + let newValue = self.xScale.invert(d3.event.x); + newValue = + newValue < xMin ? xMin : + xMax < newValue ? xMax : + newValue; + + let newDomain = self.others.slice(); + newDomain.push(newValue); + newDomain.sort(function (a, b) { + return a > b; + }); + + self.colorScale.domain(newDomain); + self.xAxis.tickValues(newDomain); + self.update(); + } + + dragEnd() { + this.colorScaleService.setColorScale(this.colorScaleIndex, this.colorScale) + } + + dragStart(d) { + let self = this; + this.others = []; + this.colorScale.domain().forEach(function (v) { + if (v == d) return; + self.others.push(v); + }); + } + + update() { + + let self = this; + + let rect = this.group.selectAll(".range") + .data(this.colorScale.range().map(function (color) { + var d = self.colorScale.invertExtent(color); + if (d[0] == null) d[0] = self.xScale.domain()[0]; + if (d[1] == null) d[1] = self.xScale.domain()[1]; + return d; + })); + + //this.$log.debug("Creating rect siwth range", this.colorScale.range().map( + // function (color) { + // var d = self.colorScale.invertExtent(color); + // if (d[0] == null) d[0] = self.xScale.domain()[0]; + // if (d[1] == null) d[1] = self.xScale.domain()[1]; + // return d; + // }) + //); + + rect.enter() + .append("rect") + .attr("classed", "range") + .attr("fill", "red") + .attr("height", 8) + .on("dblclick", function () { + //var newValue = x.invert( d3.mouse(this)[0] ); + //var newDomain = self.colorScale.domain().slice(); + //newDomain.push( newValue ); + // + //if ( newDomain.length >= scaleMax ) return; + // + //newDomain.sort(); + //self.colorScale + // .domain( newDomain ) + // .range(colorbrewer[scale][newDomain.length+1]); + //xAxis.tickValues( newDomain ); + //update(); + }); + + + var drag = d3.behavior.drag() + .on('dragstart', this.dragStart.bind(this)) + .on('drag', this.drag.bind(this)) + .on('dragend', this.dragEnd.bind(this)); + + rect.attr("x", function (d) { + return self.xScale(d[0]); + }) + .attr("width", function (d) { + return self.xScale(d[1]) - self.xScale(d[0]); + }) + .style("fill", function (d) { + return self.colorScale(d[0]); + }); + + this.group.call(this.xAxis) + .selectAll(".tick") + .filter(function (d, i) { + return !(i == 0) || (i == self.xAxis.tickValues().length); + }) + .style("cursor", "ew-resize") + .call(drag) + .append("rect") + .attr("x", -3) + .attr("width", 2) + .attr("height", 13) + .attr("fill-opacity", 0); + } + +} diff --git a/src/app/components/colorScale/colorScale.service.js b/src/app/components/colorScale/colorScale.service.js new file mode 100644 index 0000000..0bfc29d --- /dev/null +++ b/src/app/components/colorScale/colorScale.service.js @@ -0,0 +1,68 @@ +/*globals d3, colorbrewer + */ +export class ColorScaleService { + + /** + * + */ + constructor($rootScope, $log) { + "ngInject"; + this.$scope = $rootScope; + this.$log = $log; + this.colorScales = {}; + this.hasColorScales = false; + this.colorScaleNames = ["Blues", "Greens"]; + this.colorScales = []; + } + + /** + * + */ + createColorScale(colorScaleIndex, domain) { + let name = this.colorScaleNames[colorScaleIndex]; + let range = ColorScaleService.getColorScaleRange(colorbrewer[name], domain); + + let scale = d3.scale.quantize() + .range(range) + .domain(domain); + + let quantizeDomain = scale.range().map(function (d) { + return scale.invertExtent(d)[1] + 1; + }); + + scale = d3.scale.threshold() + .domain(quantizeDomain) + .range(range); + + this.setColorScale(colorScaleIndex, scale); + } + + /** + * + */ + static getColorScaleRange(colors, domain) { + if (domain[0] == 1 && domain[1] == 1) { + return [colors[3][2]]; + } else if (domain[0] == 1 && domain[1] == 2) { + return [colors[3][0], colors[3][2]]; + } else if (domain[1] >= 2 && domain[1] < 7) { + return colors[domain[1] + 1]; + } else { + return colors[7]; + } + } + + /** + * + */ + setColorScale(colorScaleIndex, colorScale) { + this.colorScales[colorScaleIndex] = colorScale; + this.$scope.$broadcast("setColorScale", colorScaleIndex, colorScale); + } + + resetColorScales() { + // this.$log.debug("Resetting color scales"); + this.colorScales = []; + this.hasColorScales = false; + } +} diff --git a/src/app/components/connectivityMatrixView/cmMatrixBase.js b/src/app/components/connectivityMatrixView/cmMatrixBase.js index b0f7189..757ce0d 100644 --- a/src/app/components/connectivityMatrixView/cmMatrixBase.js +++ b/src/app/components/connectivityMatrixView/cmMatrixBase.js @@ -8,7 +8,6 @@ import {cmScatterPlot1DVisitor} from "./visitors/cmScatterPlot1DVisitor" import {cmScatterPlot1DPreprocessor} from "./visitors/cmScatterPlot1DVisitor" import {cmColorMapPreprocessor} from "./visitors/cmColorMapVisitor" import {cmColorMapVisitor} from "./visitors/cmColorMapVisitor" -import {cmColorMapLegend} from "./visitors/cmColorMapVisitor" import {cmClearVisitor} from "./visitors/cmClearVisitor" import {cmBarChartPreprocessor} from "./visitors/cmBarChartVisitor" import {cmBarChartVisitor} from "./visitors/cmBarChartVisitor" @@ -48,7 +47,7 @@ import {UtilsD3} from "../utils/utilsd3" */ export class cmMatrixBase extends SvgGroupElement { - constructor(svg, model, $log, $uibModal, scope, viewState, modalService, mainController) { + constructor(svg, model, $log, $uibModal, scope, viewState, modalService, mainController, colorScaleService) { super(svg); this.$log = $log; this.$uibModal = $uibModal; @@ -56,6 +55,7 @@ export class cmMatrixBase extends SvgGroupElement { this.$scope = scope; this.mainController = mainController; this.viewState = viewState; + this.colorScaleService = colorScaleService; this.colWidth = 15; this.rowHeight = 15; @@ -77,6 +77,9 @@ export class cmMatrixBase extends SvgGroupElement { this.gridPosition = []; + this.isDataMatrix = false; + this.isHeaderMatrix = false; + this.setUseAnimation(false); this.isInitialized = false; this.setModel(model); @@ -127,6 +130,8 @@ export class cmMatrixBase extends SvgGroupElement { this.$scope.$on("positionHighlights", self.onPositionHighlights.bind(self)); this.$scope.$on("hideHighlights", self.onHideHighlights.bind(self)) this.$scope.$on("clearSelection", self.onClearSelection.bind(self)) + + this.$scope.$on("setColorScale", self.setColorScale.bind(self)); } addRow(row, rowHeight) { @@ -881,7 +886,30 @@ export class cmMatrixBase extends SvgGroupElement { .attr("data-is-sorted", ''); } + setColorScale(signal, colorScaleIndex, colorScale) { + let cellWidth = this.colWidth; + let cellHeight = this.rowHeight; + + let visitor = new cmColorMapVisitor(colorScale, colorScaleIndex, cellWidth, cellHeight); + + let clicked = this.onCellClicked.bind(this); + let mouseover = this.onCellMouseOver.bind(this); + let mouseout = this.onCellMouseOut.bind(this); + + let metricFunction = cmMatrixBase.getMetricFunction(this.metric); + + visitor.setCallbacks(clicked, mouseover, mouseout); + visitor.setPathFilterFunction(this.viewState.getFilterPathFunction()); + visitor.setMetricFunction(metricFunction); + visitor.graph = this.model.graph; + this.applyVisitor(visitor); + } + setEncoding(encoding, metric) { + if (!this.isDataMatrix) { + return; + } + this.encoding = encoding; this.metric = metric; let preprocessor = undefined; @@ -910,25 +938,28 @@ export class cmMatrixBase extends SvgGroupElement { this.legend = undefined; } else if (encoding == "colormap") { - let metricFunction = cmMatrixBase.getMetricFunction(metric); + if (this.colorScaleService.hasColorScales) { - preprocessor = new cmColorMapPreprocessor(); - preprocessor.setPathFilterFunction(this.viewState.getFilterPathFunction()); - preprocessor.setMetricFunction(metricFunction); - preprocessor.graph = this.model.graph; - this.applyVisitor(preprocessor); + this.setColorScale(null, 0, this.colorScaleService.colorScales[0]); + this.setColorScale(null, 1, this.colorScaleService.colorScales[1]); - visitor = new cmColorMapVisitor(preprocessor, cellWidth, cellHeight); - visitor.setCallbacks(clicked, mouseover, mouseout); - visitor.setPathFilterFunction(this.viewState.getFilterPathFunction()); - visitor.setMetricFunction(metricFunction); - visitor.graph = this.model.graph; - this.applyVisitor(visitor); + } else { - this.legend = new cmColorMapLegend(visitor); + let metricFunction = cmMatrixBase.getMetricFunction(metric); - } + preprocessor = new cmColorMapPreprocessor(); + preprocessor.setPathFilterFunction(this.viewState.getFilterPathFunction()); + preprocessor.setMetricFunction(metricFunction); + // TODO - why does preprocessor get a graph? + preprocessor.graph = this.model.graph; + this.applyVisitor(preprocessor); + + this.colorScaleService.hasColorScales = true; + this.colorScaleService.createColorScale(0, preprocessor.setRange); + this.colorScaleService.createColorScale(1, preprocessor.nodeRange); + } + } } /** diff --git a/src/app/components/connectivityMatrixView/cmMatrixView.js b/src/app/components/connectivityMatrixView/cmMatrixView.js index 08e606f..b16daff 100644 --- a/src/app/components/connectivityMatrixView/cmMatrixView.js +++ b/src/app/components/connectivityMatrixView/cmMatrixView.js @@ -4,14 +4,16 @@ import {cmMatrixRow} from "./rows/cmMatrixRow" export class cmMatrixView extends cmMatrixBase { - constructor(svg, model, $log, $uibModal, scope, viewState, modalService, mainController) { - super(svg, model, $log, $uibModal, scope, viewState, modalService, mainController); + constructor(svg, model, $log, $uibModal, scope, viewState, modalService, mainController, colorScaleService) { + super(svg, model, $log, $uibModal, scope, viewState, modalService, mainController, colorScaleService); this.colWidthAttr = 0; this.colWidthLabel = 0; this.colWidthControl = 0; this.rowHeightAttr = 0; + this.isDataMatrix = true; + this.setModel(model); } diff --git a/src/app/components/connectivityMatrixView/cmMatrixViewFactory.js b/src/app/components/connectivityMatrixView/cmMatrixViewFactory.js index 1130f82..cbc59df 100644 --- a/src/app/components/connectivityMatrixView/cmMatrixViewFactory.js +++ b/src/app/components/connectivityMatrixView/cmMatrixViewFactory.js @@ -2,22 +2,23 @@ import {cmMatrixWrapper} from "./cmMatrixWrapper" import {cmNodeListWrapper} from "./nodeList/cmNodeListWrapper" export class cmMatrixViewFactory { - constructor($log, $http, $uibModal, modalService) { + constructor($log, $http, $uibModal, modalService, colorScaleService) { 'ngInject'; this.$log = $log; this.$http = $http; this.$uibModal = $uibModal; this.modalService = modalService; + this.colorScaleService = colorScaleService; } createConnectivityMatrixManager(svg, model, scope, viewState, mainController) { let childScope = scope.$new(); - return new cmMatrixWrapper(svg, model, this.$log, this.$uibModal, childScope, viewState, this.modalService, mainController); + return new cmMatrixWrapper(svg, model, this.$log, this.$uibModal, childScope, viewState, this.modalService, mainController, this.colorScaleService); } createNodeListManager(svg, model, scope, viewState, mainController) { let childScope = scope.$new(); - return new cmNodeListWrapper(svg, model, this.$log, this.$uibModal, childScope, viewState, this.modalService, mainController); + return new cmNodeListWrapper(svg, model, this.$log, this.$uibModal, childScope, viewState, this.modalService, mainController, this.colorScaleService); } } diff --git a/src/app/components/connectivityMatrixView/cmMatrixWrapper.js b/src/app/components/connectivityMatrixView/cmMatrixWrapper.js index 483b1b2..31360f0 100644 --- a/src/app/components/connectivityMatrixView/cmMatrixWrapper.js +++ b/src/app/components/connectivityMatrixView/cmMatrixWrapper.js @@ -6,23 +6,23 @@ import {cmWrapperBase} from "./cmWrapperBase" export class cmMatrixWrapper extends cmWrapperBase { - constructor(element, model, $log, $uibModal, scope, viewState, modalService, mainController) { - super(element, $log, scope, mainController, "matrix-view"); - + constructor(element, model, $log, $uibModal, scope, viewState, modalService, mainController, colorScaleService) { + super(element, $log, scope, mainController, "matrix-view", colorScaleService); + this.$log.debug(this, colorScaleService); this.controlsHeader = new cmControlsMatrix(this.controlsHeaderGroup, model, $log, $uibModal, scope, viewState, - modalService, mainController); + modalService, mainController, colorScaleService); this.controlsHeader.setGridPosition([0, 0]); this.topHeader = new cmMatrixTopHeader(this.topHeaderGroup, model, $log, $uibModal, scope, viewState, - modalService, mainController); + modalService, mainController, colorScaleService); this.topHeader.setGridPosition([1, 0]); this.leftHeader = new cmMatrixLeftHeader(this.leftHeaderGroup, model, $log, $uibModal, scope, viewState, - modalService, mainController); + modalService, mainController, colorScaleService); this.leftHeader.setGridPosition([0, 1]); this.matrix = new cmMatrixView(this.matrixGroup, model, $log, $uibModal, scope, viewState, - modalService, mainController); + modalService, mainController, colorScaleService); this.matrix.setGridPosition([1, 1]); this.matrices = [this.topHeader, this.leftHeader, this.controlsHeader, this.matrix]; diff --git a/src/app/components/connectivityMatrixView/cmWrapperBase.js b/src/app/components/connectivityMatrixView/cmWrapperBase.js index a9c764f..02d3d10 100644 --- a/src/app/components/connectivityMatrixView/cmWrapperBase.js +++ b/src/app/components/connectivityMatrixView/cmWrapperBase.js @@ -1,12 +1,13 @@ export class cmWrapperBase { - constructor(element, $log, scope, mainController, name) { + constructor(element, $log, scope, mainController, name, colorScaleService) { this.$log = $log; this.$scope = scope; this.element = element; this.mainController = mainController; this.matrices = []; this.useAnimation = true; + this.colorScaleService = colorScaleService; let self = this; this.$scope.$on("changeMatrixHeight", function () { self.updateElementPositions(null, null, self.useAnimation); diff --git a/src/app/components/connectivityMatrixView/nodeList/cmNodeListBase.js b/src/app/components/connectivityMatrixView/nodeList/cmNodeListBase.js index 8afa5e7..668de67 100644 --- a/src/app/components/connectivityMatrixView/nodeList/cmNodeListBase.js +++ b/src/app/components/connectivityMatrixView/nodeList/cmNodeListBase.js @@ -5,8 +5,8 @@ export class cmNodeListBase extends cmMatrixBase { /** * */ - constructor(svg, model, $log, $uibModal, scope, viewState, modalService, mainController) { - super(svg, model, $log, $uibModal, scope, viewState, modalService, mainController); + constructor(svg, model, $log, $uibModal, scope, viewState, modalService, mainController, colorScaleService) { + super(svg, model, $log, $uibModal, scope, viewState, modalService, mainController, colorScaleService); this.isNodeListView = true; } diff --git a/src/app/components/connectivityMatrixView/nodeList/cmNodeListView.js b/src/app/components/connectivityMatrixView/nodeList/cmNodeListView.js index ca10e24..5225c72 100644 --- a/src/app/components/connectivityMatrixView/nodeList/cmNodeListView.js +++ b/src/app/components/connectivityMatrixView/nodeList/cmNodeListView.js @@ -4,14 +4,16 @@ import {cmMatrixRow} from "../rows/cmMatrixRow" export class cmNodeListView extends cmNodeListBase { - constructor(svg, model, $log, $uibModal, scope, viewState, modalService, mainController) { - super(svg, model, $log, $uibModal, scope, viewState, modalService, mainController); + constructor(svg, model, $log, $uibModal, scope, viewState, modalService, mainController, colorScaleService) { + super(svg, model, $log, $uibModal, scope, viewState, modalService, mainController, colorScaleService); this.colWidthAttr = 0; this.colWidthLabel = 0; this.colWidthControl = 0; this.rowHeightAttr = 0; + this.isDataMatrix = true; + this.setModel(model); } diff --git a/src/app/components/connectivityMatrixView/nodeList/cmNodeListWrapper.js b/src/app/components/connectivityMatrixView/nodeList/cmNodeListWrapper.js index 4c53c06..57f0e40 100644 --- a/src/app/components/connectivityMatrixView/nodeList/cmNodeListWrapper.js +++ b/src/app/components/connectivityMatrixView/nodeList/cmNodeListWrapper.js @@ -6,8 +6,8 @@ import {cmNodeListView} from "./cmNodeListView" export class cmNodeListWrapper extends cmWrapperBase { - constructor(element, model, $log, $uibModal, scope, viewState, modalService, mainController) { - super(element, $log, scope, mainController, "node-list"); + constructor(element, model, $log, $uibModal, scope, viewState, modalService, mainController, colorScaleService) { + super(element, $log, scope, mainController, "node-list", colorScaleService); this.controlsHeader = new cmNodeListControls(this.controlsHeaderGroup, model, $log, $uibModal, scope, viewState, modalService, mainController); @@ -22,7 +22,7 @@ export class cmNodeListWrapper extends cmWrapperBase { this.leftHeader.setGridPosition([0, 1]); this.matrix = new cmNodeListView(this.matrixGroup, model, $log, $uibModal, scope, viewState, - modalService, mainController); + modalService, mainController, colorScaleService); this.matrix.setGridPosition([1, 1]); this.matrices = [this.topHeader, this.leftHeader, this.controlsHeader, this.matrix]; @@ -31,7 +31,7 @@ export class cmNodeListWrapper extends cmWrapperBase { this.updateElementPositions(); - this.matrices.forEach(function(matrix) { + this.matrices.forEach(function (matrix) { matrix.onSortRowsByAttribute("num paths", false) }); } diff --git a/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js b/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js index f2ea515..5ff8c4a 100644 --- a/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js +++ b/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js @@ -1,7 +1,3 @@ -/*globals - colorbrewer, d3 - */ - import {cmCellVisitor} from "./cmCellVisitors" export class cmColorMapVisitorBase extends cmCellVisitor { @@ -44,32 +40,11 @@ export class cmColorMapPreprocessor extends cmColorMapVisitorBase { } export class cmColorMapVisitor extends cmColorMapVisitorBase { - constructor(preprocessor, width, height) { + constructor(colorScale, colorMapIndex, width, height) { super(width, height); this.visitDataCells = true; - - let colorRange = cmColorMapVisitor.getColorScaleRange(colorbrewer.Blues, preprocessor.setRange); - let domain = [0, 1]; - - if (colorRange.length != 1) { - domain = preprocessor.setRange; - } - - this.setColorScale = d3.scale.quantize() - .range(colorRange) - .domain(domain); - - colorRange = cmColorMapVisitor.getColorScaleRange(colorbrewer.Greens, preprocessor.nodeRange); - domain = [0, 1]; - if (colorRange.length != 1) { - domain = preprocessor.nodeRange; - } - - this.nodeColorScale = d3.scale.quantize() - .range(colorRange) - .domain(domain); - - this.preprocessor = preprocessor; + this.colorMapIndex = colorMapIndex; + this.colorScale = colorScale; } apply(cell) { @@ -79,9 +54,10 @@ export class cmColorMapVisitor extends cmColorMapVisitorBase { let paths = this.pathFilterFunction(cell.getPathList()); let value = this.applyMetric(paths); - let color = this.getCellColor(cell, value); + let isCorrectAggregation = (cell.isCellBetweenSets() && this.colorMapIndex == 0) || (!cell.isCellBetweenSets() && this.colorMapIndex == 1); + let color = this.colorScale(value); let group = cell.getGroup(); - if (paths.length) { + if (paths.length && isCorrectAggregation) { // Shrink the rect by 1x1 so that it doesn't take up the entire cell. This is for pretty selection. group.append("rect") @@ -113,14 +89,6 @@ export class cmColorMapVisitor extends cmColorMapVisitorBase { } } - getCellColor(cell, value) { - if (cell.isCellBetweenSets()) { - return this.setColorScale(value); - } else { - return this.nodeColorScale(value); - } - } - static getColorScaleRange(colors, range) { if (range[0] == 1 && range[1] == 1) { return [colors[3][2]]; @@ -133,68 +101,3 @@ export class cmColorMapVisitor extends cmColorMapVisitorBase { } } } - -export class cmColorMapLegend { - constructor(visitor) { - this.visitor = visitor; - } - - createView(parent, width) { - let group = parent.append('g'); - - // Create the color legend for major rows/cols - let swatchWidth = 20; - let swatchHeight = Math.min(width, 20); - cmColorMapLegend.createColorScaleLegend(this.visitor.setColorScale, group, swatchWidth, swatchHeight); - group = parent.append('g').attr('transform', function () { - return 'translate(' + swatchWidth * 3 + ',0)'; - }); - - // If there are minor rows/cols, create the legend. - if (this.visitor.nodeColorScale.domain()[1] != 0) { - cmColorMapLegend.createColorScaleLegend(this.visitor.nodeColorScale, group, swatchWidth, swatchHeight); - } - } - - static createColorScaleLegend(colorScale, group, swatchWidth, swatchHeight) { - - let data = colorScale.range(); - - let swatchPositionFn = function (d, i) { - return "translate(0" + ", " + (i * swatchHeight) + ")"; - }; - - // Create square swatches. - group.selectAll('rect') - .data(data) - .enter() - .append('rect') - .attr('width', swatchWidth) - .attr('height', swatchHeight) - .attr('rx', 2) - .attr('ry', 2) - .attr('transform', swatchPositionFn) - .style('fill', function (d) { - return d; - }); - - - let textPositionFn = function (d, i) { - return "translate(" + (swatchWidth * 1.1) + ", " + ((i * swatchHeight) + (0.5 * swatchHeight)) + ")"; - }; - - // Create text labels to the right of the swatches. - group.append('g') - .selectAll('text') - .data(data) - .enter() - .append('text') - .text(function (d) { - let value = colorScale.invertExtent(d); - return Math.floor(value[1]); - }) - .attr('transform', textPositionFn) - .style('alignment-baseline', 'mathematical') - .style('text-anchor', 'start'); - } -} diff --git a/src/app/components/query/query.css b/src/app/components/query/query.css index 612e47d..d4875a8 100644 --- a/src/app/components/query/query.css +++ b/src/app/components/query/query.css @@ -1,4 +1,8 @@ .query-input { - width: 80%; + width: 90%; height: 70px; } + +.query-button { + vertical-align: top; +} diff --git a/src/app/components/query/query.directive.html b/src/app/components/query/query.directive.html index 4a6910f..1bd99ef 100644 --- a/src/app/components/query/query.directive.html +++ b/src/app/components/query/query.directive.html @@ -1,9 +1,4 @@ - -
- - -
- + + diff --git a/src/app/components/viewState/viewState.service.js b/src/app/components/viewState/viewState.service.js index 03ff651..8ba7fba 100644 --- a/src/app/components/viewState/viewState.service.js +++ b/src/app/components/viewState/viewState.service.js @@ -6,13 +6,14 @@ export class ViewState { constructor($rootScope, $log) { "ngInject"; this.attributeNodeGroup = {}; - this.isNodeIDFiltered = {}; + // this.isNodeIDFiltered = {}; this.isNodeHidden = {}; - this.filterRanges = {}; - this.filterValues = {}; - this.hasFilters = false; + // this.filterRanges = {}; + // this.filterValues = {}; + // this.hasFilters = false; this.$scope = $rootScope; this.$log = $log; + this.colorScales = {}; } ///** @@ -271,6 +272,10 @@ export class ViewState { } } + resetColorScales() { + this.colorScales = {}; + } + //setFilterRange(attribute, attributeNodeGroup, range) { // this.hasFilters = true; // diff --git a/src/app/index.module.js b/src/app/index.module.js index 492e462..da16263 100644 --- a/src/app/index.module.js +++ b/src/app/index.module.js @@ -4,6 +4,7 @@ let production = false; import { config } from './index.config'; import { routerConfig } from './index.route'; import { runBlock } from './index.run'; +import { AdjustableColorScaleDirective } from "../app/components/adjustableColorScale/adjustableColorScale.directive"; import { MainController } from './main/main.controller'; import { GithubContributorService } from '../app/components/githubContributor/githubContributor.service'; import { WebDevTecService } from '../app/components/webDevTec/webDevTec.service'; @@ -21,6 +22,7 @@ import { NumPathsDirective } from "../app/components/numPaths/numPaths.directive import { ModalService } from "../app/components/modals/modals.service.js"; import { ViewState } from "../app/components/viewState/viewState.service"; import { NodeLinkViewDirective } from "../app/components/nodeLinkView/nodeLinkView.directive" +import { ColorScaleService } from "../app/components/colorScale/colorScale.service.js" angular.module('connectivityMatrixJs', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ui.router', 'ui.bootstrap', 'toastr', 'ui.select']) .constant('malarkey', malarkey) @@ -29,6 +31,7 @@ angular.module('connectivityMatrixJs', ['ngAnimate', 'ngCookies', 'ngTouch', 'ng .config(config) .config(routerConfig) .run(runBlock) + .directive('adjustableColorScale', () => new AdjustableColorScaleDirective()) .service('githubContributor', GithubContributorService) .service('webDevTec', WebDevTecService) .service('cmResource', cmResource) @@ -45,4 +48,5 @@ angular.module('connectivityMatrixJs', ['ngAnimate', 'ngCookies', 'ngTouch', 'ng .directive('queryDirective', QueryDirective) .directive('numPathsDirective', () => new NumPathsDirective()) .service('modalService', ModalService) - .directive("nodeLinkViewDirective", () => new NodeLinkViewDirective()) ; + .directive("nodeLinkViewDirective", () => new NodeLinkViewDirective()) + .service('colorScaleService', ColorScaleService); diff --git a/src/app/main/main.controller.js b/src/app/main/main.controller.js index ca754fb..bf755c5 100644 --- a/src/app/main/main.controller.js +++ b/src/app/main/main.controller.js @@ -7,7 +7,7 @@ import {Utils} from "../components/utils/utils"; export class MainController { constructor($log, $timeout, $scope, toastr, cmMatrixViewFactory, cmModelFactory, cmMatrixFactory, cmGraphFactory, - viewState, modalService, database) { + viewState, modalService, colorScaleService, database) { 'ngInject'; this.viewState = viewState; this.$scope = $scope; @@ -17,6 +17,7 @@ export class MainController { this.cmMatrixViewFactory = cmMatrixViewFactory; this.modalService = modalService; this.$timeout = $timeout; + this.colorScaleService = colorScaleService; // Variables for displaying current state of the query to the user. this.hasActiveQuery = false; @@ -43,7 +44,7 @@ export class MainController { this.database = database; let useLargeResult = false; - useLargeResult = true; + //useLargeResult = true; let jsonGraph = null; let jsonMatrix = null; @@ -143,6 +144,7 @@ export class MainController { this.matrixManager = this.cmMatrixViewFactory.createConnectivityMatrixManager(this.matrixContainer, model, this.$scope, this.viewState, this); this.nodeListManager = this.cmMatrixViewFactory.createNodeListManager(this.nodeListContainer, model, this.$scope, this.viewState, this); } else { + this.colorScaleService.resetColorScales(); this.matrixManager.setModel(model); this.nodeListManager.setModel(model); } @@ -186,7 +188,7 @@ export class MainController { this.createMatrix(this.model, this.ui.selectedEncoding); // We are collapsing the matrix cols by an attribute. Make sure that attribute is visibile! - if(this.model.areColsCollapsed) { + if (this.model.areColsCollapsed) { this.matrixManager.setUseAnimation(false); this.matrixManager.matrices.forEach(function (matrix) { matrix.onToggleAttributeRow(this.matrixManager.matrix.attributes.indexOf(attr), true); @@ -203,7 +205,7 @@ export class MainController { } this.createMatrix(this.model, this.ui.selectedEncoding); - if(this.model.areRowsCollapsed) { + if (this.model.areRowsCollapsed) { this.matrixManager.setUseAnimation(false); this.matrixManager.matrices.forEach(function (matrix) { matrix.onToggleAttributeCol(this.matrixManager.matrix.attributes.indexOf(attr), true); @@ -241,7 +243,10 @@ export class MainController { } onMetricChanged(metric, encoding) { + this.colorScaleService.resetColorScales(); + this.matrixManager.matrix.setEncoding(encoding, metric); + this.updateLegend(); } @@ -370,6 +375,7 @@ export class MainController { let isValueSelected = this.viewState.getCategoricalFilter(attribute, nodeAttributeGroup); let modalSuccess = function (selection) { + this.colorScaleService.resetColorScales(); this.viewState.setCategoricalFilter(attribute, nodeAttributeGroup, selection); this.updateLegend(); }.bind(this); @@ -384,6 +390,7 @@ export class MainController { let callback = function (result) { let attribute = result.attribute; let range = result.range; + this.colorScaleService.resetColorScales(); this.viewState.setQuantitativeFilter(attribute, nodeAttributeGroup, range); this.updateLegend(); }.bind(this); @@ -437,5 +444,7 @@ export class MainController { } else { this.ui.hasLegend = false; } + + this.$log.debug(this, this.viewState); } } diff --git a/src/app/main/main.html b/src/app/main/main.html index 6e2e2ee..ad5083e 100644 --- a/src/app/main/main.html +++ b/src/app/main/main.html @@ -2,9 +2,16 @@
+ + + + + + +
@@ -83,6 +90,7 @@
Legend + {{main.viewState.colorScales.keys()}}
@@ -98,6 +106,7 @@ + @@ -106,7 +115,8 @@

Connectivity Matrix

- +

Intermediate Nodes