Skip to content

Commit

Permalink
reworked createAutomatically for >= 3 attributes to work with tsne
Browse files Browse the repository at this point in the history
  • Loading branch information
@richardwolfmayr
richardwolfmayr committed Sep 25, 2023
1 parent ba27f53 commit de3629f
Show file tree
Hide file tree
Showing 3 changed files with 210 additions and 217 deletions.
192 changes: 95 additions & 97 deletions src/Taskview/tasks/Filter.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {select, Selection} from 'd3v7';
import {select} from 'd3v7';
import { ICohort } from '../../app/interfaces';
import { IAttribute } from '../../data/IAttribute';
import {getAnimatedLoadingText, INewCohortDesc, log} from '../../util';
Expand All @@ -11,7 +11,6 @@ import { VegaGroupedHistogram } from '../visualizations/GroupedHistogram';
import { KaplanMeierPlot } from '../visualizations/KaplanMeierPlot';
import { Scatterplot, TsneScatterplot } from '../visualizations/Scatterplot';
import { ATask } from './ATask';
import tippy from "tippy.js";
import {createDBCohortAutomatically, ICohortMultiAttrDBDataParams} from "../../base";
import {AutoSplitEvent} from "../../base/events";

Expand Down Expand Up @@ -67,19 +66,19 @@ export class Filter extends ATask {
break;
default: // 3 or more
this.showTsne(attributes, cohorts);
this.container = container;
this.container.insertAdjacentHTML(
`afterbegin`,
`
<div class="vega-container"></div>
<div class="controls">
<div class="sticky" style="position: sticky; top: 0;"></div>
</div>
`,
);
this.controls = this.container.querySelector('.controls .sticky');
console.log("this.controls filter", this.controls);
this.addControls();
// this.container = container;
// this.container.insertAdjacentHTML(
// `afterbegin`,
// `
// <div class="vega-container"></div>
// <div class="controls">
// <div class="sticky" style="position: sticky; top: 0;"></div>
// </div>
// `,
// );
// this.controls = this.container.querySelector('.controls .sticky');
// console.log("this.controls filter", this.controls);
// this.addControls();
break;
}
}
Expand Down Expand Up @@ -151,91 +150,90 @@ export class Filter extends ATask {
this.cohorts = cohorts;
this.setVisualizations([TsneScatterplot]);

// cohort_creation_experiments
this.$visContainer.innerHTML = 'Currently, we only support the visualization of up to two attributes.';
// this.addControls(); // why does it not add if I add here, only if I add it in show()?
this.attributes = attributes;
// this.$visContainer.innerHTML += '<button type="button" class="btn createAutomaticallyBtn btn-coral-prime" title="Calculate meaningful splits.">Create cohorts automatically</button>';
// TODO #647 fix tsne implementation
// // cohort_creation_experiments
// this.$visContainer.innerHTML = 'Currently, we only support the visualization of up to two attributes.';
// // this.addControls(); // why does it not add if I add here, only if I add it in show()?
// this.attributes = attributes;
// this.cohorts = cohorts;
// this.setVisualizations([TsneScatterplot]);
}

addControls() {
this.controls.insertAdjacentHTML(
'afterbegin',
`
<div class="d-grid gap-2">
<button type="button" class="btn createAutomaticallyBtn btn-coral-prime" title="Calculate meaningful splits.">Create cohorts automatically</button>
<label>Number of Clusters</label>
<input type="number" class="clusters" step="any" min="1" max="99" value="2" />
<button type="button" class="btn createAutomaticallyWithNumberOfClustersBtn btn-coral-prime" title="Calculate meaningful splits.">Create cohorts for number of clusters</button>
</div>
`,
);

select(this.controls)
.select('button.createAutomaticallyBtn')
.on('click', () => {
console.log("createAutomaticallyBtn clicked");
this.createAutomatically(false);
});

select(this.controls)
.select('button.createAutomaticallyWithNumberOfClustersBtn')
.on('click', () => {
console.log("createAutomaticallyWithNumberOfClustersBtn clicked");
this.createAutomatically(true);
});
// // this.$visContainer.innerHTML += '<button type="button" class="btn createAutomaticallyBtn btn-coral-prime" title="Calculate meaningful splits.">Create cohorts automatically</button>';
// // TODO #647 fix tsne implementation
// // this.attributes = attributes;
// // this.cohorts = cohorts;
// // this.setVisualizations([TsneScatterplot]);
}

