Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Network visualization #14

Merged
merged 2 commits into from
Oct 2, 2024
Merged

Network visualization #14

merged 2 commits into from
Oct 2, 2024

Conversation

vincerubinetti
Copy link
Collaborator

@vincerubinetti vincerubinetti commented Sep 28, 2024

Closes #6 (except for "nice to haves", which we can revisit later)

  • fix playwright install action
  • add some nice options to flex component
  • network viz
    • settle on cytoscape library
    • customizable colors/sizes/etc
    • legend and key
    • selectable nodes/edges
    • max nodes slider
    • expand button
    • download options
    • add all available built-in and plugin layout algorithms, except ones with only a few dozen stars on github and ones that crash. explicitly set some key options for each algo to make them look sensible.
  • add network viz to top of testbed page, with fake generated data
  • util func to pick key colors
  • download util funcs

Copy link

netlify bot commented Sep 28, 2024

Deploy Preview for molevolvr ready!

Name Link
🔨 Latest commit ee2aa79
🔍 Latest deploy log https://app.netlify.com/sites/molevolvr/deploys/66facc1b213ff90008ecf86f
😎 Deploy Preview https://deploy-preview-14--molevolvr.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@jananiravi jananiravi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

High-level quick look -- seems OK. I've asked a few clarifying Qs to prepare us for how this will be used within MolEvolvR.

frontend/src/pages/Testbed.tsx Show resolved Hide resolved
frontend/src/pages/Testbed.tsx Show resolved Hide resolved
frontend/src/pages/Testbed.tsx Show resolved Hide resolved
frontend/src/util/download.ts Show resolved Hide resolved
@vincerubinetti vincerubinetti mentioned this pull request Oct 1, 2024
Copy link
Contributor

@falquaddoomi falquaddoomi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I briefly read through the code and didn't find anything surprising; nice work!

@vincerubinetti
Copy link
Collaborator Author

I'll add shapes (tied to colors which are mapped to unique types, for color-blindness) in a future PR.

Also more filters can/will be added when this network component starts to be used in-situ. E.g., only show nodes with p-value between A and B. These filters will exist outside the component, since they are more specific and not generic to all use-cases of the component. That is, the sliders will be outside of the component, and the node/edge data will be filtered appropriately before being passed to the component.

@vincerubinetti vincerubinetti merged commit c26ffce into main Oct 2, 2024
4 checks passed
@vincerubinetti vincerubinetti deleted the network branch October 2, 2024 16:58
vincerubinetti added a commit that referenced this pull request Oct 3, 2024
This is based off of #14 . I'll rebase it once that PR is merged so only
32e2a44
remains.

- use first-party `@axe-core/playwright` instead of `axe-playwright`
- add type packages for network viz layout algorithms
- add dark mode toggle button and sync with local storage
- add dark mode theme colors
- replace a few hard-coded colors in a few spots with css theme vars
- move testbed network randomized data generation outside component so
it only changes on page refresh, not every component re-render
- change "get css var" util funcs to be a reactive hook, which will
update on dark mode toggle
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Network viz
3 participants