CellGuide - Global Tissue Filter

[niknak33]

Based on user feedback from our pre and post-launch of CellGuide, users would find it highly valuable to select and filter cell types based on Tissue (internal feedback collected here - https://docs.google.com/document/d/1kCNtC_OFueTu5aow3t-Yr5BXvl_L-ALFi3t3oeaxWUo/edit)

External feedback - During the user interviews, we also received feedback from users that having a tissue filter would make the journey of navigating cell types a more efficient experience.

Problem Statement: By having no tissue filter - all cells present in all tissues are displayed on the cell page, making the journey for users very confusing; a tissue filter allows cell types to be sorted by a tissue of interest or all tissues depending on the user.

The Global Tissue Filter Selection feature in CellGuide offers users a unique and seamless way to sort and view cell types based on specific tissues of interest. By simply selecting the desired tissue, users can quickly filter out unrelated cell types, making it much easier to navigate the comprehensive cell database.

@hthomas-czi to add designs

User Stories:

As a user, I want to be able to filter cell types based on specific tissues so that I can focus on the cells relevant to my research project.
As a user, I want this filter to be applied across the relevant sections on the cell type page.
As a user, I want to apply the global filter to my desired tissue so that I can easily identify and study the marker genes associated with that tissue's cell types.
As a user, I want to apply the global filter so I can browse through the interactive cell ontology tree so that I can understand the relationships between different cell types within a particular tissue of interest.
As a user, I want to select a tissue of interest from the tissue type page or via the search, based on my tissue selection, I want cell types to be filtered based on that tissue type on any cell types I view.
As a user, I want a visual aid to inform me of the tissue type filter that has been applied, so I can remove it or change it in the future.

UX Design
Figma
Scrollable Prototype

[atarashansky]

Use the second column of the tissue filter in data portal. More granular tissue terms should be relabeled to match the "organ" granularity.

Question - are there any cells labeled with UBERON terms that are LESS granular than organs?

[atarashansky]

Just use ORGAN for now and ignore cells that are LESS granular than organ.

[prathapsridharan]

@hthomas-czi - I want to point out a UX issue here.

https://cellxgene.dev.single-cell.czi.technology/cellguide/CL_0000540

Notice that in the tables Canonical marker genes can only be filtered by tissue but Computational marker genes can be filtered by organism and tissue.

Bringing the tissue selector to the top puts organism filter in weird place because it only applies to Computational marker genes. We have 2 cases here:

1. Don't make organism filter global. Keeping organism filter next to the Computational marker genes table means that a user might would have to scroll between global tissue filter and local organism filter for Computational marker genes.

2. Make organism filter global. This approach would simply ignore organism filter when applied to Canonical marker genes.

I feel (2) looks consistent but semantically might be confusing for users. But perhaps some info on the Canonical marker genes clarifying that organism filter is not applied would clear things up. If organism filter can be applied to canonical marker genes then (2) seems to be the best way to go

[hthomas-czi]

@prathapsridharan

Thanks for raising this.

I believe (2) is the correct solution. Organism will ultimately apply to multiple sections like Tissue does. At a minimum, Computational marker genes and Data.

I agree it'd be useful to call out when a section isn't altered by the Tissue or Organism filter. I'd like to think on this more.

Your question prompted another question for me. Canonical marker genes don't have an Organism filter, but that may not mean that the Organism doesn't apply. In fact, I'd guess that the Canonical marker genes are only for Homo sapiens and we don't have an Organism filter because that table would be empty for non-Homo sapiens.

@atarashansky Is this the case?

[atarashansky]

Yes, that would be my preferred solution. Just like how the canonical marker genes should be empty if a global tissue filter is applied for which there are no canonical marker genes. So should the canonical marker genes be empty if an organism other than human is selected.

That being said, the "No canonical marker genes" graphic should indicate that the lack of canonical marker genes may have something to do with the filters applied... I'm worried about users who just leave the organism as "Mus musculus" and are confused why none of the cell types have any canonical markers.

[prathapsridharan]

@atarashansky @hthomas-czi @tihuan @niknak33

I am going to break this work down into the following steps (or PRs) so that this work can be integrated incrementally:

1. Add tissue and organism global filters that only filter the marker genes tables. There is PR for this that is ready for review and an accompanying rdev to test it on manually
2. Preselect tissue filter when going from tissue card to cell card
3. Filter ontology graph by the selections on the tissue filter
4. Filter source data by the selection on the tissue filter
5. The top bar with the cell name and filters should be fixed to the top and have a gradient at the bottom.
   background: var(--fade, linear-gradient(180deg, #FFF 90%, rgba(255, 255, 255, 0.00) 100%));
6. Make the dropdowns use SDS components
7. Enhance filtering functionality with sub tissue filter

[atarashansky]

You'll be incrementally merging this work into a feature branch, correct?

[prathapsridharan]

@atarashansky - I was thinking about merging each of these steps into main. Hoping to do trunk based development this way. I figure, filtering tables is piece of functionality that already existed and this change merely moves the filters to the top and there is no behavior change. If anything, behavior is improved in that we are removing defaulting to all tissues and the functionality is a bit cleaner from a user's perspective. I figure this can be pushed to main and even released to users.

[atarashansky]

I would just double check with @niknak33 and @hthomas-czi that the behavior of the intermediate deliverables are alright before merging anything into main.

[hthomas-czi]

Looks great, @prathapsridharan! Thanks for breaking it down. That approach makes sense to me.

Just as a reminder as part of (2), the Tissue filter should have the search prop enabled.

[prathapsridharan]

@atarashansky @hthomas-czi - When constructing the global tissue filter dropdown list, currently I am taking the union of tissue name coming from computational marker genes and canonical marker genes.

For example, this means that eye comes from computational marker genes and retina comes from canonical marker genes. and the dropdown list will show both eye and retina.

1. I believe we discussed that eye is the organ and contains sub-tissues and therefore the dropdown list can simply show eye and omit retina?

2. If (1) is correct, are there tissues extracted from computational marker genes and canonical marker genes that cannot be related and be considered separate organs?

3. If (2) is correct, that is there are mutually independent organs extracted from computational marker genes and canonical marker geners, will they have tissue-id (UBERON:xyz)?

The answer to these questions determine how to implement the tissue list in the dropdown and how to associate the tissue-name in the list with a tissue-id. For instance, if it is the case that the tissues coming from canonical marker genes is always a subset of the tissues coming from computational marker genes, I can just use computational marker genes to derive the tissue list for the dropdown

[prathapsridharan]

@atarashansky @hthomas-czi @niknak33

In order to:

1. Filter canonical marker genes table by taking into account synonymous and sub tissue names AND
2. Filter the source data

I need a mapping of organ name to a list of synonymous organ names and sub tissues.

Where can I get this?

[prathapsridharan]

@tihuan @atarashansky @niknak33 @hthomas-czi - With the core functionality of the filtering done, here is what is left to make this feature complete:

1. Better messaging in the marker genes table when All Tissues is selected to inform the user what All Tissues really means
2. SDS components for drop down
3. The top bar with the cell name and filters should be fixed to the top and have a gradient at the bottom.
   background: var(--fade, linear-gradient(180deg, #FFF 90%, rgba(255, 255, 255, 0.00) 100%));
4. Breadcrumbs when navigating from page to page and pre-populating the tissue filter based on previous link in the navigation

[prathapsridharan]

@hthomas-czi @niknak33 @atarashansky . I have created the following tickets to tie up the functionality:

1. SDS component for dropdown - For global tissue and organism filter, make the filter components use SDS components per the figma design spec #5670
2. Change "All Tissues" to "Tissue Agnostic" in for the default dropdown selection - Change "All Tissues" to "Tissue Agnostic" in the global tissue filter dropdown #5671
3. Make nav bar for cellcard sticky - Make the top nav bar for cell card should be sticky #5672
4. Moving from tissue card to cell card should populate the global tissue filter with tissue from which the user came from - Populate the global tissue filter with the tissue in the tissue card #5673
5. Make cell card page filtered by tissue/organism a shareable link - Make cell card page filtered by tissue/organism a shareable link #5674
6. Change the dropdown list for global tissue in cell card to be an independent organ list - Change the dropdown list for global tissue in cell card to be an independent organ list #5675