Skip to content

Commit

Permalink
Attempt to debug chart inconsistency
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zaknarfen
Zaknarfen committed Oct 27, 2018
1 parent 0e2cd70 commit db347d4
Show file tree
Hide file tree
Showing 7 changed files with 233 additions and 179 deletions.
95 changes: 50 additions & 45 deletions src/app/charts/box-plot/box-plot-view/box-plot-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {
ViewChild,
ElementRef,
Input,
OnDestroy
OnDestroy,
AfterViewInit
} from '@angular/core';

import { PlatformLocation } from '@angular/common';
Expand All @@ -26,7 +27,7 @@ import * as dc from 'dc';
styleUrls: [ './box-plot-view.component.scss' ],
encapsulation: ViewEncapsulation.None
})
export class BoxPlotViewComponent implements OnInit, OnDestroy {
export class BoxPlotViewComponent implements OnInit, OnDestroy, AfterViewInit {
@Input() title: string;
@Input() chart: any;
@Input() info: any;
Expand Down Expand Up @@ -85,7 +86,9 @@ export class BoxPlotViewComponent implements OnInit, OnDestroy {
this.geneService.setPreviousGene(this.geneService.getCurrentGene());
}
});
}

ngAfterViewInit() {
this.initChart();
}

Expand All @@ -102,51 +105,53 @@ export class BoxPlotViewComponent implements OnInit, OnDestroy {
);
this.group = this.dataService.getGroup(this.info);

this.chart = dc.boxPlot(this.boxPlot.nativeElement);

this.chart
.dimension(this.dim)
.yAxisLabel('LOG 2 FOLD CHANGE', 20)
.group(this.group)
.renderTitle(true)
.showOutliers(false)
.dataWidthPortion(0.1)
.dataOpacity(0)
.colors('transparent')
.on('filtered', (chart) => {
this.renderRedCircle(chart, true);
})
.tickFormat(() => '')
.elasticY(true)
.yRangePadding(this.rcRadius * 1.1);

if (this.info.attr !== 'fc') { this.chart.yAxis().tickFormat(d3.format('.1e')); }
this.chart.xAxis().tickFormat('');

// Remove filtering for these charts
this.chart.filter = function() {
//
};
this.chart.margins().left = 70;

this.registerChartEvent(this.chart, 'postRedraw');
this.registerChartEvent(this.chart, 'postRender');

this.chart.render();
this.getChartPromise().then((chart: any) => {
this.chart = chart;

if (this.info.attr !== 'fc') { chart.yAxis().tickFormat(d3.format('.1e')); }
chart.xAxis().tickFormat('');

// Remove filtering for these charts
chart.filter = function() {
//
};
chart.margins().left = 70;

chart.render();
});
}

