Merge pull request #215 from cBioPortal/feature/backend-info-display

feat: add backend info display

Author: hweej

.changeset/backend-info-display.md

@@ -0,0 +1,5 @@
+---
+"@cbioportal-cell-explorer/highperformer": patch
+---
+
+Add backend detection via /api/info probe and display version info in branding header popover

packages/highperformer/src/App.tsx

@@ -1,16 +1,20 @@
+import { useEffect } from 'react'
 import { Layout } from 'antd'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import { ProfilePage } from '@cbioportal-cell-explorer/profiler'
 import Home from './pages/Home'
 import View from './pages/View'
 import ZarrView from './pages/ZarrView'
+import useAppStore from './store/useAppStore'
 
 const { Content } = Layout
 
 const ENABLE_PROFILER = import.meta.env.VITE_ENABLE_PROFILER === 'true'
 const ENABLE_ZARR_VIEW = import.meta.env.VITE_ENABLE_ZARR_VIEW === 'true'
 
 function App() {
+  const probeBackend = useAppStore((s) => s.probeBackend)
+  useEffect(() => { probeBackend() }, [probeBackend])
   return (
     <BrowserRouter basename={import.meta.env.BASE_URL}>
       <Routes>

packages/highperformer/src/pages/View.tsx

@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useSearchParams, useNavigate, Link } from 'react-router-dom'
 import { Collapse, InputNumber, Layout, Popover, Switch, Typography, Select, Spin, message } from 'antd'
-import { BgColorsOutlined, DatabaseOutlined, DotChartOutlined, HolderOutlined, LeftOutlined, LinkOutlined, RightOutlined, SettingOutlined } from '@ant-design/icons'
+import { BgColorsOutlined, DatabaseOutlined, DotChartOutlined, HolderOutlined, InfoCircleOutlined, LeftOutlined, LinkOutlined, RightOutlined, SettingOutlined } from '@ant-design/icons'
 import { DeckGL } from '@deck.gl/react'
 import { OrthographicView } from '@deck.gl/core'
 import { PolygonLayer, ScatterplotLayer } from '@deck.gl/layers'
@@ -19,7 +19,6 @@ import ColorBySection from '../components/ColorBySection'
 import SelectionOverlay from '../components/SelectionOverlay'
 import SelectionToolbar from '../components/SelectionToolbar'
 import SummaryPanel from '../components/SummaryPanel'
-import { VersionTag } from '../components/VersionTag'
 import { loadDatasets, saveDatasets } from '../utils/datasets'
 
 const { Sider, Content } = Layout
@@ -175,15 +174,55 @@ function CollapsedSidebar({ onExpand }: { onExpand: () => void }) {
   )
 }
 
+const infoRowStyle: React.CSSProperties = { display: 'flex', justifyContent: 'space-between', gap: 16, fontSize: 12 }
+
+function InfoPopoverContent() {
+  const backendInfo = useAppStore((s) => s.backendInfo)
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      <div style={infoRowStyle}>
+        <Typography.Text type="secondary">Version</Typography.Text>
+        <Typography.Text>v{__APP_VERSION__}</Typography.Text>
+      </div>
+      <div style={infoRowStyle}>
+        <Typography.Text type="secondary">SHA</Typography.Text>
+        <Typography.Text code style={{ fontSize: 11 }}>{__COMMIT_HASH__}</Typography.Text>
+      </div>
+      {backendInfo && (
+        <>
+          <div style={infoRowStyle}>
+            <Typography.Text type="secondary">API version</Typography.Text>
+            <Typography.Text>v{backendInfo.version}</Typography.Text>
+          </div>
+          <div style={infoRowStyle}>
+            <Typography.Text type="secondary">API environment</Typography.Text>
+            <Typography.Text>{backendInfo.environment}</Typography.Text>
+          </div>
+          {backendInfo.git_sha && (
+            <div style={infoRowStyle}>
+              <Typography.Text type="secondary">API SHA</Typography.Text>
+              <Typography.Text code style={{ fontSize: 11 }}>{backendInfo.git_sha}</Typography.Text>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
 function BrandingHeader() {
   return (
     <div style={{ padding: '12px 16px', borderBottom: '1px solid #f0f0f0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
       <Link to="/" style={{ textDecoration: 'none' }}>
         <Typography.Title level={5} style={{ margin: 0 }}>
           cBioPortal Cell Explorer{' '}
-          <VersionTag version={__APP_VERSION__} commitHash={__COMMIT_HASH__} />
+          <span style={{ fontSize: 12, color: '#999', fontWeight: 'normal' }}>v{__APP_VERSION__}</span>
         </Typography.Title>
       </Link>
+      <Popover content={<InfoPopoverContent />} trigger="click" placement="bottomRight">
+        <InfoCircleOutlined style={{ fontSize: 14, color: '#999', cursor: 'pointer' }} />
+      </Popover>
     </div>
   )
 }

packages/highperformer/src/store/useAppStore.ts

@@ -21,6 +21,12 @@ export interface EmbeddingData {
   bounds: EmbeddingBounds
 }
 
+export interface BackendInfo {
+  version: string
+  environment: string
+  git_sha: string | null
+}
+
 export type ColorMode = 'category' | 'gene'
 
 // Selection types
@@ -164,6 +170,10 @@ export interface AppState {
   reorderSummaryObsColumns: (reordered: string[]) => void
   reorderSummaryGenes: (reordered: string[]) => void
 
+  // Backend info (null = no backend detected)
+  backendInfo: BackendInfo | null
+  probeBackend: () => Promise<void>
+
   // UI visibility toggles (for embedded mode)
   showHeader: boolean
   showLeftSidebar: boolean
@@ -344,6 +354,18 @@ const useAppStore = create<AppState>((set, get) => ({
   customGroupPreviousEnabledIds: null,
 
   // UI toggles
+  backendInfo: null,
+  probeBackend: async () => {
+    try {
+      const res = await fetch('/api/info')
+      if (!res.ok) return
+      const data = await res.json()
+      set({ backendInfo: data })
+    } catch {
+      // No backend available — frontend-only mode
+    }
+  },
+
   showHeader: true,
   showLeftSidebar: true,
   showRightSidebar: true,