From ef21e1a6b6bd845557b16aba17311874666bffdd Mon Sep 17 00:00:00 2001 From: cnobre Date: Thu, 30 Mar 2017 18:19:29 -0600 Subject: [PATCH] attempting to create a sample dataset that won't break phovea --- src/app.ts | 3 ++- src/attributeTable.ts | 43 +++++++++++++++++++++++-------------------- src/genealogyTree.ts | 23 +++++++++++++++++------ src/tableManager.ts | 11 ++++++++++- 4 files changed, 52 insertions(+), 28 deletions(-) diff --git a/src/app.ts b/src/app.ts index f827204..ace3692 100644 --- a/src/app.ts +++ b/src/app.ts @@ -54,11 +54,12 @@ export class App { /** ===== PUBLIC CASE ===== */ // await tableManager.loadData('TenFamiliesDescendAnon', 'TenFamiliesAttrAnon'); + await tableManager.loadData('TwoFamiliesDescendAnon', 'TwoFamiliesAttrAnon'); /** ===== PRIVATE CASES - WORKS ONLY WITH THE RIGHT DATA LOCALLY ===== */ - await tableManager.loadData('TenFamiliesDescend', 'TenFamiliesAttr'); + // await tableManager.loadData('TenFamiliesDescend', 'TenFamiliesAttr'); // await tableManager.loadData('AllFamiliesDescend', 'AllFamiliesAttributes'); /** ============= */ diff --git a/src/attributeTable.ts b/src/attributeTable.ts index 60fb6ee..3f35ee5 100644 --- a/src/attributeTable.ts +++ b/src/attributeTable.ts @@ -22,6 +22,7 @@ import { PRIMARY_SELECTED, COL_ORDER_CHANGED_EVENT, POI_SELECTED, + UPDATE_TABLE_EVENT, VIEW_CHANGED_EVENT, TABLE_VIS_ROWS_CHANGED_EVENT } from './tableManager'; @@ -125,7 +126,6 @@ class attributeTable { public async update() { - await this.initData(); this.render(); } @@ -211,7 +211,7 @@ class attributeTable { select('#revertTreeOrder') .attr('visibility', 'hidden') - let t2 = transition('t2').duration(600).ease(easeLinear); + let t2 = transition('test').duration(600).ease(easeLinear); select('#columns').selectAll('.cell') .transition(t2) @@ -242,7 +242,6 @@ class attributeTable { selectAll('.slopeLine') .transition(t2) .attr('d', (d: any) => { - console.log('collapsedWidth') return this.slopeChart({y: d.y, ind: d.ind, width: Config.collapseSlopeChartWidth}) }); @@ -267,8 +266,6 @@ class attributeTable { public async initData() { - console.log('calling initData'); - // this.colOffsets = [-Config.slopeChartWidth]; this.colOffsets = [0]; @@ -372,6 +369,8 @@ class attributeTable { orderedCols.forEach((vector, index) => { const data = finishedPromises[index * 5]; const peopleIDs = finishedPromises[index * 5 + 1]; + + // console.log(peopleIDs); // @@ -396,12 +395,14 @@ class attributeTable { }); //get categories from index.json def let categories; + console.log(allCategories) + //Only need one col for binary categories if (allCategories.length < 3) { if (allCategories.find(d => { - return d === 'Y' + return d === 'Y'; })) { - categories = ['Y'] + categories = ['Y']; } else if (allCategories.find(d => { return d === 'True' })) { @@ -418,6 +419,7 @@ class attributeTable { categories = allCategories; } + // console.log(categories) if (categories.length > 2) { //Add spacing around multicolumn categories let numColsBefore = this.colOffsets.length - 1; @@ -442,7 +444,7 @@ class attributeTable { people.map((person) => { let ind = peopleIDs.indexOf(person) //find this person in the attribute data //If there are only two categories, save both category values in this column. Else, only save the ones that match the category at hand. - if (ind > -1 && (allCategories.length < 3 || (allCategories.length > 2 && data[ind] === cat))) { + if (ind > -1 && (allCategories.length < 3 || ind > -1 && (allCategories.length > 2 && data[ind] === cat))) { colData.push(data[ind]) } else { colData.push(undefined); @@ -543,10 +545,12 @@ class attributeTable { let colData = []; let people = y2personDict[row]; people.map((person) => { + // console.log(data,person) let ind = peopleIDs.indexOf(person) //find this person in the attribute data if (ind > -1) { if (isUndefined(data[ind])){ console.log('problem') + console.log(name,data.size(),peopleIDs.size()); } colData.push(data[ind].toString()) } else { @@ -583,7 +587,8 @@ class attributeTable { //renders the DOM elements private async render() { - let t = transition('t').duration(500).ease(easeLinear); + let t = transition('t').ease(easeLinear); + // let t= this.tableManager.t; let self = this; let y = this.y; @@ -659,7 +664,8 @@ class attributeTable { }); - colSummaries.transition(t) + colSummaries + .transition(t) .attr('transform', (d, i) => { let offset = this.colOffsets[i]; return 'translate(' + offset + ',0)'; @@ -783,7 +789,7 @@ class attributeTable { return d.varName }); - cols.exit().transition(t).attr('opacity', 0).remove(); // should remove on col remove + cols.exit().remove(); // should remove on col remove const colsEnter = cols.enter() .append('g') @@ -793,7 +799,8 @@ class attributeTable { cols = colsEnter.merge(cols)//; //translate columns horizontally to their position; - cols.transition(t) + cols + .transition(t) .attr('transform', (d, i) => { let offset = this.colOffsets[i]; return 'translate(' + offset + ',0)'; @@ -807,13 +814,12 @@ class attributeTable { 'name': d.name, 'data': d.data, 'ind': i, 'type': d.type, 'ids': d.ids, 'stats': d.stats, 'varName': d.name, 'category': d.category, 'vector': d.vector } - console.log('out', out); return out; }), (d: any) => { return d.varName }); - firstCol.exit().transition(t).attr('opacity', 0).remove(); // should remove on col remove + firstCol.exit().attr('opacity', 0).remove(); // should remove on col remove const firstColEnter = firstCol.enter() .append('g') @@ -853,7 +859,6 @@ class attributeTable { firstCellsEnter.attr('opacity', 0); firstCells - .transition(t) .attr('transform', (cell: any, i) => { return ('translate(0, ' + y(this.rowOrder[i]) + ' )'); //the x translation is taken care of by the group this cell is nested in. }); @@ -1671,10 +1676,9 @@ class attributeTable { element.selectAll('.quant_ellipse') .attr('cx', (d: any) => { - if (isNaN(d.value)) { - console.log(d) + if (!isNaN(d.value)) { + return this.xScale(d.value); } - return this.xScale(d.value); ; }) .attr('cy', () => { @@ -1981,7 +1985,6 @@ class attributeTable { events.on(TABLE_VIS_ROWS_CHANGED_EVENT, () => { self.update(); - }); events.on(PRIMARY_SELECTED, (evt, item) => { @@ -1993,7 +1996,7 @@ class attributeTable { }); events.on(COL_ORDER_CHANGED_EVENT, (evt, item) => { - self.update(); + // self.update(); }); } diff --git a/src/genealogyTree.ts b/src/genealogyTree.ts index 0c9dc59..061d39d 100644 --- a/src/genealogyTree.ts +++ b/src/genealogyTree.ts @@ -207,6 +207,8 @@ class GenealogyTree { //Call function that updates the position of all elements in the tree this.update_graph(); + console.log('done updating tree (within update)') + } @@ -646,7 +648,7 @@ class GenealogyTree { }); //remove extra paths - edgePaths.exit().transition().duration(400).style('opacity', 0).remove(); + edgePaths.exit().remove(); let edgePathsEnter = edgePaths .enter() @@ -658,7 +660,7 @@ class GenealogyTree { edgePaths .attr('class', 'edges') - .transition(t) + // .transition(t) .attr('d', (d: Node) => { let maY = Math.round(d.ma.y); let paY = Math.round(d.pa.y); @@ -672,7 +674,7 @@ class GenealogyTree { }); edgePaths - .transition(t.transition().ease(easeLinear)) + .transition(t.transition().duration(1000).ease(easeLinear)) .attr('opacity', 1) .attr('stroke-width', Config.glyphSize / 5); @@ -686,7 +688,7 @@ class GenealogyTree { }); - parentEdgePaths.exit().transition().duration(400).style('opacity', 0).remove(); + parentEdgePaths.exit().style('opacity', 0).remove(); let parentEdgePathsEnter = parentEdgePaths .enter() @@ -784,6 +786,7 @@ class GenealogyTree { aggregateBars + .transition(t.transition().duration(500).ease(easeLinear)) .attr('opacity',1); @@ -843,7 +846,6 @@ class GenealogyTree { .attr('opacity', 0) function highlightRows(d: any) { - console.log('here') function selected(e: Node) { let returnValue = false; @@ -1026,6 +1028,8 @@ class GenealogyTree { couplesLines = couplesLinesEnter.merge(couplesLines) + couplesLines.attr('opacity',0) + couplesLines .attr('x1', (d:any) => { return this.x(d.x) + Config.glyphSize*.9; @@ -1044,6 +1048,9 @@ class GenealogyTree { }) .attr('stroke-width', 2) + + couplesLines.attr('opacity',1); + const kidGridsGroup = select('#genealogyTree').select('#kidGrids'); // Attach backgroundRects @@ -1090,7 +1097,7 @@ class GenealogyTree { return d.uniqueID; }); - allNodes.exit().transition().duration(400).style('opacity', 0).remove(); + allNodes.exit().remove(); const allNodesEnter = allNodes .enter() @@ -1268,6 +1275,8 @@ class GenealogyTree { private renderNodeGroup(element, d: Node) { + const t = transition('t').duration(500).ease(easeLinear); + element .classed('affected', (n: any) => { return n.affected @@ -1512,11 +1521,13 @@ class GenealogyTree { //Size hidden nodes differently //regular nodes element.selectAll('.male') + .transition(t) .attr('width', glyphSize) .attr('height', glyphSize); //unhidden nodes element.selectAll('.female') + .transition(t) .attr('r', radius); //attribute frames diff --git a/src/tableManager.ts b/src/tableManager.ts index ee79846..ca05e59 100644 --- a/src/tableManager.ts +++ b/src/tableManager.ts @@ -5,8 +5,11 @@ import * as range from 'phovea_core/src/range'; import * as events from 'phovea_core/src/event'; import {max, min, mean} from 'd3-array'; import {IStatistics} from 'phovea_core/src/math'; +import {transition} from 'd3-transition'; +import {easeLinear} from 'd3-ease'; import {__awaiter} from 'tslib'; + interface IFamilyInfo { id: number; range: number[]; @@ -81,6 +84,7 @@ export const POI_SELECTED = 'affected_attribute_event'; export const FAMILY_INFO_UPDATED = 'family_stats_updated'; export const COL_ORDER_CHANGED_EVENT = 'col_ordering_changed'; export const FAMILY_SELECTED_EVENT = 'family_selected_event'; +export const UPDATE_TABLE_EVENT = 'update_table' // export const PRIMARY_COLOR = '#335b8e'; @@ -141,7 +145,7 @@ export default class TableManager { // ['KindredID','PersonID', 'Asthma', 'Bipolar', 'sex', 'deceased', 'suicide', 'gen', 'Age', 'FirstBMI', 'AgeFirstBMI', 'race', 'cause_death', 'weapon']; //set of default cols to read in, minimizes load time for large files; private defaultCols: String[] = - ['KindredID', 'RelativeID', 'sex', 'deceased', 'suicide', 'Depression', 'Age1D_Depression', 'Nr.Diag_Depression', 'Asthma', 'Age1D_Asthma', 'Nr.Diag_Asthma', 'Bipolar', 'MaxBMI', 'AgeMaxBMI', 'race','cause_death', 'weapon']; //set of default cols to read in, minimizes load time for large files; + ['KindredID', 'RelativeID', 'sex', 'deceased', 'suicide', 'Depression', 'Age1D_Depression', 'Nr.Diag_Depression', 'Bipolar', 'Age1D_Bipolar', 'Nr.Diag_Bipolar', 'MaxBMI', 'AgeMaxBMI', 'race','cause_death', 'weapon']; //set of default cols to read in, minimizes load time for large files; public colOrder: String[]; //array that keeps track which attributes are displayed in the panel and in the table and their correct order. @@ -159,6 +163,8 @@ export default class TableManager { //Keeps track of selected primary/secondary variable private primaryAttribute: IPrimaryAttribute; + public t = transition('t').duration(600).ease(easeLinear); + /** * Loads the graph data and the attribute data from the server and stores it in the public table variable @@ -659,6 +665,7 @@ export default class TableManager { set activeTableRows(newRows: range.Range) { this._activeTableRows = newRows; this.tableTable = this.table.view(range.join(this._activeTableRows, this.activeTableColumns)); + console.log('firing TABLE VIS ROWS from activeTableRows') events.fire(TABLE_VIS_ROWS_CHANGED_EVENT); } @@ -679,6 +686,8 @@ export default class TableManager { this._activeGraphRows = range.list(newRange); this.refreshActiveGraphView().then(() => { + console.log('firing update table then TABLE VIS ROWS from activeGraphRows') + // events.fire(UPDATE_TABLE_EVENT); events.fire(TABLE_VIS_ROWS_CHANGED_EVENT); });