Display diagrams for a wide range of organisms and tissue types

Oct 13, 2025 by wbrum.org 107 views

Overview

The current implementation of the host module displays static placeholder figures (e.g. .png images) for relevant tissue types based on the predominant tissue type in the filtered SRA runs. However, these figures are limited in scope (e.g. only a few human organs) and do not scale well with the diversity of organisms (animals, plants, etc.) represented in the knowledge graph. The original vision was to use ECharts to render interactive SVG diagrams that can highlight specific portions of the diagram (e.g. organs or tissues) on mouse hover, providing a more dynamic and informative user experience.

Background / Context

The current implementation uses static .png images, which are insufficient for the following reasons:

Limited scope: The current implementation is limited to a small subset of human organs, while the knowledge graph contains SRA run data for nearly all animals and plants.
Lack of interactivity: Static images cannot provide interactive features like hover-based highlighting or tooltips.
Scalability issues: The lack of scalability makes it difficult to add new figures for diverse organisms.

The proposed solution is to use ECharts to create interactive SVG diagrams, similar to the example provided here: ECharts Organ Diagram Example. This approach will allow us to:

Display diagrams for a wide range of organisms and tissue types: By using ECharts, we can create diagrams for a wide range of organisms and tissue types, making the host module more informative and engaging.
Enable interactive features: ECharts will enable interactive features like hover-based highlighting and tooltips, providing users with a more dynamic and informative experience.
Scale more effectively: The proposed solution will scale more effectively as new data is added to the knowledge graph, making it easier to add new figures for diverse organisms.

Hypothesis

Replacing static placeholder figures with interactive ECharts diagrams will improve the usability and scalability of the host module, providing users with a more engaging and informative experience.

Experiment

Research and Planning

Review ECharts documentation: Review the ECharts documentation and the provided example (ECharts Organ Diagram Example) to understand how to implement interactive SVG diagrams.
Identify necessary data structures and formats: Identify the necessary data structures and formats for rendering diagrams based on tissue types and organisms.

Implementation

Create a reusable ECharts component: Create a reusable ECharts component for rendering interactive diagrams.
Map tissue types and organisms to SVG diagrams: Map tissue types and organisms to their corresponding SVG diagrams (e.g., heart for humans, leaf for plants).
Implement hover-based highlighting and tooltips: Implement hover-based highlighting and tooltips to display additional information about specific tissues or organs.

Integration

Replace static .png placeholder figures: Replace the static .png placeholder figures with the new ECharts component in the host module.
Ensure dynamic updates: Ensure the component dynamically updates based on the applied filters (e.g., displaying a heart diagram for heart-related runs).

Testing

Test with a variety of tissue types and organisms: Test the component with a variety of tissue types and organisms to ensure compatibility and responsiveness.
Verify hover-based highlighting and tooltips: Verify that hover-based highlighting and tooltips work as expected.

Controls

Ensure backward compatibility: Ensure backward compatibility with existing filters and data structures.
Maintain performance: Maintain performance by optimizing the rendering of SVG diagrams.

Expected Outcome

Interactive ECharts diagrams: The host module displays interactive ECharts diagrams instead of static placeholder figures.
Dynamic updates: Diagrams are dynamically updated based on the applied filters and predominant tissue types.
Hover-based highlighting and tooltips: Users can hover over specific portions of the diagram to highlight tissues/organs and view additional information.
Scalability: The solution scales effectively to accommodate new organisms and tissue types as the knowledge graph grows.

Open Questions

Handling organisms or tissue types without pre-existing SVG diagrams: How should we handle organisms or tissue types that do not have pre-existing SVG diagrams?
Toggling between static and interactive views: Should we allow users to toggle between static and interactive views?
Performance considerations: Are there performance considerations for rendering complex diagrams in the browser?

References

ECharts Organ Diagram Example
ECharts Documentation: https://echarts.apache.org/en/api.html#echarts
[UI/Feature] Replace Static Placeholder Figures with Interactive ECharts Diagrams in Host Module: Q&A =====================================================================================

Q: What is the current implementation of the host module, and why is it insufficient?

A: The current implementation of the host module displays static placeholder figures (e.g. .png images) for relevant tissue types based on the predominant tissue type in the filtered SRA runs. However, these figures are limited in scope (e.g. only a few human organs) and do not scale well with the diversity of organisms (animals, plants, etc.) represented in the knowledge graph.

Q: What are the limitations of the current implementation?

A: The current implementation is limited to a small subset of human organs, while the knowledge graph contains SRA run data for nearly all animals and plants. Additionally, static images cannot provide interactive features like hover-based highlighting or tooltips, and the lack of scalability makes it difficult to add new figures for diverse organisms.

Q: What is the proposed solution to address these limitations?

A: The proposed solution is to use ECharts to create interactive SVG diagrams, similar to the example provided here: ECharts Organ Diagram Example. This approach will allow us to display diagrams for a wide range of organisms and tissue types, enable interactive features like hover-based highlighting and tooltips, and scale more effectively as new data is added to the knowledge graph.

Q: How will the proposed solution improve the usability and scalability of the host module?

A: The proposed solution will improve the usability and scalability of the host module by providing users with a more dynamic and informative experience. Interactive ECharts diagrams will enable users to hover over specific portions of the diagram to highlight tissues/organs and view additional information, making the host module more engaging and informative. Additionally, the solution will scale more effectively to accommodate new organisms and tissue types as the knowledge graph grows.

Q: What are the expected outcomes of the proposed solution?

A: The expected outcomes of the proposed solution are:

Interactive ECharts diagrams: The host module displays interactive ECharts diagrams instead of static placeholder figures.
Dynamic updates: Diagrams are dynamically updated based on the applied filters and predominant tissue types.
Hover-based highlighting and tooltips: Users can hover over specific portions of the diagram to highlight tissues/organs and view additional information.
Scalability: The solution scales effectively to accommodate new organisms and tissue types as the knowledge graph grows.

Q: What are the open questions related to the proposed solution?

A: The open questions related to the proposed solution are:

Handling organisms or tissue types without pre-existing SVG diagrams: How should we handle organisms or tissue types that do not have pre-existing SVG diagrams?
Toggling between static and interactive views: Should we allow users to toggle between static and interactive views?
Performance considerations: Are there performance considerations for rendering complex diagrams in the browser?

Q: What are the references for the proposed solution?

A: The references for the proposed solution are:

ECharts Organ Diagram Example
ECharts Documentation: https://echarts.apache.org/en/api.html#echarts

Q: What is the next step in implementing the proposed solution?

A: The next step in implementing the proposed solution is to research and plan the implementation, including reviewing the ECharts documentation and the provided example, identifying the necessary data structures and formats for rendering diagrams based on tissue types and organisms, and creating a reusable ECharts component for rendering interactive diagrams.