Minor fixes and improvments

src/tours/AddColumnToGeneListTour.ts

@@ -1,4 +1,5 @@
 import { IStep, TourUtils } from 'tdp_core';
+import { openAddColumPanel } from './utils';
 
 export class AddColumnToGeneListTour {
  static createTour(): IStep[] {
@@ -64,7 +65,7 @@ export class AddColumnToGeneListTour {
  selector: '.lu-side-panel-wrapper .lu-adder > button',
  html: `Additional columns can be added using the plus sign.`,
  placement: 'centered',
- postAction: TourUtils.clickSelector,
+ postAction: openAddColumPanel,
  },
 
  {
@@ -133,9 +134,7 @@ export class AddColumnToGeneListTour {
  selector: '.lu-search .lu-search-group .lu-search-item',
  placement: 'centered',
  html: `Now, we want to add two columns containing the copy number information of two specific cell lines. To do so, we open the <i>'Cell Line Score (Single)'</i> dialog`,
- preAction: () => {
- TourUtils.click('.lu-side-panel-wrapper .lu-adder > button');
- },
+ preAction: openAddColumPanel,
  postAction: () => {
  TourUtils.click('.lu-search .lu-search-group .lu-search-item');
  TourUtils.toggleClass('.lu-adder.once', 'once', false);
@@ -180,9 +179,7 @@ export class AddColumnToGeneListTour {
  placement: 'centered',
  html: `Finally, we want to add an aggregated column containing the mean/average copy number values of all breast cancer cell lines.
  To do so, we open the <i>'Cell Line Score (Aggregated)'</i> dialog`,
- preAction: () => {
- TourUtils.click('.lu-side-panel-wrapper .lu-adder > button');
- },
+ preAction: openAddColumPanel,
  postAction: () => {
  TourUtils.click('.lu-search .lu-search-group .lu-search-item:nth-child(2)');
  TourUtils.toggleClass('.lu-adder.once', 'once', false);

src/tours/AssessBCCellLinesTour.ts

@@ -1,6 +1,5 @@
-// import {ToursSection} from 'ordino';
-import selectEvent from 'react-select-event';
-import { IStep, Tour, TourUtils } from 'tdp_core';
+import { IStep, TourUtils } from 'tdp_core';
+import { openAddColumPanel, setNextActive } from './utils';
 
 export class AssessBCCellLinesTour {
  static createTour(): IStep[] {
@@ -25,7 +24,7 @@ export class AssessBCCellLinesTour {
  datasetTab.querySelector('a').classList.add('hover');
  }
  },
- postAction: () => {
+ postAction: async () => {
  const datasetTab = document.querySelector('ul[data-header="mainMenu"] > li:nth-child(1)') as HTMLElement;
  if (!datasetTab.classList.contains('active')) {
  datasetTab.querySelector('a').classList.remove('hover');
@@ -47,7 +46,7 @@ export class AssessBCCellLinesTour {
  selector: '[data-testid="normal-chromosome-protein-coding-human-genes-button"]',
  html: `The scientists start by loading the list of all protein coding genes for humans.`,
  placement: 'centered',
- postAction: () => {
+ postAction: async () => {
  return TourUtils.waitFor('.ordino-dataset.genes-dataset .dataset-entry button[title^="Name: normal chromosome protein coding human genes"]').then(
  TourUtils.click,
  );
@@ -57,22 +56,23 @@ export class AssessBCCellLinesTour {
  {
  selector: '.le.le-multi.lineup-engine',
  placement: 'centered',
+ preAction: () => TourUtils.waitFor('.le.le-multi.lineup-engine', Infinity).then(() => TourUtils.wait(2000)),
  html: `The information is presented in a tabular format. Additionally to the gene ID, a set of columns containing some basic information is shown by default.`,
- preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1)', Infinity),
  },
  {
  selector: '.lu-side-panel-wrapper .lu-adder > button',
  html: `They begin by adding an additional column, done so by clicking on the plus icon shown here.`,
  placement: 'centered',
- postAction: TourUtils.clickSelector,
+ postAction: openAddColumPanel,
  },
  {
- selector: '[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span',
+ selector: '[data-testid="lu-adder-div"] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span',
  html: `They choose to add a column for a single cell line score.`,
  placement: 'centered',
- postAction: () => {
- TourUtils.click('[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span');
+ postAction: async () => {
+ TourUtils.click('[data-testid="lu-adder-div"] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span');
  TourUtils.toggleClass('.lu-adder.once', 'once', false);
+ return Promise.resolve();
  },
  },
  {
@@ -102,27 +102,27 @@ export class AssessBCCellLinesTour {
  selector: '.le [data-col-id="col8"] .lu-action-sort',
  placement: 'centered',
  html: `They want to sort by this newly added column, so they click on the sort button in the column header.`,
- preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1) [title="1.83"]', Infinity),
+ preAction: () => TourUtils.waitFor('.le-tr[data-index="0"] [data-id="col8"].lu-renderer-number', Infinity),
  postAction: () => {
  TourUtils.click('.le [data-col-id="col8"] .lu-action-sort');
  },
  },
  {
- // selector: ['[data-index="0"].le-tr, [data-index="14"].le-tr'], // Bug: It highlights the selectors before waiting for the preAction
+ selector: ['[data-index="0"].le-tr, [data-index="14"].le-tr'],
  placement: 'centered',
  html: `After sorting by this column, the analyst observes that about 15 genes on chromosome 17 are affected by a large genomic amplification.`,
- preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1) [title="8.00"]', Infinity),
+ preAction: () => TourUtils.waitFor('[data-index="0"].le-tr', Infinity).then(() => TourUtils.wait(2000)),
  },
  {
  selector: '.lu-side-panel-wrapper .lu-adder > button',
  html: `<p>In order to identify the most relevant of these genes, the analyst adds a column with the Normalized Gene Expression (a measure of activity) for cell line HCC1954</p>
  <p><i>Individual steps for adding a column have been skipped this time.</i></p>`,
  placement: 'centered',
- postAction: () => {
+ postAction: async () => {
  TourUtils.click('.lu-side-panel-wrapper .lu-adder > button');
  TourUtils.click('[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span');
  TourUtils.toggleClass('.lu-adder.once', 'once', false);
- TourUtils.waitFor('.modal.show').then(async () => {
+ await TourUtils.waitFor('.modal.show').then(async () => {
  TourUtils.setValueAndTrigger('.modal.show .select3 input.select2-search__field', 'HCC1954;', 'input');
  TourUtils.setValueAndTrigger('.show .col > select', 'expression-tpm', 'change');
  await TourUtils.wait(1000);
@@ -134,7 +134,7 @@ export class AssessBCCellLinesTour {
  selector: '.lu-side-panel-wrapper .lu-adder > button',
  html: `They also add a column with a Gene Sensitivity Score (a measure of importance for cell survival) for HCC1954.`,
  placement: 'centered',
- preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1) [title="5324.86"]', Infinity),
+ preAction: () => TourUtils.waitFor('.le-tr[data-index="0"] [data-id="col9"].lu-renderer-number', Infinity),
  postAction: () => {
  TourUtils.click('.lu-side-panel-wrapper .lu-adder > button');
  },
@@ -159,7 +159,7 @@ export class AssessBCCellLinesTour {
  html: `<p>In an effort to improve the depletion score's readability, they decide to invert the linear scaling.</p>
  <p>To do this, they click on the three dots for more column options.</p>`,
  placement: 'centered',
- preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1) [title="−2.75"]', Infinity),
+ preAction: () => TourUtils.waitFor('.le-tr[data-index="0"] [data-id="col10"].lu-renderer-number', Infinity),
  postAction: TourUtils.clickSelector,
  },
  {
@@ -230,7 +230,7 @@ export class AssessBCCellLinesTour {
  selector: '.lu-side-panel-wrapper .lu-adder > button',
  html: `2. A column with the gene copy number distribution for breast cancer cell lines in boxplot format`,
  placement: 'centered',
- preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1) [title="890.37"]', Infinity),
+ preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1) [data-id="col11"].lu-renderer-number', Infinity),
  postAction: () => {
  TourUtils.click('.lu-side-panel-wrapper .lu-adder > button');
  TourUtils.click('[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(2) > span');
@@ -255,7 +255,7 @@ export class AssessBCCellLinesTour {
  selector: '.lu-side-panel-wrapper .lu-adder > button',
  html: `3. A column with the gene amplification frequency (>4) across all breast cancer cell lines`,
  placement: 'centered',
- preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1) .lu-renderer-boxplot', Infinity),
+ preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1) [data-id="col12"].lu-renderer-boxplot', Infinity),
  postAction: () => {
  TourUtils.click('.lu-side-panel-wrapper .lu-adder > button');
  TourUtils.click('[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(2) > span');
@@ -301,22 +301,24 @@ export class AssessBCCellLinesTour {
  postAction: TourUtils.clickSelector,
  },
  {
- selector: '.ids',
+ selector: '.tdp-view.expressionVsCopyNumber .ids',
  html: `Here they observe the direct correlation between copy number and expression of ERBB2.`,
  placement: 'centered',
- preAction: () => TourUtils.waitFor('.ids').then(() => TourUtils.wait(300)),
+ preAction: () => TourUtils.waitFor('.tdp-view.expressionVsCopyNumber .ids').then(() => TourUtils.wait(300)),
  },
  {
  selector: '[data-viewid="targetvalidation"]',
+ preAction: TourUtils.clickSelector,
  html: `To find more information, they open the 'Open Targets' detail view &hellip;`,
  placement: 'centered',
- postAction: TourUtils.clickSelector,
+ waitFor: () => TourUtils.waitFor('iframe [title="ERBB2"]').then(setNextActive),
  },
  {
  selector: '[data-viewid="pubmed"]',
  html: `&hellip; and then the 'PubMed' detail view.`,
  placement: 'centered',
- postAction: TourUtils.clickSelector,
+ preAction: TourUtils.clickSelector,
+ waitFor: () => TourUtils.waitFor('.tdp-view.proxy_view ').then(setNextActive),
  },
  {
  selector: '',
@@ -378,7 +380,7 @@ export class AssessBCCellLinesTour {
  selector: '[data-testid="viewWrapper-1"] .lu-side-panel-wrapper .lu-adder > button',
  html: `They now want to add the BRCA gene score columns.`,
  placement: 'centered',
- postAction: TourUtils.clickSelector,
+ postAction: openAddColumPanel,
  },
  {
  selector: '[data-testid="viewWrapper-1"] [data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span',

src/tours/DrugTargetDiscoveryTour.ts

@@ -1,5 +1,6 @@
 // import {ToursSection} from 'ordino';
-import { IStep, Tour, TourManager, TourUtils } from 'tdp_core';
+import { IStep, TourUtils } from 'tdp_core';
+import { openAddColumPanel } from './utils';
 
 export class DrugTargetDiscoveryTour {
  static createTour(): IStep[] {
@@ -89,7 +90,7 @@ export class DrugTargetDiscoveryTour {
  html: `As the analyst wants to investigate the TP53 gene, he decides to add a categorical column with the mutation status (mutated vs non mutated).`,
  placement: 'centered',
  preAction: TourUtils.waitForSelector,
- postAction: TourUtils.clickSelector,
+ postAction: openAddColumPanel,
  },
  {
  selector: '[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span',
@@ -124,11 +125,12 @@ export class DrugTargetDiscoveryTour {
  postAction: TourUtils.clickSelector,
  },
  {
- selector: '.lu-side-panel-wrapper .lu-adder > button',
+ selector: '[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span',
  html: `<p>Additionally, they decide to add a textual column that provides further details about the mutation (if present).</p>
  <p>This is done by repeating the same steps to add a column, but choosing "AA Mutation" as the data type this time instead.</p>
  <p><i>Individual steps for adding a column have been skipped this time.</i></p>`,
  placement: 'centered',
+ preAction: openAddColumPanel,
  postAction: () => {
  TourUtils.click('.lu-side-panel-wrapper .lu-adder > button');
  TourUtils.click('[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span');
@@ -150,7 +152,7 @@ export class DrugTargetDiscoveryTour {
  selector: '.lu-side-panel-wrapper .lu-adder > button',
  html: `They begin by adding a new column.`,
  placement: 'centered',
- postAction: TourUtils.clickSelector,
+ postAction: openAddColumPanel,
  },
  {
  selector: '[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(2) > span',
@@ -215,9 +217,10 @@ export class DrugTargetDiscoveryTour {
  },
  },
  {
- selector: '.lu-side-panel-wrapper .lu-adder > button',
+ selector: '[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(2) > span',
  html: `Similarly, they add a matrix column with all of the individual expression values.`,
  placement: 'centered',
+ preAction: openAddColumPanel,
  postAction: async () => {
  TourUtils.click('.lu-side-panel-wrapper .lu-adder > button');
  TourUtils.click('[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(2) > span');
@@ -362,15 +365,17 @@ export class DrugTargetDiscoveryTour {
  placement: 'centered',
  },
  {
- selector: '.lu-side-panel-wrapper .lu-adder > button',
+ selector: '[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span',
  html: `He adds a column with the CDKN2A relative copy number, &hellip;`,
  placement: 'centered',
+ preAction: openAddColumPanel,
  postAction: () => {
  TourUtils.click('.lu-side-panel-wrapper .lu-adder > button');
  TourUtils.click('[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span');
  TourUtils.toggleClass('.lu-adder.once', 'once', false);
  TourUtils.waitFor('.modal.show').then(() => {
  TourUtils.setValueAndTrigger('.modal.show .select3 input.select2-search__field', 'CDKN2A;', 'input');
+ TourUtils.setValueAndTrigger('.show .col > select', null, 'change'); // clear previous value
  TourUtils.setValueAndTrigger('.show .col > select', 'copy_number-relativecopynumber', 'change');
  TourUtils.wait(2000).then(() => TourUtils.click('.modal.show .modal-footer button[type=submit]'));
  });

src/tours/PredictionTP53Tour.ts

@@ -1,9 +1,7 @@
 // import {ToursSection} from 'ordino';
-import { IStep, Tour } from 'tdp_core';
+import { IStep } from 'tdp_core';
 import { TourUtils } from 'tdp_core/src/tour/TourUtils';
-import selectEvent from 'react-select-event';
-import { wideEnoughCat } from 'lineupjs/build/src/renderer/utils';
-import { select } from 'lineupjs';
+import { openAddColumPanel } from './utils';
 
 export class PredictionTP53Tour {
  static createTour(): IStep[] {
@@ -44,15 +42,17 @@ export class PredictionTP53Tour {
  datasetTab.querySelector('a').classList.add('hover');
  }
  },
- postAction: () => {
+ postAction: async () => {
  const datasetTab = document.querySelector('ul[data-header="mainMenu"] > li:nth-child(1)') as HTMLElement;
  if (!datasetTab.classList.contains('active')) {
  datasetTab.querySelector('a').classList.remove('hover');
  datasetTab.querySelector('a').click();
  }
- return TourUtils.waitFor('.ordino-dataset.tissue-dataset').then(() =>
- TourUtils.click('#ordino_dataset_tab > .ordino-scrollspy-nav > a:nth-child(2)'),
- );
+
+ await TourUtils.waitFor('.ordino-dataset.tissue-dataset').then(async () => {
+ TourUtils.click('#ordino_dataset_tab > .ordino-scrollspy-nav > a:nth-child(2)');
+ await TourUtils.wait(1000);
+ });
  },
  pageBreak: 'manual',
  },
@@ -90,17 +90,18 @@ export class PredictionTP53Tour {
  },
  },
  {
- selector: '[data-testid="add-column-button"]',
+ selector: '[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span',
  html: `<p>Now they add a single gene score for the following:</p>
  <p>Gene: TP53<p/>
  <p>Data Type: AA Mutated<p/>`,
  placement: 'centered',
+ preAction: openAddColumPanel,
  postAction: async () => {
  TourUtils.click('[data-testid="add-column-button"]');
  await TourUtils.wait(500);
  TourUtils.click('[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(1) > span');
  TourUtils.toggleClass('.lu-adder.once', 'once', false);
- TourUtils.waitFor('.modal.show').then(async () => {
+ await TourUtils.waitFor('.modal.show').then(async () => {
  TourUtils.setValueAndTrigger('.modal.show .select3 input.select2-search__field', 'TP53;', 'input');
  TourUtils.setValueAndTrigger('.show .col > select', 'mutation-aa_mutated', 'change');
  await TourUtils.wait(500);
@@ -112,7 +113,7 @@ export class PredictionTP53Tour {
  selector: '[data-testid="viewWrapper-0"] [data-id="col7"] .lu-action-filter',
  html: `They filter out the samples with an unknown TP53 mutation status.`,
  placement: 'centered',
- preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1) [data-id="col7"].lu-missing', Infinity),
+ preAction: TourUtils.waitForSelector,
  postAction: async () => {
  TourUtils.click('[data-testid="viewWrapper-0"] [data-id="col7"] .lu-action-filter');
  await TourUtils.wait(500);
@@ -122,14 +123,17 @@ export class PredictionTP53Tour {
  },
  },
  {
- selector: '.lu-side-panel-wrapper .lu-adder > button',
+ selector: '[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(2) > span',
  html: `<p>Next they add an aggregated gene score with the following criteria:</p>
  <p>Filter: My Named Sets = TP53 Predictor</p>
  <p>Data Type: Expression (TPM)</p>
  <p>Aggregation: Average</p>
  <p>Compute score only for current sample subset</p>`,
  placement: 'centered',
- preAction: () => TourUtils.waitFor('.le-tr:nth-of-type(1) [data-id="col7"] [style="background-color: rgb(170, 170, 170);"]', Infinity),
+ preAction: async () => {
+ await TourUtils.waitFor('.le-tr:nth-of-type(1) [data-id="col7"] [style="background-color: rgb(170, 170, 170);"]', Infinity);
+ openAddColumPanel();
+ },
  postAction: async () => {
  TourUtils.click('.lu-side-panel-wrapper .lu-adder > button');
  TourUtils.click('[data-testid=lu-adder-div] > .lu-search > .lu-search-list > :nth-child(2) > ul > :nth-child(2) > span');