async createAutomatically(useNumberOfClusters = false) {
console.log("createAutomatically 3 or more attributes");
console.log("cohorts ", this.cohorts);
console.log("attributes ", this.attributes);
// todo: implement

let numberOfClusters = 0;
if (useNumberOfClusters) {
// select the bins field
// let controls = this.controls;
numberOfClusters = (this.controls.querySelector(`.controls input.clusters`) as HTMLInputElement).valueAsNumber;
console.log("numberOfClusters", numberOfClusters);
}

let newCohortIds = [];
let attributesMapped = this.attributes.map((attr) => {return {dataKey: attr.dataKey, type: attr.type}});
// convert the attributesParam to a JSON object
let attributesParam: string = JSON.stringify(attributesMapped);

for (const cht of this.cohorts) {
const params: ICohortMultiAttrDBDataParams = {
cohortId: cht.dbId,
attributes: attributesParam,
numberOfClusters: numberOfClusters,
};
newCohortIds = await createDBCohortAutomatically(params)
console.log("createAutomatically scatterplot data", newCohortIds);
}
// TODO: create the cohorts and show them

let cohortDescs: INewCohortDesc[];
cohortDescs = [];
// for every selected cohort
for (const cohort of this.cohorts) {
// for every newCohort create a filter (for now... the filter is actually not needed, will be changed in the future)
for (const newCohort of newCohortIds){
cohortDescs.push({
cohort: cohort,
newCohortId: newCohort,
attr:this.attributes
});
}
}

this.container.dispatchEvent(new AutoSplitEvent(cohortDescs));
}
// addControls() {
// this.controls.insertAdjacentHTML(
// 'afterbegin',
// `
// <div class="d-grid gap-2">
// <button type="button" class="btn createAutomaticallyBtn btn-coral-prime" title="Calculate meaningful splits.">Create cohorts automatically</button>
// <label>Number of Clusters</label>
// <input type="number" class="clusters" step="any" min="1" max="99" value="2" />
// <button type="button" class="btn createAutomaticallyWithNumberOfClustersBtn btn-coral-prime" title="Calculate meaningful splits.">Create cohorts for number of clusters</button>
// </div>
// `,
// );
//
// select(this.controls)
// .select('button.createAutomaticallyBtn')
// .on('click', () => {
// console.log("createAutomaticallyBtn clicked");
// this.createAutomatically(false);
// });
//
// select(this.controls)
// .select('button.createAutomaticallyWithNumberOfClustersBtn')
// .on('click', () => {
// console.log("createAutomaticallyWithNumberOfClustersBtn clicked");
// this.createAutomatically(true);
// });
// }

// async createAutomatically(useNumberOfClusters = false) {
// console.log("createAutomatically 3 or more attributes");
// console.log("cohorts ", this.cohorts);
// console.log("attributes ", this.attributes);
//
// let numberOfClusters = 0;
// if (useNumberOfClusters) {
// // select the bins field
// // let controls = this.controls;
// numberOfClusters = (this.controls.querySelector(`.controls input.clusters`) as HTMLInputElement).valueAsNumber;
// console.log("numberOfClusters", numberOfClusters);
// }
//
// let newCohortIds = [];
// let attributesMapped = this.attributes.map((attr) => {return {dataKey: attr.dataKey, type: attr.type}});
// // convert the attributesParam to a JSON object
// let attributesParam: string = JSON.stringify(attributesMapped);
//
// for (const cht of this.cohorts) {
// const params: ICohortMultiAttrDBDataParams = {
// cohortId: cht.dbId,
// attributes: attributesParam,
// numberOfClusters: numberOfClusters,
// };
// newCohortIds = await createDBCohortAutomatically(params)
// console.log("createAutomatically scatterplot data", newCohortIds);
// }
// // TODO: create the cohorts and show them
//
// let cohortDescs: INewCohortDesc[];
// cohortDescs = [];
// // for every selected cohort
// for (const cohort of this.cohorts) {
// // for every newCohort create a filter (for now... the filter is actually not needed, will be changed in the future)
// for (const newCohort of newCohortIds){
// cohortDescs.push({
// cohort: cohort,
// newCohortId: newCohort,
// attr:this.attributes
// });
// }
// }
//
// this.container.dispatchEvent(new AutoSplitEvent(cohortDescs));
// }



Expand Down
2 changes: 1 addition & 1 deletion src/Taskview/visualizations/GroupedBoxplot.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ export class GroupedBoxplot extends MultiAttributeVisualization {
};

newCohortIds = await createDBCohortAutomatically(params)
console.log("createAutomatically scatterplot data", newCohortIds);
console.log("createAutomatically groupedBoxplot data", newCohortIds);
}

let cohortDescs: INewCohortDesc[];
Expand Down
Loading

0 comments on commit de3629f

Please sign in to comment.