// A custom renderlet function for this chart, allows us to change
// what happens to the chart after rendering
registerChartEvent(chartEl: dc.BoxPlot, type: string = 'renderlet') {
const self = this;
// Using a different name for the chart variable here so it's not shadowed
chartEl.on(type, function(chart) {
chart.selectAll('rect.box')
.attr('rx', self.boxRadius);

// Renders the selected gene circle
(type === 'postRender') ? self.renderRedCircle(chart) :
self.renderRedCircle(chart, true);
getChartPromise(): Promise<dc.BoxPlot> {
return new Promise((resolve, reject) => {
const self = this;
const chartInst = dc.boxPlot(this.boxPlot.nativeElement)
.dimension(this.dim)
.yAxisLabel('LOG 2 FOLD CHANGE', 20)
.group(this.group)
.renderTitle(true)
['showOutliers'](false)
.dataWidthPortion(0.1)
.dataOpacity(0)
.colors('transparent')
.tickFormat(() => '')
.elasticY(true)
.yRangePadding(this.rcRadius * 1.1)
.on('postRender', (chart) => {
chart.selectAll('rect.box')
.attr('rx', self.boxRadius);

// Renders the selected gene circle
self.renderRedCircle(chart);
})
.on('postRedraw', (chart) => {
chart.selectAll('rect.box')
.attr('rx', self.boxRadius);

// Renders the selected gene circle
self.renderRedCircle(chart, true);
});

resolve(chartInst);
});
}

Expand Down
3 changes: 2 additions & 1 deletion src/app/charts/row-chart/row-chart-view/row-chart-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<div #studies class="col-md-2 col-sm-4 col-4 sc">
</div>
<div class="col-md-10 col-sm-8 col-8 rc">
<div #chart class="rc" [ngStyle]="displayChart()"></div>
<!--<div #chart class="rc" [ngStyle]="displayChart()"></div>-->
<div #chart class="rc"></div>
</div>
</div>
134 changes: 81 additions & 53 deletions src/app/charts/row-chart/row-chart-view/row-chart-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,6 @@ export class RowChartViewComponent implements OnInit, OnDestroy, AfterViewInit {
}

initChart() {
const self = this;
this.info = this.chartService.getChartInfo(this.label);
this.dim = this.dataService.getDimension(
this.info,
Expand All @@ -113,62 +112,89 @@ export class RowChartViewComponent implements OnInit, OnDestroy, AfterViewInit {
console.log(this.group.all());

this.title = this.info.title;
this.chart = dc.rowChart(this.rowChart.nativeElement);
this.chart
.gap(4)
.title(function(d) {
return 'Log Fold Change: ' + self.dataService.getSignificantValue(+d.value.logfc);
})
.valueAccessor((d) => {
return self.dataService.getSignificantValue(+d.value.logfc);
})
.label((d) => {
return d.key;
})
.on('postRedraw', async (chart) => {
//setTimeout(() => {
await self.updateChartExtras(chart);
//}, 5000);
})
.on('preRedraw', async (chart) => {
await self.updateXDomain(chart);
await self.updateChartExtras(chart);
})
//.elasticX(true)
.othersGrouper(null)
.ordinalColors(this.colors)
.dimension(this.dim)
.group(this.group)
.transitionDuration(0);

// Increase bottom margin by 20 to place a label there, default is 30
this.chart.margins().left = 50;
this.chart.margins().bottom = 50;

// Removes the click event for the rowChart to prevent filtering
this.chart.onClick = () => {
//
};

// Register the row chart renderlet
//this.registerChartEvent(this.chart);

this.chart.render();
this.getChartPromise().then((chart) => {
// Increase bottom margin by 20 to place a label there, default is 30
chart.margins().left = 50;
chart.margins().bottom = 50;

// Removes the click event for the rowChart to prevent filtering
chart.onClick = () => {
//
};

chart.render();
this.chart = chart;
});
}

getChartPromise(): Promise<dc.RowChart> {
return new Promise((resolve, reject) => {
const self = this;
const chartInst = dc.rowChart(self.rowChart.nativeElement)
.gap(4)
.title(function(d) {
return 'Log Fold Change: ' +
self.dataService.getSignificantValue(+d.value.logfc);
})
.valueAccessor((d) => {
return self.dataService.getSignificantValue(+d.value.logfc);
})
.label((d) => {
return d.key;
})
.on('postRedraw', function(chart) {
console.log('post redraw');
console.log(chart.svg());
console.log(chart.width());
console.log(chart.height());
if (self.display) {
self.updateChartExtras(
chart,
chart.svg(),
chart.width(),
chart.height()
);
}
self.updateChartExtras(
chart,
chart.svg(),
chart.width(),
chart.height()
);
})
.on('preRedraw', function(chart) {
console.log('pre redraw');
console.log(chart.svg());
console.log(chart.width());
console.log(chart.height());
self.updateXDomain(chart);

})
.othersGrouper(null)
.ordinalColors(this.colors)
.dimension(this.dim)
.group(this.group)
.transitionDuration(0);

resolve(chartInst);
});
}

addXLabel(chart: dc.RowChart, text: string) {
const textSelection = chart.svg()
addXLabel(chart: dc.RowChart, text: string, svg?: any, width?: number, height?: number) {
const textSelection = (svg || chart.svg())
.append('text')
.attr('class', 'x-axis-label')
.attr('text-anchor', 'middle')
.attr('x', chart.width() / 2)
.attr('y', chart.height() - 10)
/*.attr('x', (width || chart.width()) / 2)
.attr('y', (height || chart.height()) - 10)*/
.attr('x', width / 2)
.attr('y', height - 10)
.text(text);

this.adjustXLabel(chart, textSelection);
this.adjustXLabel(chart, textSelection, width, height);
}

adjustXLabel(chart: dc.RowChart, sel: any) {
adjustXLabel(chart: dc.RowChart, sel: any, width?: number, height?: number) {
const svgEl = (sel.node() as SVGGraphicsElement);
const textDims = svgEl.getBBox();

Expand All @@ -177,11 +203,13 @@ export class RowChartViewComponent implements OnInit, OnDestroy, AfterViewInit {
// of 15 pixels. We subtract them from the svg size, get the middle point
// then add back the left translate to get the correct center
sel
.attr('x', ((chart.width() - 45) / 2) + 30)
.attr('y', chart.height() - Math.ceil(textDims.height) / 2);
/*.attr('x', ((chart.width() - 45) / 2) + 30)
.attr('y', chart.height() - Math.ceil(textDims.height) / 2);*/
.attr('x', ((width - 45) / 2) + 30)
.attr('y', height - Math.ceil(textDims.height) / 2);
}

updateChartExtras(chart: dc.RowChart) {
updateChartExtras(chart: dc.RowChart, svg?: any, width?: number, height?: number) {
const self = this;

const rectHeight = parseInt(chart.select('g.row rect').attr('height'), 10);
Expand All @@ -206,7 +234,7 @@ export class RowChartViewComponent implements OnInit, OnDestroy, AfterViewInit {
self.insertTextsInRows(chart, 'confidence-text-right');

// Add a label to the x axis
self.addXLabel(this.chart, 'LOG FOLD CHANGE');
self.addXLabel(this.chart, 'LOG FOLD CHANGE', svg, width, height);
} else {
// This part will be called on redraw after filtering, so at this point
// we just need to move the lines to the correct position again. First
Expand All @@ -220,7 +248,7 @@ export class RowChartViewComponent implements OnInit, OnDestroy, AfterViewInit {
});

// Adjust the x label
this.adjustXLabel(chart, chart.select('text.x-axis-label'));
this.adjustXLabel(chart, chart.select('text.x-axis-label'), width, height);
}

// Finally redraw the lines in each row
Expand Down
Loading

0 comments on commit db347d4

Please sign in to comment.