@12-apps/ui 1.0.0 → 1.3.1

package/src/components/data-display/TimingDiagram/TimingDiagram.tsx

@@ -1,17 +1,15 @@
-import { alpha, Box, Paper, styled, Tooltip, Typography, useTheme } from '@mui/material';
-import type { FC} from 'react';
+import { alpha, Box, Paper, styled, Typography } from '@mui/material';
+import type { FC } from 'react';
 import React, { useMemo } from 'react';
 
 import type { TimingData, TimingDiagramProps } from './TimingDiagram.types';
-
-// Color configurations
-const phaseColors = {
-  dns: '#9C27B0', // Purple
-  connect: '#2196F3', // Blue
-  ssl: '#00BCD4', // Cyan
-  request: '#4CAF50', // Green
-  response: '#FF9800', // Orange
-};
+import type { Phase, PhaseKey, TimingViewProps } from './TimingDiagram.views';
+import {
+  HorizontalView,
+  phaseColors,
+  StackedView,
+  WaterfallView,
+} from './TimingDiagram.views';
 
 // Styled components
 const DiagramContainer = styled(Paper)(({ theme }) => ({
@@ -23,163 +21,6 @@ const DiagramContainer = styled(Paper)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius * 2,
 }));
 
-const WaterfallContainer = styled(Box)(({ theme }) => ({
-  position: 'relative',
-  width: '100%',
-  marginTop: theme.spacing(2),
-}));
-
-const WaterfallBar = styled(Box, {
-  shouldForwardProp: (prop) =>
-    !['phaseColor', 'offset', 'width', 'animated'].includes(prop as string),
-})<{
-  phaseColor: string;
-  offset: number;
-  width: number;
-  animated: boolean;
-}>(({ theme, phaseColor, offset, width, animated }) => ({
-  position: 'absolute',
-  height: 32,
-  left: `${offset}%`,
-  width: `${width}%`,
-  background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,
-  borderRadius: theme.shape.borderRadius,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: theme.palette.getContrastText(phaseColor),
-  fontSize: '0.75rem',
-  fontWeight: 500,
-  boxShadow: `0 2px 8px ${alpha(phaseColor, 0.3)}`,
-  transition: animated ? 'all 0.5s ease' : 'none',
-  animation: animated ? 'slideIn 0.5s ease' : 'none',
-  '@keyframes slideIn': {
-    from: {
-      transform: 'translateX(-20px)',
-      opacity: 0,
-    },
-    to: {
-      transform: 'translateX(0)',
-      opacity: 1,
-    },
-  },
-  '&:hover': {
-    transform: 'translateY(-2px)',
-    boxShadow: `0 4px 12px ${alpha(phaseColor, 0.5)}`,
-    zIndex: 10,
-  },
-}));
-
-const StackedBar = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'animated',
-})<{ animated: boolean }>(({ theme, animated }) => ({
-  display: 'flex',
-  width: '100%',
-  height: 40,
-  borderRadius: theme.shape.borderRadius,
-  overflow: 'hidden',
-  boxShadow: theme.shadows[2],
-  ...(animated && {
-    '& > div': {
-      animation: 'expandWidth 0.8s ease',
-    },
-    '@keyframes expandWidth': {
-      from: { width: 0 },
-      to: { width: '100%' },
-    },
-  }),
-}));
-
-const StackedSegment = styled(Box, {
-  shouldForwardProp: (prop) => !['phaseColor', 'width'].includes(prop as string),
-})<{ phaseColor: string; width: number }>(({ phaseColor, width }) => ({
-  width: `${width}%`,
-  background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: '#fff',
-  fontSize: '0.7rem',
-  fontWeight: 600,
-  position: 'relative',
-  transition: 'all 0.3s ease',
-  '&:hover': {
-    filter: 'brightness(1.1)',
-    zIndex: 1,
-  },
-}));
-
-const HorizontalBar = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing(1),
-  marginTop: theme.spacing(2),
-}));
-
-const HorizontalSegment = styled(Box, {
-  shouldForwardProp: (prop) => !['phaseColor', 'width', 'animated'].includes(prop as string),
-})<{
-  phaseColor: string;
-  width: number;
-  animated: boolean;
-}>(({ theme, phaseColor, animated }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.spacing(2),
-  '& .label': {
-    minWidth: 80,
-    fontSize: '0.85rem',
-    fontWeight: 500,
-    color: theme.palette.text.secondary,
-  },
-  '& .bar': {
-    flex: 1,
-    height: 24,
-    borderRadius: theme.shape.borderRadius,
-    background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,
-    position: 'relative',
-    overflow: 'hidden',
-    boxShadow: `0 2px 6px ${alpha(phaseColor, 0.25)}`,
-    ...(animated && {
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: `linear-gradient(90deg, transparent 0%, ${alpha('#fff', 0.3)} 50%, transparent 100%)`,
-        animation: 'shimmer 2s infinite',
-      },
-      '@keyframes shimmer': {
-        from: { transform: 'translateX(-100%)' },
-        to: { transform: 'translateX(100%)' },
-      },
-    }),
-  },
-  '& .value': {
-    minWidth: 60,
-    textAlign: 'right',
-    fontSize: '0.85rem',
-    fontWeight: 600,
-    color: phaseColor,
-  },
-}));
-
-const TimelineAxis = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  marginTop: theme.spacing(1),
-  paddingTop: theme.spacing(1),
-  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-}));
-
-const TimeLabel = styled(Typography)(({ theme }) => ({
-  fontSize: '0.7rem',
-  color: theme.palette.text.secondary,
-  fontWeight: 500,
-}));
-
 const Legend = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexWrap: 'wrap',
