expand sub tasks

worklenz-frontend/src/components/task-management/performance-analysis.tsx

@@ -17,22 +17,22 @@ const PerformanceAnalysis: React.FC<PerformanceAnalysisProps> = ({ projectId })
   // Start monitoring
   const startMonitoring = useCallback(() => {
     setIsMonitoring(true);
-    
+
     // Start all monitoring
     const stopFrameRate = performanceMonitor.startFrameRateMonitoring();
     const stopLongTasks = performanceMonitor.startLongTaskMonitoring();
     const stopLayoutThrashing = performanceMonitor.startLayoutThrashingMonitoring();
-    
+
     // Set up periodic memory monitoring
     const memoryInterval = setInterval(() => {
       performanceMonitor.monitorMemory();
     }, 1000);
-    
+
     // Set up periodic metrics update
     const metricsInterval = setInterval(() => {
       setMetrics(performanceMonitor.getMetrics());
     }, 2000);
-    
+
     const cleanup = () => {
       stopFrameRate();
       stopLongTasks();
@@ -40,7 +40,7 @@ const PerformanceAnalysis: React.FC<PerformanceAnalysisProps> = ({ projectId })
       clearInterval(memoryInterval);
       clearInterval(metricsInterval);
     };
-    
+
     setStopMonitoring(() => cleanup);
   }, []);
 
@@ -51,7 +51,7 @@ const PerformanceAnalysis: React.FC<PerformanceAnalysisProps> = ({ projectId })
       setStopMonitoring(null);
     }
     setIsMonitoring(false);
-    
+
     // Generate final report
     const finalReport = performanceMonitor.generateReport();
     setReport(finalReport);
@@ -129,8 +129,12 @@ const PerformanceAnalysis: React.FC<PerformanceAnalysisProps> = ({ projectId })
       dataIndex: 'average',
       key: 'average',
       render: (text: string, record: any) => {
-        const color = record.status === 'error' ? '#ff4d4f' : 
-                     record.status === 'warning' ? '#faad14' : '#52c41a';
+        const color =
+          record.status === 'error'
+            ? '#ff4d4f'
+            : record.status === 'warning'
+              ? '#faad14'
+              : '#52c41a';
         return <Text style={{ color, fontWeight: 500 }}>{text}</Text>;
       },
     },
@@ -154,18 +158,16 @@ const PerformanceAnalysis: React.FC<PerformanceAnalysisProps> = ({ projectId })
       dataIndex: 'status',
       key: 'status',
       render: (status: string) => {
-        const color = status === 'error' ? '#ff4d4f' : 
-                     status === 'warning' ? '#faad14' : '#52c41a';
-        const text = status === 'error' ? 'Poor' : 
-                    status === 'warning' ? 'Fair' : 'Good';
+        const color = status === 'error' ? '#ff4d4f' : status === 'warning' ? '#faad14' : '#52c41a';
+        const text = status === 'error' ? 'Poor' : status === 'warning' ? 'Fair' : 'Good';
         return <Text style={{ color, fontWeight: 500 }}>{text}</Text>;
       },
     },
   ];
 
   return (
-    <Card 
-      title="Performance Analysis" 
+    <Card
+      title="Performance Analysis"
       style={{ marginBottom: 16 }}
       extra={
         <Space>
@@ -179,9 +181,7 @@ const PerformanceAnalysis: React.FC<PerformanceAnalysisProps> = ({ projectId })
             </Button>
           )}
           <Button onClick={clearMetrics}>Clear</Button>
-          {report && (
-            <Button onClick={downloadReport}>Download Report</Button>
-          )}
+          {report && <Button onClick={downloadReport}>Download Report</Button>}
         </Space>
       }
     >
@@ -205,53 +205,90 @@ const PerformanceAnalysis: React.FC<PerformanceAnalysisProps> = ({ projectId })
             size="small"
             style={{ marginBottom: 16 }}
           />
-          
+
           <Divider />
-          
+
           <Title level={5}>Key Performance Indicators</Title>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16 }}>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+              gap: 16,
