stjude / proteinpaint

Data visualization and analysis framework focused on phenotype-molecular data integration at cohort level.
https://proteinpaint.stjude.org/
Other
16 stars 5 forks source link

on clicking a chart button and show term tree, may auto expand on certain tree branches to show relevant terms #2106

Open xzhou82 opened 1 week ago

xzhou82 commented 1 week ago

at sjlife, click on Cuminc button, it displays abridged tree with just one branch. user has to click twice to get to actual terms that can be used for cuminc

it will be an improvement to user experience to auto expand to show those terms.

likewise same issue for Survival button in pnet

i imagine it can be configured on a ds via ds.cohort.termdb.treeConfigPerChart={cuminc:{ ..some config.. }}, and at mass nav, on launching termdb tree, pass this config to the tree code

Edgar please see if this idea is valid. if so may ask Colleen to work on it

siosonel commented 1 week ago

It's possible to do, and maybe not even require configuration, or just detect it from the usecase option, which would already have 'cuminc' or 'survival' as usecase.target, and we'd hardcode to auto-expand branches for certain usecase.targets.

The logic to auto-expand in tree.js may look like this:

const autoExpandedTargets = new Set(['cuminc', 'survival'])

// inside renderBranch()
       const numClickableTerms = div.selectAll('.sja_tree_click_term').size(); console.log(308, numClickableTerms, self.included_terms)
       const autoExpand = autoExpandedTargets.has(self.state.usecase.target) && self.included_terms.length < 3 && !numClickableTerms

    for (const child of term.terms) { console.log(311, child)
        if (expandedTermIds.includes(child.id) || autoExpand) { console.log(312)
            self.renderBranch(
                child,
                div.selectAll('.' + cls_termchilddiv).filter(i => i.id == child.id),
                div.selectAll('.' + cls_termbtn).filter(i => i.id == child.id)
            )
        }
    }