feat: integrate Segre Chart into Element Data page (#145)

bryanchriswhite · claude · web-flow · commit 61b61817e317 · 2026-02-23T17:10:55.000+01:00
## Summary - Moves the Segre Chart from its own navigation tab into the Element Data page's "Integrated" tab as a collapsible section below the periodic table - Clicking a nuclide in the Segre chart selects the corresponding element/isotope in-page (bound to the same URL state as the periodic table) - Removes the standalone Segre Chart sidebar nav item - Redirects `/segre-chart` → `/element-data` for backwards compatibility - Adds `onNuclideClick` callback prop to `SegreChartDiagram` for flexible embedding - Adds `sectionTitle` i18n key across all 7 locales ## Test plan - [ ] Open Element Data page, verify Segre Chart collapsible section appears below the periodic table - [ ] Expand the Segre Chart section, verify zoom/pan controls work - [ ] Click a nuclide in the Segre chart, verify the corresponding element is selected and details appear below - [ ] Verify the sidebar no longer shows a separate Segre Chart nav item - [ ] Navigate to `/segre-chart` directly, verify it redirects to `/element-data` - [ ] Test in dark mode for proper contrast - [ ] Test in all supported locales for correct section title translation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude (staging merge) <noreply@anthropic.com>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
 import * as Sentry from '@sentry/react'
 import { DatabaseProvider } from './contexts/DatabaseContext'
 import { ThemeProvider } from './contexts/ThemeContext'
@@ -14,7 +14,6 @@ import ShowElementData from './pages/ShowElementData'
 import TablesInDetail from './pages/TablesInDetail'
 import AllTables from './pages/AllTables'
 import CascadesAll from './pages/CascadesAll'
-import SegreChart from './pages/SegreChart'
 import PrivacyPreferences from './pages/PrivacyPreferences'
 import Help from './pages/Help'
 import SentryTest from './pages/SentryTest'
@@ -64,7 +63,7 @@ function App() {
                 <Route path="/fission" element={<FissionQuery />} />
                 <Route path="/twotwo" element={<TwoToTwoQuery />} />
                 <Route path="/element-data" element={<ShowElementData />} />
-                <Route path="/segre-chart" element={<SegreChart />} />
+                <Route path="/segre-chart" element={<Navigate to="/element-data" replace />} />
                 <Route path="/tables" element={<TablesInDetail />} />
                 <Route path="/all-tables" element={<AllTables />} />
                 <Route path="/cascades" element={<CascadesAll />} />
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useCallback, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
-import { Menu, X, Atom, Moon, Sun, ChevronLeft, ChevronRight, Home as HomeIcon, GitMerge, Scissors, ArrowLeftRight, FlaskConical, Table, TableProperties, Shield, Workflow, HelpCircle, Grid3x3 } from 'lucide-react'
+import { Menu, X, Atom, Moon, Sun, ChevronLeft, ChevronRight, Home as HomeIcon, GitMerge, Scissors, ArrowLeftRight, FlaskConical, Table, TableProperties, Shield, Workflow, HelpCircle } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTheme } from '../contexts/ThemeContext'
 import { useLayout } from '../contexts/LayoutContext'
@@ -27,7 +27,6 @@ interface NavigationItem {
 const navigationItems: NavigationItem[] = [
   { nameKey: 'navigation.home', path: '/', icon: HomeIcon },
   { nameKey: 'navigation.showElementData', path: '/element-data', icon: FlaskConical },
-  { nameKey: 'navigation.segreChart', path: '/segre-chart', icon: Grid3x3 },
   { nameKey: 'navigation.fusionReactions', path: '/fusion', icon: GitMerge },
   { nameKey: 'navigation.fissionReactions', path: '/fission', icon: Scissors },
   { nameKey: 'navigation.twoToTwoReactions', path: '/twotwo', icon: ArrowLeftRight },
diff --git a/src/components/SegreChartDiagram.tsx b/src/components/SegreChartDiagram.tsx
@@ -18,6 +18,7 @@ export interface ChartNuclide {
 
 interface SegreChartDiagramProps {
   nuclides: ChartNuclide[]
+  onNuclideClick?: (nuclide: ChartNuclide) => void
 }
 
 const MAGIC_NUMBERS = [2, 8, 20, 28, 50, 82, 126]
@@ -38,7 +39,7 @@ function valleyOfStabilityN(Z: number): number {
   return Z + 0.006 * Z * Z
 }
 
-export default function SegreChartDiagram({ nuclides }: SegreChartDiagramProps) {
+export default function SegreChartDiagram({ nuclides, onNuclideClick }: SegreChartDiagramProps) {
   const navigate = useNavigate()
   const { t } = useTranslation()
   const { theme } = useTheme()
@@ -86,8 +87,12 @@ export default function SegreChartDiagram({ nuclides }: SegreChartDiagramProps)
   }, [])
 
   const handleClick = useCallback((nuclide: ChartNuclide) => {
-    navigate(`/element-data?Z=${nuclide.Z}&A=${nuclide.A}`)
-  }, [navigate])
+    if (onNuclideClick) {
+      onNuclideClick(nuclide)
+    } else {
+      navigate(`/element-data?Z=${nuclide.Z}&A=${nuclide.A}`)
+    }
+  }, [navigate, onNuclideClick])
 
   const textColor = isDark ? '#9ca3af' : '#6b7280'
   const magicLineColor = isDark ? 'rgba(147, 197, 253, 0.3)' : 'rgba(59, 130, 246, 0.25)'
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
@@ -453,6 +453,7 @@
   "segreChart": {
     "title": "Segre Chart (N-Z Diagram)",
     "description": "Interactive chart of nuclides plotted by proton number (Z) vs neutron number (N), color-coded by stability",
+    "sectionTitle": "Nuklidkarte (Segrè-Diagramm)",
     "stable": "Stable (>10\u2079 years)",
     "longHalfLife": "Long half-life (>100 years)",
     "shortHalfLife": "Short half-life (<100 years)",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -480,6 +480,7 @@
   "segreChart": {
     "title": "Segre Chart (N-Z Diagram)",
     "description": "Interactive chart of nuclides plotted by proton number (Z) vs neutron number (N), color-coded by stability",
+    "sectionTitle": "Nuclide Chart (Segre Chart)",
     "stable": "Stable (>10\u2079 years)",
     "longHalfLife": "Long half-life (>100 years)",
     "shortHalfLife": "Short half-life (<100 years)",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
@@ -453,6 +453,7 @@
   "segreChart": {
     "title": "Segre Chart (N-Z Diagram)",
     "description": "Interactive chart of nuclides plotted by proton number (Z) vs neutron number (N), color-coded by stability",
+    "sectionTitle": "Carta de nucleidos (diagrama de Segrè)",
     "stable": "Stable (>10\u2079 years)",
     "longHalfLife": "Long half-life (>100 years)",
     "shortHalfLife": "Short half-life (<100 years)",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
@@ -453,6 +453,7 @@
   "segreChart": {
     "title": "Segre Chart (N-Z Diagram)",
     "description": "Interactive chart of nuclides plotted by proton number (Z) vs neutron number (N), color-coded by stability",
+    "sectionTitle": "Carte des nucléides (diagramme de Segrè)",
     "stable": "Stable (>10\u2079 years)",
     "longHalfLife": "Long half-life (>100 years)",
     "shortHalfLife": "Short half-life (<100 years)",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
@@ -455,6 +455,7 @@
   "segreChart": {
     "title": "Segre Chart (N-Z Diagram)",
     "description": "Interactive chart of nuclides plotted by proton number (Z) vs neutron number (N), color-coded by stability",
+    "sectionTitle": "核種図（セグレ図）",
     "stable": "Stable (>10\u2079 years)",
     "longHalfLife": "Long half-life (>100 years)",
     "shortHalfLife": "Short half-life (<100 years)",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
@@ -453,6 +453,7 @@
   "segreChart": {
     "title": "Segre Chart (N-Z Diagram)",
     "description": "Interactive chart of nuclides plotted by proton number (Z) vs neutron number (N), color-coded by stability",
+    "sectionTitle": "Карта нуклидов (диаграмма Сегре)",
     "stable": "Stable (>10\u2079 years)",
     "longHalfLife": "Long half-life (>100 years)",
     "shortHalfLife": "Short half-life (<100 years)",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
@@ -455,6 +455,7 @@
   "segreChart": {
     "title": "Segre Chart (N-Z Diagram)",
     "description": "Interactive chart of nuclides plotted by proton number (Z) vs neutron number (N), color-coded by stability",
+    "sectionTitle": "核素图（塞格雷图）",
     "stable": "Stable (>10\u2079 years)",
     "longHalfLife": "Long half-life (>100 years)",
     "shortHalfLife": "Short half-life (<100 years)",
diff --git a/src/pages/ShowElementData.tsx b/src/pages/ShowElementData.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Radiation } from 'lucide-react'
+import { Radiation, ChevronDown } from 'lucide-react'
 import { useDatabase } from '../contexts/DatabaseContext'
 import { useLayout } from '../contexts/LayoutContext'
 import type { Element, Nuclide, AtomicRadiiData, RadioactiveNuclideData, DisplayNuclide, RadioNuclideListItem } from '../types'
@@ -15,6 +15,7 @@ import FilterPanel, { FilterConfig, FilterPreset } from '../components/FilterPan
 import DatabaseLoadingCard from '../components/DatabaseLoadingCard'
 import Tooltip from '../components/Tooltip'
 import DecayChainDiagram from '../components/DecayChainDiagram'
+import SegreChartDiagram, { type ChartNuclide } from '../components/SegreChartDiagram'
 import ColumnToggle from '../components/ColumnToggle'
 import { useColumnVisibility } from '../hooks/useColumnVisibility'
 import {
@@ -178,6 +179,7 @@ export default function ShowElementData() {
   const [elementsCollapsed, setElementsCollapsed] = useState(true)
   const [nuclidesCollapsed, setNuclidesCollapsed] = useState(true)
   const [decaysCollapsed, setDecaysCollapsed] = useState(true)
+  const [segreExpanded, setSegreExpanded] = useState(false)
 
   // Search state (per tab, transient - not in URL)
   const [elementsSearch, setElementsSearch] = useState('')
@@ -230,6 +232,21 @@ export default function ShowElementData() {
     return getAllNuclides(db)
   }, [db])
 
+  // Segre Chart nuclides (derived from allNuclides)
+  const chartNuclides: ChartNuclide[] = useMemo(() => {
+    return allNuclides.map(n => ({
+      Z: n.Z,
+      N: n.A - n.Z,
+      A: n.A,
+      E: n.E,
+      stability: (n.logHalfLife === undefined || n.logHalfLife === null) ? 'unknown' as const
+        : n.logHalfLife > 9 ? 'stable' as const
+        : n.logHalfLife > 2 ? 'long' as const
+        : 'short' as const,
+      logHalfLife: n.logHalfLife,
+    }))
+  }, [allNuclides])
+
   // Get all decays (memoized)
   const allDecays = useMemo(() => {
     if (!db) return []
@@ -1039,6 +1056,16 @@ export default function ShowElementData() {
     }
   }
 
+  const handleSegreNuclideClick = (nuclide: ChartNuclide) => {
+    const newParams = new URLSearchParams(searchParams)
+    newParams.set('Z', nuclide.Z.toString())
+    newParams.set('A', nuclide.A.toString())
+    newParams.set('tab', 'integrated')
+    newParams.delete('iso')
+    newParams.delete('particle')
+    setSearchParams(newParams)
+  }
+
   const handleParticleClick = (particleId: string) => {
     if (!SPECIAL_PARTICLES_BY_ID[particleId]) return
     if (selectedElement !== null) {
@@ -1652,6 +1679,34 @@ export default function ShowElementData() {
             onParticleClick={handleParticleClick}
           />
 
+          {/* Collapsible Segre Chart */}
+          {chartNuclides.length > 0 && (
+            <div className="card mt-6">
+              <button
+                onClick={() => setSegreExpanded(!segreExpanded)}
+                className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors rounded-lg"
+              >
+                <div>
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                    {t('segreChart.sectionTitle')}
+                  </h3>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                    {t('segreChart.nuclideCount', { count: chartNuclides.length })}
+                  </p>
+                </div>
+                <ChevronDown className={`w-5 h-5 text-gray-400 transition-transform duration-200 ${segreExpanded ? 'rotate-180' : ''}`} />
+              </button>
+              <div className={`transition-all duration-300 ease-in-out overflow-hidden ${segreExpanded ? 'max-h-[900px] opacity-100' : 'max-h-0 opacity-0'}`}>
+                <div className="px-4 pb-4">
+                  <SegreChartDiagram nuclides={chartNuclides} onNuclideClick={handleSegreNuclideClick} />
+                  <p className="text-xs text-gray-400 dark:text-gray-500 mt-2 text-center">
+                    {t('segreChart.zoomControls')}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
           {selectedParticleInfo && (
             <ParticleDetailsCard particle={selectedParticleInfo} nuclide={selectedParticleNuclide} />
           )}
