shadcn.io is not affiliated with official shadcn/ui
Scientist Research Funding Profile Block for Solid
A scientist profile as a grant timeline: five grants as pickable bars on a 2023 to 2028 year axis with a line at the as-of day, a role filter that dims the other grants, the funded sum worked out, and the picked grant's funder, dates, status and co-investigators.
Installation
Overview
Lay a scientist's funding on a calendar, with this scientist research profile for Solid with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the scientist: initials, name, role and station, and a badge that sums the funding of the grants that are lit ("$3.4M funded through 2028"), worked out from the data. A Toggle Group (All, PI, Co-I) narrows the timeline to the grants where she leads or contributes by dimming the others, not by removing them, so the axis and the panel never move. The timeline is five rows on a 2023 to 2028 year axis, drawn in CSS: each row is a radio you can pick with a click or the arrow keys, its bar running from the start date to the end date, with a solid line at the as-of day; on a narrow screen it scrolls sideways. The grant you pick is read under it: its funder, amount, dates, status in words (completed, active or starting), and the co-investigators as initials. It's built from Toggle Group, Badge, Avatar and Guides with CSS only. The scientist, the funders and the grants are invented. For a lab-pages service, a faculty site or any profile with a funding record.
FAQ
How do I fill it with my own grants?
Edit GRANTS in the Ark file: each grant has a title, a funder, an amount in thousands of dollars, a role (pi or coi), start and end dates as ISO text and its co-investigators. AS_OF is the day the page treats as today, and AXIS_START and AXIS_END set the years shown. Bar positions, the status words, the sums and the compact money text are worked out from those, so nothing is typed twice.
Where does each grant's status come from?
From its dates against AS_OF: a grant that ended before that day is Completed, one that has not started is Starts with its month, and the rest are Active until their end month. The clock is never read, so the page reads the same whenever it is opened. In a real app pass today's date in as AS_OF.
What does the role filter do?
It dims the grants where she has the other role and updates the funded sum for the grants that are lit; it never removes a row, so the axis, the rows and the height of the panel stay put. The status line says how many are lit ("2 of 5 grants lit, the rest dimmed."). Dimmed grants can still be picked and read.
How do I use the timeline with a keyboard or a screen reader?
The rows are native radios in one group named "Grants, in start order", so Tab enters at the picked grant and the arrow keys move between grants, picking each. Each row is named with the title, the role, the amount and the status. The bars, the year headings and the as-of line are hidden from assistive technology because the names and the details below say the same.
Is it accessible, and what about right-to-left?
The year axis and the bars always run left to right, since they are a calendar; the words in each row follow the page's direction, with titles and names isolated. The picked row is bold and tinted, bars carry a solid, mid or faint weight, and the dates and status are in text, so nothing rests on shade alone. The scroll region on a phone is reachable because its rows can be focused. The status line is a polite live region present from the start.
What stays local, and how do I wire it to real data?
Everything is typed sample data, and picking a grant or a filter only changes the page and the status line. To wire it up, load the grants from your own records into GRANTS, keep the date helpers and the sum, and link the funder and the co-investigators to their pages. Amounts here are examples, not real awards.