+            }}
+          >
             {metrics.fps && (
               <Card size="small">
                 <Text>Frame Rate</Text>
-                <div style={{ fontSize: '24px', fontWeight: 'bold', color: getMetricStatus('fps', metrics.fps.average) === 'error' ? '#ff4d4f' : '#52c41a' }}>
+                <div
+                  style={{
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    color:
+                      getMetricStatus('fps', metrics.fps.average) === 'error'
+                        ? '#ff4d4f'
+                        : '#52c41a',
+                  }}
+                >
                   {metrics.fps.average.toFixed(1)} FPS
                 </div>
-                <Progress 
-                  percent={Math.min((metrics.fps.average / 60) * 100, 100)} 
-                  size="small" 
-                  status={getMetricStatus('fps', metrics.fps.average) === 'error' ? 'exception' : 'active'}
+                <Progress
+                  percent={Math.min((metrics.fps.average / 60) * 100, 100)}
+                  size="small"
+                  status={
+                    getMetricStatus('fps', metrics.fps.average) === 'error' ? 'exception' : 'active'
+                  }
                 />
               </Card>
             )}
-            
+
             {metrics['memory-used'] && metrics['memory-limit'] && (
               <Card size="small">
                 <Text>Memory Usage</Text>
                 <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
-                  {((metrics['memory-used'].average / metrics['memory-limit'].average) * 100).toFixed(1)}%
+                  {(
+                    (metrics['memory-used'].average / metrics['memory-limit'].average) *
+                    100
+                  ).toFixed(1)}
+                  %
                 </div>
-                <Progress 
-                  percent={(metrics['memory-used'].average / metrics['memory-limit'].average) * 100} 
+                <Progress
+                  percent={(metrics['memory-used'].average / metrics['memory-limit'].average) * 100}
                   size="small"
-                  status={(metrics['memory-used'].average / metrics['memory-limit'].average) * 100 > 80 ? 'exception' : 'active'}
+                  status={
+                    (metrics['memory-used'].average / metrics['memory-limit'].average) * 100 > 80
+                      ? 'exception'
+                      : 'active'
+                  }
                 />
               </Card>
             )}
-            
+
             {metrics['layout-thrashing-count'] && (
               <Card size="small">
                 <Text>Layout Thrashing</Text>
-                <div style={{ fontSize: '24px', fontWeight: 'bold', color: metrics['layout-thrashing-count'].count > 10 ? '#ff4d4f' : '#52c41a' }}>
+                <div
+                  style={{
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    color: metrics['layout-thrashing-count'].count > 10 ? '#ff4d4f' : '#52c41a',
+                  }}
+                >
                   {metrics['layout-thrashing-count'].count}
                 </div>
                 <Text type="secondary">Detected instances</Text>
               </Card>
             )}
-            
+
             {metrics['long-task-duration'] && (
               <Card size="small">
                 <Text>Long Tasks</Text>
-                <div style={{ fontSize: '24px', fontWeight: 'bold', color: metrics['long-task-duration'].count > 0 ? '#ff4d4f' : '#52c41a' }}>
+                <div
+                  style={{
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    color: metrics['long-task-duration'].count > 0 ? '#ff4d4f' : '#52c41a',
+                  }}
+                >
                   {metrics['long-task-duration'].count}
                 </div>
                 <Text type="secondary">Tasks &gt; 50ms</Text>
@@ -265,14 +302,16 @@ const PerformanceAnalysis: React.FC<PerformanceAnalysisProps> = ({ projectId })
         <>
           <Divider />
           <Title level={5}>Performance Report</Title>
-          <pre style={{ 
-            backgroundColor: '#f5f5f5', 
-            padding: 16, 
-            borderRadius: 4, 
-            fontSize: '12px',
-            maxHeight: '300px',
-            overflow: 'auto'
-          }}>
+          <pre
+            style={{
+              backgroundColor: '#f5f5f5',
+              padding: 16,
+              borderRadius: 4,
+              fontSize: '12px',
+              maxHeight: '300px',
+              overflow: 'auto',
+            }}
+          >
             {report}
           </pre>
         </>
@@ -281,4 +320,4 @@ const PerformanceAnalysis: React.FC<PerformanceAnalysisProps> = ({ projectId })
   );
 };
 
-export default PerformanceAnalysis; 
+export default PerformanceAnalysis;