@@ -216,9 +57,21 @@ const calculatePercentages = (data: TimingData): Record<string, number> => {
   };
 };
 
-const formatTime = (ms: number): string => {
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(2)}s`;
+// A phase with no recorded time never happened — an HTTP request has no SSL
+// handshake, for instance — so it gets no bar and no legend entry.
+const phasesOf = (data: TimingData): Phase[] =>
+  [
+    { key: 'dns', label: 'DNS Lookup', value: data.dns },
+    { key: 'connect', label: 'Connection', value: data.connect },
+    { key: 'ssl', label: 'SSL/TLS', value: data.ssl },
+    { key: 'request', label: 'Request', value: data.request },
+    { key: 'response', label: 'Response', value: data.response },
+  ].filter((phase) => phase.value !== undefined && phase.value > 0);
+
+const VIEWS: Record<string, FC<TimingViewProps>> = {
+  waterfall: WaterfallView,
+  stacked: StackedView,
+  horizontal: HorizontalView,
 };
 
 // Main component
@@ -230,143 +83,9 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
   showTooltips = true,
   variant = 'waterfall',
 }) => {
-  const theme = useTheme();
   const percentages = useMemo(() => calculatePercentages(data), [data]);
-
-  const phases = [
-    { key: 'dns', label: 'DNS Lookup', value: data.dns },
-    { key: 'connect', label: 'Connection', value: data.connect },
-    { key: 'ssl', label: 'SSL/TLS', value: data.ssl },
-    { key: 'request', label: 'Request', value: data.request },
-    { key: 'response', label: 'Response', value: data.response },
-  ].filter((phase) => phase.value !== undefined && phase.value > 0);
-
-  const renderWaterfall = () => {
-    let offset = 0;
-    return (
-      <WaterfallContainer style={{ height: height + 40 }} data-variant="waterfall">
-        {phases.map((phase, index) => {
-          const width = percentages[phase.key as keyof typeof percentages] ?? 0;
-          const currentOffset = offset;
-          offset += width;
-
-          const bar = (
-            <WaterfallBar
-              key={phase.key}
-              data-testid={`timing-segment-${phase.key}`}
-              phaseColor={phaseColors[phase.key as keyof typeof phaseColors]}
-              offset={currentOffset}
-              width={width}
-              animated={animated}
-              data-animated={animated.toString()}
-              style={{
-                top: index * 8,
-                width: `${width}%`,
-                left: `${currentOffset}%`,
-              }}
-            >
-              {showLabels && width > 10 && (
-                <span data-testid="timing-label">{formatTime(phase.value!)}</span>
-              )}
-            </WaterfallBar>
-          );
-
-          return showTooltips ? (
-            <Tooltip
-              key={phase.key}
-              title={`${phase.label}: ${formatTime(phase.value!)}`}
-              placement="top"
-              role="tooltip"
-              aria-describedby={`tooltip-${phase.key}`}
-            >
-              {bar}
-            </Tooltip>
-          ) : (
-            bar
-          );
-        })}
-        <TimelineAxis style={{ marginTop: height }}>
-          <TimeLabel>0ms</TimeLabel>
-          <TimeLabel>{formatTime(data.total / 2)}</TimeLabel>
-          <TimeLabel>{formatTime(data.total)}</TimeLabel>
-        </TimelineAxis>
-      </WaterfallContainer>
-    );
-  };
-
-  const renderStacked = () => (
-    <Box data-variant="stacked">
-      <StackedBar animated={animated} data-animated={animated.toString()}>
-        {phases.map((phase) => {
-          const width = percentages[phase.key as keyof typeof percentages] ?? 0;
-          const segment = (
-            <StackedSegment
-              key={phase.key}
-              data-testid={`timing-segment-${phase.key}`}
-              phaseColor={phaseColors[phase.key as keyof typeof phaseColors]}
-              width={width}
-              style={{ width: `${width}%` }}
-            >
-              {showLabels && (percentages[phase.key as keyof typeof percentages] ?? 0) > 10 && (
-                <span data-testid="timing-label">{formatTime(phase.value!)}</span>
-              )}
-            </StackedSegment>
-          );
-
-          return showTooltips ? (
-            <Tooltip
-              key={phase.key}
-              title={`${phase.label}: ${formatTime(phase.value!)}`}
-              placement="top"
-              role="tooltip"
-              aria-describedby={`tooltip-${phase.key}`}
-            >
-              {segment}
-            </Tooltip>
-          ) : (
-            segment
-          );
-        })}
-      </StackedBar>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>
-        <Typography variant="caption" color="text.secondary">
-          0ms
-        </Typography>
-        <Typography variant="caption" color="text.secondary" fontWeight="bold">
-          Total: {formatTime(data.total)}
-        </Typography>
-      </Box>
-    </Box>
-  );
-
-  const renderHorizontal = () => (
-    <HorizontalBar data-variant="horizontal">
-      {phases.map((phase) => (
-        <HorizontalSegment
-          key={phase.key}
-          data-testid={`timing-segment-${phase.key}`}
-          phaseColor={phaseColors[phase.key as keyof typeof phaseColors]}
-          width={percentages[phase.key as keyof typeof percentages] ?? 0}
-          animated={animated}
-          data-animated={animated.toString()}
-        >
-          <Typography className="label">{phase.label}</Typography>
-          <Box
-            className="bar"
-            style={{ width: `${percentages[phase.key as keyof typeof percentages]}%` }}
-          />
-          <Typography className="value" data-testid="timing-label">
-            {formatTime(phase.value!)}
-          </Typography>
-        </HorizontalSegment>
-      ))}
-      <Box sx={{ mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }}>
-        <Typography variant="body2" fontWeight="bold" color="primary">
-          Total Time: {formatTime(data.total)}
-        </Typography>
-      </Box>
-    </HorizontalBar>
-  );
+  const phases = phasesOf(data);
+  const View = VIEWS[variant];
 
   return (
     <DiagramContainer elevation={2} role="region" aria-label="Timing diagram" tabIndex={0}>
@@ -374,9 +93,17 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
         Request Timing
       </Typography>
 
-      {variant === 'waterfall' && renderWaterfall()}
-      {variant === 'stacked' && renderStacked()}
-      {variant === 'horizontal' && renderHorizontal()}
+      {View && (
+        <View
+          phases={phases}
+          percentages={percentages}
+          data={data}
+          animated={animated}
+          showLabels={showLabels}
+          showTooltips={showTooltips}
+          height={height}
+        />
+      )}
 
       {showLabels && (
         <Legend>
@@ -384,7 +111,7 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
             <LegendItem key={phase.key}>
               <Box
                 className="color"
-                sx={{ backgroundColor: phaseColors[phase.key as keyof typeof phaseColors] }}
+                sx={{ backgroundColor: phaseColors[phase.key as PhaseKey] }}
               />
               <Typography className="label">{phase.label}</Typography>
             </LegendItem>