use-case: Understand the platform quickly #99 #100#101
Conversation
✅ Deploy Preview for calypr ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a71991a2e7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <a href="#" class="md-button md-button--primary">Explore Tools</a> | ||
| <a href="#" class="md-button">Examine sample datasets</a> |
There was a problem hiding this comment.
When a homepage visitor clicks either new footer CTA, both links resolve to #, so they only stay on the current page instead of taking the user to tools or datasets. This regresses the previous footer CTAs, which linked to real site sections, and it is especially visible because Explore Tools has an existing tools landing page registered in zensical.toml/docs/tools/index.md; either wire these to real destinations or avoid rendering them as links until the destinations exist.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
Refreshes the CALYPR docs homepage to make evaluation steps more concrete for translational researchers by replacing the prior footer journey with a “Time-to-Decision Toolkit” framing and restructuring the hero/workflow sections around task walkthroughs and a synthetic project catalog.
Changes:
- Reworked homepage hero + workflow section into “Task walkthroughs” with screenshot-based panels and updated headings/labels.
- Replaced the footer “evaluation path” with “Time-to-Decision Toolkit” messaging and updated CTA labels.
- Added supporting CSS for new meta labels and homepage panel screenshots.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| docs/index.md | Updates homepage structure/copy, adds walkthrough panels with screenshots, refreshes footer toolkit + CTA labels. |
| docs/stylesheets/extra.css | Adds styling for usecase-panel__meta and homepage panel screenshots. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <a href="#" class="md-button md-button--primary">Explore Tools</a> | ||
| <a href="#" class="md-button">Examine sample datasets</a> |
| <div class="business-hero__panel" aria-label="CALYPR product interface preview"> | ||
| <img src="images/main-page.png" alt="CALYPR workspace showing project and data operations" loading="eager"> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="solution-section" aria-label="Proof and trust band"> | ||
| <p class="eyebrow">Proof points</p> | ||
| <h2>Built on standards your bioinformatics and platform teams can verify.</h2> | ||
| <div class="value-grid"> | ||
| <article> | ||
| <h3>Open standards foundation</h3> | ||
| <p>Data access on GA4GH DRS, execution through GA4GH TES, and metadata structures aligned to FHIR-oriented research workflows.</p> | ||
| <section class="solution-section" aria-label="Product workflow examples"> | ||
| <p class="eyebrow">Task walkthroughs</p> | ||
| <h2>Common research tasks, demonstrated with synthetic projects.</h2> | ||
| <div class="solution-strip solution-strip--page"> | ||
| <article class="usecase-panel"> | ||
| <h3>1) Explore and organize research data</h3> | ||
| <p class="usecase-panel__meta">TRX-101 Lung Response Cohort</p> | ||
| <p>Browse study files and metadata, then filter assets by cohort and assay type before analysis kickoff.</p> | ||
| <img src="images/main-page.png" alt="Research project view for data exploration and project management" loading="lazy"> |
| .home .usecase-panel img { | ||
| width: 100%; | ||
| margin-top: 1rem; | ||
| border: 1px solid #dbeafe; | ||
| border-radius: 14px; | ||
| box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12); | ||
| } |
| .usecase-panel .usecase-panel__meta { | ||
| margin-top: 0.9rem; | ||
| color: #64748b; | ||
| font-size: 0.72rem; | ||
| font-weight: 700; | ||
| letter-spacing: 0.08em; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| .usecase-panel .usecase-panel__meta + p { | ||
| margin-top: 0.45rem; | ||
| } |
|
1st set of cards The styling looks off on these cards, and the images in the cards are too small for the uninitiated user to know what they are. Remove numbering from cards perhaps. “Complete a lightweight self-assessment in 20 minutes.” This sounds like “book a demo” but in more words. I don't like the 2 separate card grids in the same page in the home page: |
Done |
|
Homepage UX + Infographic Update (follow-up)Implemented a set of homepage improvements focused on large-screen rendering, infographic reliability, and Task walkthrough readability. ✅ What changedHero / infographic
Hero layout responsiveness (large monitors)
Task walkthrough cards
📁 Files touched
🧪 ValidationRan a full build successfully: cd /Users/walsbr/calypr/attic/calypr.github.io
make build```
👀 Reviewer focus
* Home hero on large displays (ultrawide / 4k): copy-image balance and infographic size.
* Task walkthrough cards: heading wrapping and readability.
* Infographic rendering consistency in-browser + embedded homepage context. |
|
Next steps #102 |
Summary
This PR refreshes homepage messaging in
docs/index.mdto better support translational researchers evaluating CALYPR.The update replaces the abstract footer journey with a concrete Time-to-Decision Toolkit concept and tightens nearby section copy to reduce repetition and improve scanability.
Why
Addresses this use case:
Scope
Updated footer strategy (homepage)
Replaced prior “evaluation path” footer content with Time-to-Decision Toolkit framing:
Updated footer CTA labels:
Download toolkit→Explore ToolsSchedule a 30-min walkthrough→Examine sample datasetsTightened nearby copy
In
docs/index.md:Workflow examples→Task walkthroughsReal tasks shown with synthetic demo projects.→Common research tasks, demonstrated with synthetic projects.aria-label:Synthetic demo projects used in homepage screenshots→Synthetic project catalogSynthetic demo projects→Project catalogThese example projects power the screenshots above.→These synthetic projects back the workflows above.Files Changed
docs/index.mdReviewer Guide
Quick pass (2–3 min)
Explore ToolsExamine sample datasetsContent pass (5–10 min)
Accessibility/semantics pass
aria-labelremains descriptive and accurate“Demo project” concept (for reviewers)
A Demo project is a curated, synthetic project used to demonstrate realistic end-to-end workflows without exposing real customer/patient data.
What it means in this page
Demo project: TRX-101...indicate scenario-backed examplesBackend Expectations (context for review)
This PR is copy-only, but the “Demo project” concept assumes:
Non-goals in this PR
href="#"placeholders)Risk
Validation
docs/index.mdFollow-ups (optional)
Explore Tools→ tools landing pageExamine sample datasets→ sample dataset/project docs page