[CODE] add csv download by namahu · Pull Request #90 · MarkAStevens04/cloudflare-kinetics-editor

namahu · 2026-06-27T09:21:28Z

Closes #72

🤔 Section A - Description

This PR adds CSV download support for simulation results in SimulationDrawer.

What changed
- Added a Download CSV button with a download icon to the simulation drawer.
- Styled the button to be green when simulationStatus === 2 and gray otherwise.
- Added tooltip text that changes based on whether simulation data is ready.
- Converted simulationData into CSV output using species labels derived from the existing keyToLabel mapping.
- Triggered a browser download for the generated CSV file.
- Delayed rendering of the CSV button until the drawer open animation finishes so it does not appear before the drawer has expanded.
Why
- This lets users export simulation output for external analysis and graphing, which is the main goal of Issue Download CSV of data #72.
Anything reviewers should know
- The change is contained to src/react-app/components/SimulationDrawer.tsx.
- The CSV headers use the same label mapping already used by the chart legend so exported data is easier to read.

✅ Verification

[x] I ran this code locally and it does what the description says

🔎 Quick Self Check

This PR is one logical change. (Big or architectural? Let's chat in an issue first before writing code 🙏)
No leftover dead code, debugging prints, or unused imports
Every import / API / dependency I reference actually exists and is already available
Comments explain why not what, and the style matches the surrounding file.
I used existing functions and components where possible.
My style matches the surrounding code to the best of my ability
I could re-derive any non-obvious line if you asked me to

🔁 When we request changes

We review to make the code better, not to nitpick. We'd also love to help you grow as a contributor! 🌱 When we leave comments:

Please reply inline and update this PR. Push new commits to the same branch.
Please don't close this and open a brand-new PR with regenerated code. We lose the whole conversation that way, and it usually reintroduces the things we just fixed. Iterating in place is faster for both of us.

Thanks again for contributing, we're glad you're here!! 🎉

📜 BioBuilder Contributor License Agreement

I give Mark Stevens and BioBuilder permission to license my contributions on any terms they like. I am giving them this license in order to make it possible for them to accept my contributions into their project.

As far as the law allows, my contributions come as is, without any warranty or condition, and I will not be liable to anyone for any damages related to this software or this license, under any kind of legal claim.

MarkAStevens04

Fantastic first pull request, great job!! 🥳 I left some comments on what to change. Here's the TLDR:

Great job using reusable components (DownloadIcon, tooltips)
Love the working CSV downloads
We should try to use the Zustand store for saving state instead of using the react hook. Look at the rxnDrawerOpen and setRxnDrawerOpen properties for a reference on how to use the store to manage this state.
Let's move the styling for the button into Simulation.css. We can keep the styling for the background color in the SimulationDrawer.tsx since it's dynamic.
Let's change the "green" style color to "#87F5A6"

Again, this is an amazing first request! Thank you so much for contributing to this project, this is a super valuable feature, and your turnover time was crazy quick!! Let's make these changes on THIS pr, and we'll be able to push to main. ❤️

MarkAStevens04 · 2026-06-27T12:02:57Z

 } from '@react-spring/web';

-import React from 'react';
+import React, { useState } from 'react';


Let's try not to use state, and use our Zustand store instead!

MarkAStevens04 · 2026-06-27T12:03:13Z

 import { 
-    ChevronDownIcon
+    ChevronDownIcon,
+    DownloadIcon


Nice, love the use of the radix components!

MarkAStevens04 · 2026-06-27T12:03:28Z


 import '../styles/index.css';
 import '../styles/Simulation.css';
+import { TooltipContent, TooltipRoot, TooltipTrigger } from './Tooltips';


Chefs kiss using our reusable tooltip components!! Great work!

MarkAStevens04 · 2026-06-27T12:03:55Z

        from: { rotate: 0, y: '0px' },
    }));

+    const [showCsvDownloadButton, setShowCsvDownloadButton] = useState(false);


Understandable why you would use state, but let's try to shift to using our Zustand store

MarkAStevens04 · 2026-06-27T12:04:46Z

        onSimulate(); // Outer call to run simulation
    }

+    const handleCSVDownload = (event: React.MouseEvent<HTMLButtonElement>) => {


This data looks really good, excellent job!

MarkAStevens04 · 2026-06-27T12:05:59Z

+                    <TooltipTrigger>
+                        <button
+                            style={{
+                                position: "absolute",


Let's move this to our styles/Simulation.css and create a DownloadButton style. We can keep the styling for the backgroundColor here though since it's dynamic!

MarkAStevens04 · 2026-06-27T12:06:26Z

+                                gap: "4px",
+                                padding: "4px 8px",
+                                ...(simStatus === 2
+                                    ? { backgroundColor: "green" }


Let's change this to #87F5A6 to fit with existing palette

namahu · 2026-06-28T00:24:31Z

Thank you for the review! I will work on the fixes now.

namahu · 2026-06-28T01:35:03Z

Thank you for the review! I have addressed the feedback and made the following updates:

Migrated the state management for showCsvDownloadButton from useState to Zustand.
Created a DownloadButton class and moved the fixed styles for the CSV download button into it.
Changed the button background color to #87F5A6 when simStatus === 2.
Updated the button text color to #000000 to fix a readability issue in dark mode caused by the background color change.

Please take another look when you have a chance. Thanks!

MarkAStevens04

Fantastic job!! Thanks again for making those changes, this looks perfect and I'll merge to main! 🥳🥳

MarkAStevens04 · 2026-06-28T13:24:59Z

    const data = useStore((store) => store.simulationData);
    const speciesInfo = useStore((store) => store.visualNodes);

+    const showCsvDownloadButton = useStore((store) => store.showCsvDownloadButton);


Fantastic, thanks for using the store!

MarkAStevens04 · 2026-06-28T13:25:10Z

 	-moz-osx-font-smoothing: grayscale;
 }

+.DownloadButton {


Thanks for putting these styles in here!

github-actions · 2026-07-01T19:14:55Z

✅ Thank you SO MUCH for contributing to the project!! 🎉 One of the maintainers will get back to you ASAP with some feedback. 💛

feat: add csv download

a7f3063

MarkAStevens04 requested changes Jun 27, 2026

View reviewed changes

namahu added 2 commits June 28, 2026 09:39

refactor: migrate state management from useState to Zustand

a3f53b5

refactor: create DownloadButton class and move CSV download styles

1c51043

MarkAStevens04 approved these changes Jun 28, 2026

View reviewed changes

MarkAStevens04 merged commit 08143ec into MarkAStevens04:main Jun 28, 2026

namahu deleted the feat/add-csv-download branch June 29, 2026 00:48

MarkAStevens04 changed the title ~~feat: add csv download~~ [CODE] add csv download Jul 1, 2026

Conversation

namahu commented Jun 27, 2026

🤔 Section A - Description

✅ Verification

🔎 Quick Self Check

🔁 When we request changes

📜 BioBuilder Contributor License Agreement

Uh oh!

MarkAStevens04 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

namahu commented Jun 28, 2026

Uh oh!

namahu commented Jun 28, 2026

Uh oh!

MarkAStevens04 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MarkAStevens04 left a comment •

edited

Loading