From 5d03937ac41d9500db862a418b0448a48bf2f1dc Mon Sep 17 00:00:00 2001 From: Ethan Kerzner Date: Tue, 2 Aug 2016 15:40:57 -0600 Subject: [PATCH 1/7] Add adjustable colors skeleton. --- .../adjustableColorScale.directive.html | 1 + .../adjustableColorScale.directive.js | 27 +++++++++++++++++++ src/app/index.module.js | 2 ++ src/app/main/main.html | 2 ++ 4 files changed, 32 insertions(+) create mode 100644 src/app/components/adjustableColorScale/adjustableColorScale.directive.html create mode 100644 src/app/components/adjustableColorScale/adjustableColorScale.directive.js diff --git a/src/app/components/adjustableColorScale/adjustableColorScale.directive.html b/src/app/components/adjustableColorScale/adjustableColorScale.directive.html new file mode 100644 index 0000000..e965047 --- /dev/null +++ b/src/app/components/adjustableColorScale/adjustableColorScale.directive.html @@ -0,0 +1 @@ +Hello diff --git a/src/app/components/adjustableColorScale/adjustableColorScale.directive.js b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js new file mode 100644 index 0000000..7cd257e --- /dev/null +++ b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js @@ -0,0 +1,27 @@ +export function AdjustableColorScaleDirective() { + 'ngInject'; + + let directive = { + restrict: 'E', + templateUrl: 'app/components/adjustableColorScale/adjustableColorScale.directive.html', + scope: { + submit: '&' + }, + controller: AdjustableColorScaleController, + controllerAs: 'controller', + bindToController: true + }; + + return directive; +} + +class AdjustableColorScaleController { + constructor($scope) { + 'ngInject'; + // the default query gets populated in main's constructor + this.defaultQuery = $scope.$parent.main.defaultQuery; + + this.cypherQuery = this.defaultQuery; + } + +} diff --git a/src/app/index.module.js b/src/app/index.module.js index 492e462..ae94d6e 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'; @@ -29,6 +30,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) diff --git a/src/app/main/main.html b/src/app/main/main.html index 6e2e2ee..d511373 100644 --- a/src/app/main/main.html +++ b/src/app/main/main.html @@ -98,6 +98,8 @@ + + From c204e55a02a171a407ff2452a3cf590f1b4a7908 Mon Sep 17 00:00:00 2001 From: kerzner Date: Tue, 9 Aug 2016 12:58:42 -0600 Subject: [PATCH 2/7] Add scaffolding for color scales. --- .../connectivityMatrixView/cmMatrixBase.js | 73 +++++++++++++++++-- .../connectivityMatrixView/cmMatrixView.js | 2 + .../nodeList/cmNodeListView.js | 2 + .../visitors/cmColorMapVisitor.js | 26 +------ .../components/viewState/viewState.service.js | 13 +++- src/app/main/main.html | 1 + 6 files changed, 83 insertions(+), 34 deletions(-) diff --git a/src/app/components/connectivityMatrixView/cmMatrixBase.js b/src/app/components/connectivityMatrixView/cmMatrixBase.js index b0f7189..8dd7293 100644 --- a/src/app/components/connectivityMatrixView/cmMatrixBase.js +++ b/src/app/components/connectivityMatrixView/cmMatrixBase.js @@ -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); @@ -881,7 +884,33 @@ export class cmMatrixBase extends SvgGroupElement { .attr("data-is-sorted", ''); } + setColorMaps(nodeColorScale, setColorScale) { + let cellWidth = this.colWidth; + let cellHeight = this.rowHeight; + + let visitor = new cmColorMapVisitor(nodeColorScale, setColorScale, 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); + + this.legend = new cmColorMapLegend(visitor); + } + + setEncoding(encoding, metric) { + if (!this.isDataMatrix) { + return; + } + this.encoding = encoding; this.metric = metric; let preprocessor = undefined; @@ -915,17 +944,47 @@ export class cmMatrixBase extends SvgGroupElement { 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); - 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); + let nodeColorScale = null; + let setColorScale = null; + let nodeColorScaleIndex = 0; + let setColorScaleIndex = 1; + if (this.viewState.hasColorMaps) { + + nodeColorScale = this.viewState.colorScales[nodeColorScaleIndex]; + setColorScale = this.viewState.colorScales[setColorScaleIndex]; + } else { + let colorRange = cmColorMapVisitor.getColorScaleRange(colorbrewer.Blues, preprocessor.setRange); + let domain = [0, 1]; + + if (colorRange.length != 1) { + domain = preprocessor.setRange; + } + + 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; + } + + nodeColorScale = d3.scale.quantize() + .range(colorRange) + .domain(domain); + + this.viewState.colorScales[nodeColorScaleIndex] = nodeColorScale; + this.viewState.colorScales[setColorScaleIndex] = setColorScale; + this.viewState.hasColorMaps = true; + } - this.legend = new cmColorMapLegend(visitor); + this.setColorMaps(nodeColorScale, setColorScale); } diff --git a/src/app/components/connectivityMatrixView/cmMatrixView.js b/src/app/components/connectivityMatrixView/cmMatrixView.js index 08e606f..edcf7fd 100644 --- a/src/app/components/connectivityMatrixView/cmMatrixView.js +++ b/src/app/components/connectivityMatrixView/cmMatrixView.js @@ -11,6 +11,8 @@ export class cmMatrixView extends cmMatrixBase { this.colWidthLabel = 0; this.colWidthControl = 0; this.rowHeightAttr = 0; + + this.isDataMatrix = true; this.setModel(model); } diff --git a/src/app/components/connectivityMatrixView/nodeList/cmNodeListView.js b/src/app/components/connectivityMatrixView/nodeList/cmNodeListView.js index ca10e24..288427f 100644 --- a/src/app/components/connectivityMatrixView/nodeList/cmNodeListView.js +++ b/src/app/components/connectivityMatrixView/nodeList/cmNodeListView.js @@ -12,6 +12,8 @@ export class cmNodeListView extends cmNodeListBase { this.colWidthControl = 0; this.rowHeightAttr = 0; + this.isDataMatrix = true; + this.setModel(model); } diff --git a/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js b/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js index f2ea515..46104aa 100644 --- a/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js +++ b/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js @@ -44,32 +44,12 @@ export class cmColorMapPreprocessor extends cmColorMapVisitorBase { } export class cmColorMapVisitor extends cmColorMapVisitorBase { - constructor(preprocessor, width, height) { + constructor(nodeColorScale, setColorScale, 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.nodeColorScale = nodeColorScale; + this.setColorScale = setColorScale; } apply(cell) { 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/main/main.html b/src/app/main/main.html index d511373..1b890c8 100644 --- a/src/app/main/main.html +++ b/src/app/main/main.html @@ -83,6 +83,7 @@
Legend + {{main.viewState.colorScales}}
From 82edf7a66ab3c4876a806df624096fd3457cfce6 Mon Sep 17 00:00:00 2001 From: Ethan Kerzner Date: Fri, 12 Aug 2016 09:22:45 -0600 Subject: [PATCH 3/7] Adjustable color scale scaffolding. --- .../adjustableColorScale.directive.html | 1 + .../adjustableColorScale.directive.js | 16 +++-- .../colorScale/colorScale.service.js | 60 +++++++++++++++++ .../connectivityMatrixView/cmMatrixBase.js | 65 ++++++------------- .../connectivityMatrixView/cmMatrixView.js | 6 +- .../cmMatrixViewFactory.js | 7 +- .../connectivityMatrixView/cmMatrixWrapper.js | 14 ++-- .../connectivityMatrixView/cmWrapperBase.js | 3 +- .../nodeList/cmNodeListBase.js | 4 +- .../nodeList/cmNodeListView.js | 4 +- .../nodeList/cmNodeListWrapper.js | 8 +-- .../visitors/cmColorMapVisitor.js | 20 ++---- src/app/index.module.js | 6 +- src/app/main/main.controller.js | 2 + src/app/main/main.html | 7 +- 15 files changed, 132 insertions(+), 91 deletions(-) create mode 100644 src/app/components/colorScale/colorScale.service.js diff --git a/src/app/components/adjustableColorScale/adjustableColorScale.directive.html b/src/app/components/adjustableColorScale/adjustableColorScale.directive.html index e965047..db03517 100644 --- a/src/app/components/adjustableColorScale/adjustableColorScale.directive.html +++ b/src/app/components/adjustableColorScale/adjustableColorScale.directive.html @@ -1 +1,2 @@ Hello +{{controller.colorScale}} diff --git a/src/app/components/adjustableColorScale/adjustableColorScale.directive.js b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js index 7cd257e..70ca1b1 100644 --- a/src/app/components/adjustableColorScale/adjustableColorScale.directive.js +++ b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js @@ -5,7 +5,7 @@ export function AdjustableColorScaleDirective() { restrict: 'E', templateUrl: 'app/components/adjustableColorScale/adjustableColorScale.directive.html', scope: { - submit: '&' + colorScaleIndex: '=' }, controller: AdjustableColorScaleController, controllerAs: 'controller', @@ -16,12 +16,20 @@ export function AdjustableColorScaleDirective() { } class AdjustableColorScaleController { - constructor($scope) { + constructor($scope, $log) { 'ngInject'; + this.$log = $log; + this.$scope = $scope; // the default query gets populated in main's constructor - this.defaultQuery = $scope.$parent.main.defaultQuery; + this.$log.debug("Adjustable color scale controller", this); - this.cypherQuery = this.defaultQuery; + this.$scope.$on("setColorScale", this.setColorScale.bind(this)); + } + + setColorScale(signal, colorScaleIndex, colorScale) { + if (colorScaleIndex == this.colorScaleIndex) { + this.$log.debug(this, "received color scale", colorScale); + } } } diff --git a/src/app/components/colorScale/colorScale.service.js b/src/app/components/colorScale/colorScale.service.js new file mode 100644 index 0000000..a16d0a9 --- /dev/null +++ b/src/app/components/colorScale/colorScale.service.js @@ -0,0 +1,60 @@ +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); + } +} diff --git a/src/app/components/connectivityMatrixView/cmMatrixBase.js b/src/app/components/connectivityMatrixView/cmMatrixBase.js index 8dd7293..7115543 100644 --- a/src/app/components/connectivityMatrixView/cmMatrixBase.js +++ b/src/app/components/connectivityMatrixView/cmMatrixBase.js @@ -48,7 +48,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 +56,7 @@ export class cmMatrixBase extends SvgGroupElement { this.$scope = scope; this.mainController = mainController; this.viewState = viewState; + this.colorScaleService = colorScaleService; this.colWidth = 15; this.rowHeight = 15; @@ -130,6 +131,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) { @@ -884,11 +887,11 @@ export class cmMatrixBase extends SvgGroupElement { .attr("data-is-sorted", ''); } - setColorMaps(nodeColorScale, setColorScale) { + setColorScale(signal, colorScaleIndex, colorScale) { let cellWidth = this.colWidth; let cellHeight = this.rowHeight; - let visitor = new cmColorMapVisitor(nodeColorScale, setColorScale, cellWidth, cellHeight); + let visitor = new cmColorMapVisitor(colorScale, colorScaleIndex, cellWidth, cellHeight); let clicked = this.onCellClicked.bind(this); let mouseover = this.onCellMouseOver.bind(this); @@ -901,11 +904,8 @@ export class cmMatrixBase extends SvgGroupElement { visitor.setMetricFunction(metricFunction); visitor.graph = this.model.graph; this.applyVisitor(visitor); - - this.legend = new cmColorMapLegend(visitor); } - setEncoding(encoding, metric) { if (!this.isDataMatrix) { return; @@ -939,55 +939,28 @@ export class cmMatrixBase extends SvgGroupElement { this.legend = undefined; } else if (encoding == "colormap") { - 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); + if (this.colorScaleService.hasColorScales) { - let nodeColorScale = null; - let setColorScale = null; - let nodeColorScaleIndex = 0; - let setColorScaleIndex = 1; - if (this.viewState.hasColorMaps) { + this.setColorScale(null, 0, this.colorScaleService.colorScales[0]); + this.setColorScale(null, 1, this.colorScaleService.colorScales[1]); - nodeColorScale = this.viewState.colorScales[nodeColorScaleIndex]; - setColorScale = this.viewState.colorScales[setColorScaleIndex]; } else { - let colorRange = cmColorMapVisitor.getColorScaleRange(colorbrewer.Blues, preprocessor.setRange); - let domain = [0, 1]; - if (colorRange.length != 1) { - domain = preprocessor.setRange; - } - - setColorScale = d3.scale.quantize() - .range(colorRange) - .domain(domain); + let metricFunction = cmMatrixBase.getMetricFunction(metric); - colorRange = cmColorMapVisitor.getColorScaleRange(colorbrewer.Greens, preprocessor.nodeRange); - domain = [0, 1]; - if (colorRange.length != 1) { - domain = preprocessor.nodeRange; - } + preprocessor = new cmColorMapPreprocessor(); + preprocessor.setPathFilterFunction(this.viewState.getFilterPathFunction()); + preprocessor.setMetricFunction(metricFunction); - nodeColorScale = d3.scale.quantize() - .range(colorRange) - .domain(domain); + // TODO - why does preprocessor get a graph? + preprocessor.graph = this.model.graph; + this.applyVisitor(preprocessor); - this.viewState.colorScales[nodeColorScaleIndex] = nodeColorScale; - this.viewState.colorScales[setColorScaleIndex] = setColorScale; - this.viewState.hasColorMaps = true; + this.colorScaleService.hasColorScales = true; + this.colorScaleService.createColorScale(0, preprocessor.setRange); + this.colorScaleService.createColorScale(1, preprocessor.nodeRange); } - - this.setColorMaps(nodeColorScale, setColorScale); - } - } /** diff --git a/src/app/components/connectivityMatrixView/cmMatrixView.js b/src/app/components/connectivityMatrixView/cmMatrixView.js index edcf7fd..b16daff 100644 --- a/src/app/components/connectivityMatrixView/cmMatrixView.js +++ b/src/app/components/connectivityMatrixView/cmMatrixView.js @@ -4,14 +4,14 @@ 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 288427f..5225c72 100644 --- a/src/app/components/connectivityMatrixView/nodeList/cmNodeListView.js +++ b/src/app/components/connectivityMatrixView/nodeList/cmNodeListView.js @@ -4,8 +4,8 @@ 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; 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 46104aa..0e45b0e 100644 --- a/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js +++ b/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js @@ -44,12 +44,11 @@ export class cmColorMapPreprocessor extends cmColorMapVisitorBase { } export class cmColorMapVisitor extends cmColorMapVisitorBase { - constructor(nodeColorScale, setColorScale, width, height) { + constructor(colorScale, colorMapIndex, width, height) { super(width, height); this.visitDataCells = true; - - this.nodeColorScale = nodeColorScale; - this.setColorScale = setColorScale; + this.colorMapIndex = colorMapIndex; + this.colorScale = colorScale; } apply(cell) { @@ -59,9 +58,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") @@ -93,14 +93,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]]; diff --git a/src/app/index.module.js b/src/app/index.module.js index ae94d6e..da16263 100644 --- a/src/app/index.module.js +++ b/src/app/index.module.js @@ -22,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) @@ -30,7 +31,7 @@ angular.module('connectivityMatrixJs', ['ngAnimate', 'ngCookies', 'ngTouch', 'ng .config(config) .config(routerConfig) .run(runBlock) - .directive( 'adjustableColorScale', () => new AdjustableColorScaleDirective() ) + .directive('adjustableColorScale', () => new AdjustableColorScaleDirective()) .service('githubContributor', GithubContributorService) .service('webDevTec', WebDevTecService) .service('cmResource', cmResource) @@ -47,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..6449998 100644 --- a/src/app/main/main.controller.js +++ b/src/app/main/main.controller.js @@ -437,5 +437,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 1b890c8..40e5a71 100644 --- a/src/app/main/main.html +++ b/src/app/main/main.html @@ -83,7 +83,7 @@
Legend - {{main.viewState.colorScales}} + {{main.viewState.colorScales.keys()}}
@@ -99,7 +99,7 @@ - + @@ -109,7 +109,8 @@

Connectivity Matrix

- +

Intermediate Nodes

 From f8fe105dc47b901fcbce0dcc19d446b96a78c59a Mon Sep 17 00:00:00 2001 From: Ethan Kerzner Date: Fri, 12 Aug 2016 17:07:05 -0600 Subject: [PATCH 4/7] Refine adjustable color scale. --- .../adjustableColorScale.css | 16 ++ .../adjustableColorScale.directive.html | 8 +- .../adjustableColorScale.directive.js | 162 +++++++++++++++++- .../colorScale/colorScale.service.js | 6 + src/app/main/main.controller.js | 10 +- src/app/main/main.html | 2 +- 6 files changed, 192 insertions(+), 12 deletions(-) create mode 100644 src/app/components/adjustableColorScale/adjustableColorScale.css 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 index db03517..5a7c6af 100644 --- a/src/app/components/adjustableColorScale/adjustableColorScale.directive.html +++ b/src/app/components/adjustableColorScale/adjustableColorScale.directive.html @@ -1,2 +1,6 @@ -Hello -{{controller.colorScale}} + +
+ Legend +
+ + diff --git a/src/app/components/adjustableColorScale/adjustableColorScale.directive.js b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js index 70ca1b1..d0ba232 100644 --- a/src/app/components/adjustableColorScale/adjustableColorScale.directive.js +++ b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js @@ -9,27 +9,177 @@ export function AdjustableColorScaleDirective() { }, controller: AdjustableColorScaleController, controllerAs: 'controller', - bindToController: true + bindToController: true, + link: linkFn }; + function linkFn(scope, element) { + scope.controller.element = element; + } + return directive; } class AdjustableColorScaleController { - constructor($scope, $log) { + constructor($scope, $log, colorScaleService) { 'ngInject'; this.$log = $log; this.$scope = $scope; - // the default query gets populated in main's constructor - this.$log.debug("Adjustable color scale controller", this); - + 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.$log.debug(this, "received color scale", colorScale); + + 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") + .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 index a16d0a9..9f507a7 100644 --- a/src/app/components/colorScale/colorScale.service.js +++ b/src/app/components/colorScale/colorScale.service.js @@ -57,4 +57,10 @@ export class ColorScaleService { 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/main/main.controller.js b/src/app/main/main.controller.js index 6449998..abc217e 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; @@ -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); @@ -370,6 +372,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 +387,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); diff --git a/src/app/main/main.html b/src/app/main/main.html index 40e5a71..acbe30a 100644 --- a/src/app/main/main.html +++ b/src/app/main/main.html @@ -5,6 +5,7 @@ + @@ -99,7 +100,6 @@ - From 0cc418cb647a4e08453805549bce5d2350be8d86 Mon Sep 17 00:00:00 2001 From: Ethan Kerzner Date: Sat, 13 Aug 2016 11:35:01 -0600 Subject: [PATCH 5/7] Fix layout of query header. --- src/app/components/query/query.css | 6 +++++- src/app/components/query/query.directive.html | 13 ++++--------- src/app/main/main.controller.js | 5 ++++- src/app/main/main.html | 6 ++++++ 4 files changed, 19 insertions(+), 11 deletions(-) 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/main/main.controller.js b/src/app/main/main.controller.js index abc217e..bf755c5 100644 --- a/src/app/main/main.controller.js +++ b/src/app/main/main.controller.js @@ -44,7 +44,7 @@ export class MainController { this.database = database; let useLargeResult = false; - useLargeResult = true; + //useLargeResult = true; let jsonGraph = null; let jsonMatrix = null; @@ -243,7 +243,10 @@ export class MainController { } onMetricChanged(metric, encoding) { + this.colorScaleService.resetColorScales(); + this.matrixManager.matrix.setEncoding(encoding, metric); + this.updateLegend(); } diff --git a/src/app/main/main.html b/src/app/main/main.html index acbe30a..ad5083e 100644 --- a/src/app/main/main.html +++ b/src/app/main/main.html @@ -2,10 +2,16 @@
+ + + + + +
From 851c731501663876a4b3c7905ddd2a95edbabca1 Mon Sep 17 00:00:00 2001 From: Ethan Kerzner Date: Sat, 13 Aug 2016 11:39:21 -0600 Subject: [PATCH 6/7] Fix gulp errors and remove dead code. --- .../adjustableColorScale.directive.js | 3 + .../colorScale/colorScale.service.js | 2 + .../connectivityMatrixView/cmMatrixBase.js | 1 - .../visitors/cmColorMapVisitor.js | 69 ------------------- 4 files changed, 5 insertions(+), 70 deletions(-) diff --git a/src/app/components/adjustableColorScale/adjustableColorScale.directive.js b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js index d0ba232..5444e3f 100644 --- a/src/app/components/adjustableColorScale/adjustableColorScale.directive.js +++ b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js @@ -1,3 +1,6 @@ +/*globals d3 + */ + export function AdjustableColorScaleDirective() { 'ngInject'; diff --git a/src/app/components/colorScale/colorScale.service.js b/src/app/components/colorScale/colorScale.service.js index 9f507a7..0bfc29d 100644 --- a/src/app/components/colorScale/colorScale.service.js +++ b/src/app/components/colorScale/colorScale.service.js @@ -1,3 +1,5 @@ +/*globals d3, colorbrewer + */ export class ColorScaleService { /** diff --git a/src/app/components/connectivityMatrixView/cmMatrixBase.js b/src/app/components/connectivityMatrixView/cmMatrixBase.js index 7115543..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" diff --git a/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js b/src/app/components/connectivityMatrixView/visitors/cmColorMapVisitor.js index 0e45b0e..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 { @@ -105,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'); - } -} From d12cb3622fee0800edccaf5a6249bc99ab4ef17a Mon Sep 17 00:00:00 2001 From: Ethan Kerzner Date: Sat, 13 Aug 2016 11:46:42 -0600 Subject: [PATCH 7/7] Make ends of color scale not adjustable. --- .../adjustableColorScale/adjustableColorScale.directive.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/components/adjustableColorScale/adjustableColorScale.directive.js b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js index 5444e3f..9b4920f 100644 --- a/src/app/components/adjustableColorScale/adjustableColorScale.directive.js +++ b/src/app/components/adjustableColorScale/adjustableColorScale.directive.js @@ -176,6 +176,9 @@ class AdjustableColorScaleController { 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")