diff --git a/src/components/Common/GraphMetrics.tsx b/src/components/Common/GraphMetrics.tsx
index 5a5c14c..3428b48 100644
--- a/src/components/Common/GraphMetrics.tsx
+++ b/src/components/Common/GraphMetrics.tsx
@@ -1,6 +1,5 @@
import { useMemo } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { Tooltip } from '@mui/material';
import WarningIcon from '@mui/icons-material/Warning';
import InfoIcon from '@mui/icons-material/Info';
import BarChartIcon from '@mui/icons-material/BarChart';
@@ -11,7 +10,6 @@ interface GraphMetricsProps {
nodes: Actor[];
edges: Relation[];
onActorClick?: (actorId: string) => void;
- onCollapse?: () => void;
}
/**
@@ -20,7 +18,7 @@ interface GraphMetricsProps {
* Shows when no node or edge is selected in the right panel.
* Provides insights into graph structure, connectivity, and key actors.
*/
-const GraphMetrics = ({ nodes, edges, onActorClick, onCollapse }: GraphMetricsProps) => {
+const GraphMetrics = ({ nodes, edges, onActorClick }: GraphMetricsProps) => {
// Calculate all metrics (memoized for performance - auto-updates when nodes/edges change)
const metrics = useMemo(() => {
return calculateGraphMetrics(nodes, edges);
@@ -36,21 +34,6 @@ const GraphMetrics = ({ nodes, edges, onActorClick, onCollapse }: GraphMetricsPr
return (
- {/* Header */}
-
-
-
-
Graph Analysis
-
- {onCollapse && (
-
-
-
-
-
- )}
-
-
{/* Scrollable Content */}
{/* Overview Section */}
diff --git a/src/components/Panels/RightPanel.tsx b/src/components/Panels/RightPanel.tsx
index 762bc52..05d999a 100644
--- a/src/components/Panels/RightPanel.tsx
+++ b/src/components/Panels/RightPanel.tsx
@@ -27,6 +27,35 @@ interface Props {
onClose: () => void;
}
+/**
+ * PanelHeader - Reusable header component for right panel views
+ */
+interface PanelHeaderProps {
+ title: string;
+ onClose?: () => void;
+ onCollapse: () => void;
+}
+
+const PanelHeader = ({ title, onClose, onCollapse }: PanelHeaderProps) => (
+
+
{title}
+
+ {onClose && (
+
+
+ ✕
+
+
+ )}
+
+
+
+
+
+
+
+);
+
const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
const {
@@ -181,7 +210,8 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
className="h-full bg-white border-l border-gray-200 flex flex-col"
style={{ width: `${rightPanelWidth}px` }}
>
-
+
+
{ConfirmDialogComponent}
);
@@ -196,22 +226,7 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
className="h-full bg-white border-l border-gray-200 flex flex-col"
style={{ width: `${rightPanelWidth}px` }}
>
- {/* Header */}
-
-
Actor Properties
-
-
-
- ✕
-
-
-
-
-
-
-
-
-
+
{/* Scrollable content */}
@@ -377,22 +392,7 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
className="h-full bg-white border-l border-gray-200 flex flex-col"
style={{ width: `${rightPanelWidth}px` }}
>
- {/* Header */}
-
-
Relation Properties
-
-
-
- ✕
-
-
-
-
-
-
-
-
-
+
{/* Scrollable content */}