added event handling for linear map on the circos plot

Author: kiranbandi

build/assets/style.css

@@ -50,9 +50,13 @@ text.cloneMarkerText {
  fill: white;
 }
 
-.tooltip {
- background-color: white;
- padding: 20px;
+.tooltip, .tooltip-circularMap {
+ background-color: #dcd5d5;
+ padding: 10px;
+ font-family: sans-serif;
+ text-transform: capitalize;
+ font-size: 12px;
+ font-weight: bold;
 }
 
 /* ///////////////////////////// Style for Circular Map //////////////////////////////// */
@@ -87,4 +91,8 @@ text.cloneMarkerText {
  font-weight: bold;
  vertical-align: top;
  padding-left: 10px;
+}
+
+.mainContainer {
+ margin: 0px auto;
 }

src/app.js

@@ -3,11 +3,12 @@ import { symbol, symbolCircle, symbolSquare, symbolTriangle, symbolStar } from "
 import axios from 'axios';
 import _ from 'lodash';
 import processGcadOutput from './processGcadOutput';
-import cloneMap from './cloneMap';
 import circularMap from './circularMap';
 import matrix from './matrix';
+import cloneMap from './cloneMap';
 import { blueColor, redColor, greenColor, grayColor } from './colors';
 
+
 // Temporary params fix to test mutltiple input files 
 let fileParamMapper = {
  'argo': 'gcad_argo_uml_output.txt',
@@ -30,7 +31,8 @@ const getParams = query => {
 
 axios.get('assets/files/' + fileParamMapper[getParams(window.location.search).source]).then(function (response) {
 
- let cloneData = processGcadOutput(response);
+ let cloneData = processGcadOutput(response),
+ cloneDataCopy = _.clone(cloneData);
 
  // intial information regarding the project , its version count and the gcad paramters
  d3.select('#root').append('div').attr('class', 'SubHeadingTitleContainer')
@@ -62,6 +64,10 @@ axios.get('assets/files/' + fileParamMapper[getParams(window.location.search).so
  // calling circular map 
  d3.select('#root').append('h3').attr('class', 'SubHeadingTitle plotTitle').text('Circos Plot - Representation of Change Patterns in Clones');
  circularMap(cloneData);
+ // calling clone map for first element - first set as default 
+ d3.select('#root').append('h3').attr('class', 'SubHeadingTitle plotTitle historyTitle').text('Clone Change History');
+ cloneDataCopy.genealogyList = cloneDataCopy.genealogyList.slice(0, 1);
+ cloneMap(cloneDataCopy);
  // calling linear map 
  d3.select('#root').append('h3').attr('class', 'SubHeadingTitle plotTitle').text('Scatter Plot - Representation of Change Patterns in Clones');
  matrix(cloneData);

src/circularMap.js

@@ -2,6 +2,7 @@ import * as d3 from 'd3';
 import { symbol, symbolCircle, symbolSquare, symbolTriangle, symbolStar } from "d3-shape";
 import _ from 'lodash';
 import { blueColor, redColor, greenColor } from './colors';
+import cloneMap from './cloneMap';
 
 export default function (cloneData) {
 
@@ -11,13 +12,11 @@ export default function (cloneData) {
  width = 0.75 * squareRange,
  radius = width / 2;
 
- // if a map exists remove it , could probably handle this better in a future version 
- d3.selectAll('mainContainer').remove()
  let circularMainContainer = d3.select('#root').append('div');
  circularMainContainer.attr('class', 'circularMainContainer')
- .style("width", width + 'px');
+ .style("width", width + 'px').selectAll("*").remove();
+
 
- // 
  let circularRootSVG = circularMainContainer.append('svg')
  .attr('class', 'circularRootSVG')
  .attr('height', width)
@@ -29,6 +28,14 @@ export default function (cloneData) {
  arcPadding = (radius / versionCount) * 0.25,
  arcAnglePadding = 0.05 * (360 / genealogyList.length);
 
+ let tooltip = d3.select("body")
+ .append("div")
+ .attr("class", "tooltip-circularMap")
+ .style("position", "absolute")
+ .style("z-index", "10")
+ .style("visibility", "hidden")
+ .text("");
+
  circularRootSVG.append('g')
  .attr('class', 'centeredGraphic')
  .attr('transform', 'translate(' + radius + "," + radius + ')')
@@ -58,6 +65,17 @@ export default function (cloneData) {
  return d.changeType.indexOf('no_change') > -1 ? greenColor : d.changeType.indexOf('inconsistent_change') > -1 ? redColor : blueColor;
  })
  })
+ .on("mouseover", function (d) {
+ tooltip.html(d.info.replace(/\n/g, '<br />'));
+ return tooltip.style("visibility", "visible");
+ })
+ .on("click", function (d) {
+ d3.select('.historyTitle').remove();
+ d3.select('#root').append('h3').attr('class', 'SubHeadingTitle plotTitle historyTitle').text('Clone Change History');
+ cloneMap({ 'genealogyList': [d], versionCount, uniqueVersionList });
+ })
+ .on("mousemove", function () { return tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px"); })
+ .on("mouseout", function () { return tooltip.style("visibility", "hidden"); })
 
 
 }

src/cloneMap.js

@@ -5,15 +5,14 @@ import { blueColor, redColor, greenColor, grayColor } from './colors';
 
 export default function (cloneData) {
 
- let { genealogyList, projectName, genealogyInfo, versionCount, uniqueVersionList } = cloneData;
-
- let paddingHeightPerGroup = 40;
- let marginPadding = 80;
- let height = (genealogyList.length * paddingHeightPerGroup) + 100;
- let width = document.body.clientWidth - marginPadding;
+ let { genealogyList, versionCount, uniqueVersionList } = cloneData,
+ paddingHeightPerGroup = 20,
+ height = (genealogyList.length * paddingHeightPerGroup) + 100,
+ squareRange = document.body.clientWidth,
+ width = squareRange - (squareRange / 10);
 
  // if a map exists remove it , could probably handle this better in a future version 
- d3.selectAll('mainContainer').remove()
+ d3.selectAll('.mainContainer').remove();
 
  let mainContainer = d3.select('#root').append('div')
  mainContainer.attr('class', 'mainContainer')
@@ -28,6 +27,7 @@ export default function (cloneData) {
  .append('h2')
  .style("width", width / versionCount + 'px')
  .text((d) => d)
+ .style('font-size', (width / versionCount) * 0.15 + 'px')
 
  let contentContainer = mainContainer.append('svg')
  .attr('class', 'contentContainer')
@@ -38,10 +38,7 @@ export default function (cloneData) {
  .data(genealogyList)
  .enter()
  .append('g')
- .attr('transform', (d, i) => "translate(0," + paddingHeightPerGroup * i + ")")
- .on('mouseover', function () {
- debugger;
- })
+ .attr('transform', (d, i) => "translate(0," + paddingHeightPerGroup * i + ")");
 
  genealogySetGroup.selectAll('.changeLine').data((d) => d.set)
  .enter()
@@ -84,12 +81,7 @@ export default function (cloneData) {
  .append('path')
  .attr("class", 'cloneMarker ')
  .attr("d", symbol().size(375).type((d, i) => symbolCircle))
- .style("fill", (d, i) => {
- if (d.cloneType.length > 1) {
- return grayColor;
- }
- else this.remove();
- })
+ .style("fill", (d, i) => (d.cloneType.length > 1) ? grayColor : 'white')
  .attr("transform", function (d, i) {
  return "translate(" + (((width / versionCount) * i) + (width / (versionCount * 2))) + "," + paddingHeightPerGroup + ")";
  })
@@ -105,5 +97,7 @@ export default function (cloneData) {
  return "translate(" + (((width / versionCount) * i) + (width / (versionCount * 2)) - 4) + "," + (paddingHeightPerGroup + 5) + ")";
  });
 
+
+
 }