From bb4f93443680f92c8e07185dfca34e71af055588 Mon Sep 17 00:00:00 2001 From: Vishakh Date: Wed, 24 Jun 2026 16:43:30 -0400 Subject: [PATCH 1/5] Rationalized tours to reduce friction. --- app/browse/page.tsx | 11 +---- app/components/MenuBar.tsx | 4 +- app/components/tours/tourContent.ts | 49 ---------------------- app/dna-chat/page.tsx | 16 ++++---- app/globals.css | 64 ++++++++--------------------- app/overview-report/page.tsx | 12 +----- 6 files changed, 30 insertions(+), 126 deletions(-) diff --git a/app/browse/page.tsx b/app/browse/page.tsx index 8744cf7..0db2b84 100644 --- a/app/browse/page.tsx +++ b/app/browse/page.tsx @@ -313,13 +313,6 @@ function ExplorePage() { } }, [mounted]); - // Auto-show guided tour on first visit - useEffect(() => { - if (mounted && !hasCompletedTour(exploreTour.id)) { - setTourOpen(true); - } - }, [mounted]); - const [filters, setFilters] = useState(defaultFilters); useEffect(() => { @@ -786,9 +779,7 @@ function ExplorePage() {
{!sectionCollapsed && ( - + )} {!sectionCollapsed && (
- +
diff --git a/app/components/tours/tourContent.ts b/app/components/tours/tourContent.ts index 2766cc3..793205d 100644 --- a/app/components/tours/tourContent.ts +++ b/app/components/tours/tourContent.ts @@ -53,13 +53,6 @@ export const exploreTour: TourContent = { selector: '[data-tour="run-all-button"]', placement: "bottom", }, - { - name: "your_result", - title: "Your personal result", - body: "After analyzing, the Your Result column shows how your genotype compares to each study. Click any row to see the details.", - selector: '[data-tour="your-result-header"]', - placement: "bottom", - }, ], }; @@ -73,27 +66,6 @@ export const dnaChatTour: TourContent = { body: "DNA Chat is an anonymous and confidential LLM chat that uses your genetic results as context. Ask anything about your traits, sleep, diet, or risks.", }, myDataStep, - { - name: "prompts", - title: "Try a suggested prompt", - body: "Not sure what to ask? Tap any of these suggestions to fill the chat box. They're a great starting point.", - selector: ".example-questions", - placement: "top", - }, - { - name: "input", - title: "Or type your own", - body: "Type any question about your DNA here. The chat keeps your context across follow-up questions.", - selector: "textarea.chat-input", - placement: "top", - }, - { - name: "send", - title: "Send your question", - body: "Click here to send. The first answer pulls in your most relevant results as context and follow-ups continue the conversation.", - selector: ".chat-send-button", - placement: "top", - }, { name: "attach", title: "Upload lab reports and documents", @@ -161,13 +133,6 @@ export const menuBarTour: TourContent = { selector: '[data-tour="my-data-button"]', placement: "bottom", }, - { - name: "results", - title: "Results", - body: "Save your analysis results to a file or load a previous session. Use this to pick up where you left off or share results between devices.", - selector: '[data-tour="results-button"]', - placement: "bottom", - }, { name: "run_all", title: "Run All", @@ -196,19 +161,5 @@ export const menuBarTour: TourContent = { selector: '[data-tour="cache-button"]', placement: "bottom", }, - { - name: "help", - title: "Help", - body: "Reopen the onboarding tour or find answers to common questions here.", - selector: '[data-tour="help-button"]', - placement: "bottom", - }, - { - name: "theme", - title: "Light / Dark mode", - body: "Toggle between light and dark themes. Your preference is saved and applied on every visit.", - selector: '[data-tour="theme-button"]', - placement: "bottom", - }, ], }; diff --git a/app/dna-chat/page.tsx b/app/dna-chat/page.tsx index 5d33d5e..4eaa99f 100644 --- a/app/dna-chat/page.tsx +++ b/app/dna-chat/page.tsx @@ -230,13 +230,15 @@ export default function DNAChatPage() { )}
- +
+ +
diff --git a/app/globals.css b/app/globals.css index eb608af..a451051 100644 --- a/app/globals.css +++ b/app/globals.css @@ -11832,37 +11832,27 @@ details[open] .summary-arrow { padding: 0.1rem 1rem 0.35rem; } -.menu-explain-link { - background: none; - border: none; - color: var(--text-muted, #888); - font-size: 0.72rem; +.tour-help-button { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + border: 1.5px solid var(--text-secondary); + background: transparent; + color: var(--text-secondary); + font-size: 0.9rem; + font-weight: 600; cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; padding: 0; - text-decoration: underline; - text-underline-offset: 2px; - opacity: 0.65; + transition: border-color 0.15s, color 0.15s; } -.menu-explain-link:hover { - opacity: 1; - color: var(--accent-blue); -} - -.tour-trigger-link { - background: none; - border: none; - color: var(--accent-blue); - font-size: 0.85rem; - cursor: pointer; - padding: 0.25rem 0.5rem; - border-radius: 4px; - text-decoration: underline; - text-underline-offset: 3px; -} - -.tour-trigger-link:hover { - background: rgba(59, 130, 246, 0.08); +.tour-help-button:hover { + border-color: var(--text-primary); + color: var(--text-primary); } .mobile-compatibility-notice { @@ -12048,26 +12038,6 @@ details[open] .summary-arrow { position: relative; } -.dna-chat-tour-button { - position: absolute; - top: 0.5rem; - right: 0.6rem; - z-index: 10; - padding: 0.25rem 0.6rem; - border-radius: 4px; - border: 1px solid rgba(15, 23, 42, 0.18); - background: rgba(255, 255, 255, 0.9); - color: rgba(15, 23, 42, 0.55); - font-size: 0.72rem; - font-weight: 500; - cursor: pointer; -} - -.dna-chat-tour-button:hover { - background: #ffffff; - color: rgba(15, 23, 42, 0.85); - border-color: rgba(15, 23, 42, 0.35); -} /* Browse page tab toggle */ .browse-tab-toggle { diff --git a/app/overview-report/page.tsx b/app/overview-report/page.tsx index 0cc0d49..340e947 100644 --- a/app/overview-report/page.tsx +++ b/app/overview-report/page.tsx @@ -14,7 +14,7 @@ import { OverviewReportIcon } from "../components/Icons"; import { useAuth } from "../components/AuthProvider"; import { useResults } from "../components/ResultsContext"; import { hasValidPromoAccess } from "@/lib/promo-access"; -import GuidedTour, { hasCompletedTour } from "../components/GuidedTour"; +import GuidedTour from "../components/GuidedTour"; import { overviewReportTour } from "../components/tours/tourContent"; import { trackOverviewReportViewed } from "@/lib/analytics"; @@ -44,12 +44,6 @@ export default function OverviewReportPage() { }, []); - useEffect(() => { - if (!hasCompletedTour(overviewReportTour.id)) { - setTourOpen(true); - } - }, []); - const hasPremiumAccess = hasActiveSubscription || hasPromoAccess; const hasResults = savedResults.length > 0; @@ -92,9 +86,7 @@ export default function OverviewReportPage() { gateDescription="Subscribe for $4.99/month to access Healthspan, Top Traits, and Overview reports." />
- +
{null} From 0a352a7d2a979ec7d618093ad4ff317d4bbb443a Mon Sep 17 00:00:00 2001 From: Vishakh Date: Wed, 24 Jun 2026 16:48:47 -0400 Subject: [PATCH 2/5] Rationalized subscription messaging. --- app/components/PaymentModal.tsx | 2 +- app/components/StripeSubscriptionForm.tsx | 4 ++-- app/subscribe/page.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/components/PaymentModal.tsx b/app/components/PaymentModal.tsx index 1901d24..77eb501 100644 --- a/app/components/PaymentModal.tsx +++ b/app/components/PaymentModal.tsx @@ -409,7 +409,7 @@ export default function PaymentModal({ isOpen = true, onClose, onSuccess, displa

Subscribe to Premium

-

Get DNA Chat and Overview Report

+

Research in DNA Chat + all premium reports

{step === 'choice' && ( diff --git a/app/components/StripeSubscriptionForm.tsx b/app/components/StripeSubscriptionForm.tsx index 21d93cc..fac2bc2 100644 --- a/app/components/StripeSubscriptionForm.tsx +++ b/app/components/StripeSubscriptionForm.tsx @@ -170,11 +170,11 @@ function SubscriptionForm({ clientSecret, walletAddress, couponCode, discount, i
✓ - DNA Chat Assistant + Research in DNA Chat
✓ - Overview Report + All premium reports (Healthspan, Top Traits, Overview)
diff --git a/app/subscribe/page.tsx b/app/subscribe/page.tsx index 22cc0f7..a6f323f 100644 --- a/app/subscribe/page.tsx +++ b/app/subscribe/page.tsx @@ -53,7 +53,7 @@ function SubscribeContent() {
Premium -

Subscribe to Monadic DNA Explorer Premium

+

Unlock research and premium reports

$4.99/month. Cancel any time.

@@ -80,7 +80,7 @@ function SubscribeContent() {

Always free

  • Health Insights Report
    • -
  • Send in DNA Chat
    • +
  • Ask questions in DNA Chat
  • Browse and search all studies
  • Explore your results
  • Upload your own DNA file
    • From a9fb8597b8cd69d17a48e967476da3a2a31aa3de Mon Sep 17 00:00:00 2001 From: Vishakh Date: Wed, 24 Jun 2026 17:03:07 -0400 Subject: [PATCH 3/5] UI tweaks to browse. --- app/browse/page.tsx | 37 ++++++++++++++++++++++++++++++++++--- app/globals.css | 24 ++++++++++++++++++++++++ lib/analytics.ts | 20 ++++++++++++++++++++ 3 files changed, 78 insertions(+), 3 deletions(-) diff --git a/app/browse/page.tsx b/app/browse/page.tsx index 0db2b84..a6ef495 100644 --- a/app/browse/page.tsx +++ b/app/browse/page.tsx @@ -28,6 +28,11 @@ import { trackQueryRun, trackExploreTabViewed, trackSearchModeChanged, + trackBrowsePageViewed, + trackBrowseFiltersExpanded, + trackBrowseSearchChanged, + trackStudyOpened, + trackRunAllCtaClicked, } from "@/lib/analytics"; // Note: Metadata must be exported from layout.tsx or a server component @@ -310,6 +315,7 @@ function ExplorePage() { useEffect(() => { if (mounted) { trackExploreTabViewed(); + trackBrowsePageViewed(); } }, [mounted]); @@ -408,6 +414,7 @@ function ExplorePage() { startTransition(() => { updateFilter("search", value); }); + trackBrowseSearchChanged(value); } }, [filters.search, updateFilter]); @@ -570,6 +577,15 @@ function ExplorePage() { userInitiatedSearchRef.current = false; }; + const SEARCH_CHIPS = ['sleep', 'cholesterol', 'caffeine', "Alzheimer's", 'diabetes'] as const; + + const handleChipClick = (term: string) => { + userInitiatedSearchRef.current = true; + startTransition(() => updateFilter("search", term)); + setSectionCollapsed(false); + trackBrowseSearchChanged(term); + }; + const handleColumnSort = (sortKey: SortOption) => { const newDirection = filters.sort === sortKey @@ -601,6 +617,7 @@ function ExplorePage() { }; const handleRunAll = () => { + trackRunAllCtaClicked(); if (!genotypeData || genotypeData.size === 0) { trackRunAllFailed("explore", "no_genotype_data"); alert("No SNPs found in your genetic data"); @@ -775,7 +792,18 @@ function ExplorePage() {

    Filter genetic association studies by various criteria.

    )} - {sectionCollapsed &&

    Study Filters

    } + {sectionCollapsed && ( + <> +

    Study Filters

    +
    + {SEARCH_CHIPS.map(term => ( + + ))} +
    + + )}
    {!sectionCollapsed && ( @@ -789,7 +817,10 @@ function ExplorePage() {