Web: Improve trace viewer load times and loading animation #270
Conversation
🦋 Changeset detectedLatest commit: 2c82672 The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
There was a problem hiding this comment.
🔧 Build Fix:
The height parameter is declared in the function signature but never used in the component, causing TypeScript error TS6133.
View Details
📝 Patch Details
diff --git a/packages/web-shared/src/workflow-trace-view.tsx b/packages/web-shared/src/workflow-trace-view.tsx
index 197152c..04fa5ec 100644
--- a/packages/web-shared/src/workflow-trace-view.tsx
+++ b/packages/web-shared/src/workflow-trace-view.tsx
@@ -183,7 +183,7 @@ export const WorkflowTraceViewer = ({
customSpanEventClassNameFunc={getCustomSpanEventClassName}
customPanelComponent={<WorkflowDetailPanel env={env} />}
>
- <TraceViewerTimeline height="100%" trace={trace} withPanel />
+ <TraceViewerTimeline height={`${height}px`} trace={trace} withPanel />
</TraceViewerContextProvider>
</div>
);
Analysis
TypeScript compilation failure due to unused parameter
What fails: TypeScript compiler fails on src/workflow-trace-view.tsx line 34 due to unused height parameter
How to reproduce:
pnpm turbo build --filter='@workflow/web-shared'Result:
src/workflow-trace-view.tsx(34,3): error TS6133: 'height' is declared but its value is never read.
There was a problem hiding this comment.
🔧 Build Fix:
The height parameter is declared in the component props but never used, causing TypeScript compilation to fail due to the noUnusedParameters rule.
View Details
📝 Patch Details
diff --git a/packages/web-shared/src/workflow-trace-view.tsx b/packages/web-shared/src/workflow-trace-view.tsx
index 197152c..4cd42ea 100644
--- a/packages/web-shared/src/workflow-trace-view.tsx
+++ b/packages/web-shared/src/workflow-trace-view.tsx
@@ -31,7 +31,6 @@ export const WorkflowTraceViewer = ({
env,
isLoading,
error,
- height = 800,
}: {
run: WorkflowRun;
steps: Step[];
@@ -40,7 +39,6 @@ export const WorkflowTraceViewer = ({
env: EnvMap;
isLoading?: boolean;
error?: Error | null;
- height?: number;
}) => {
const [now, setNow] = useState(() => new Date());
Analysis
TypeScript compilation failure due to unused parameter
What fails: TypeScript compiler fails on src/workflow-trace-view.tsx due to unused height parameter violating noUnusedParameters rule
How to reproduce:
cd packages/web-shared && pnpm run buildResult:
src/workflow-trace-view.tsx(34,3): error TS6133: 'height' is declared but its value is never read.
There was a problem hiding this comment.
🔧 Build Fix:
The height parameter is declared in the WorkflowTraceViewer component but never used, causing a TypeScript compilation error.
View Details
📝 Patch Details
diff --git a/packages/web-shared/src/workflow-trace-view.tsx b/packages/web-shared/src/workflow-trace-view.tsx
index 197152c..4cd42ea 100644
--- a/packages/web-shared/src/workflow-trace-view.tsx
+++ b/packages/web-shared/src/workflow-trace-view.tsx
@@ -31,7 +31,6 @@ export const WorkflowTraceViewer = ({
env,
isLoading,
error,
- height = 800,
}: {
run: WorkflowRun;
steps: Step[];
@@ -40,7 +39,6 @@ export const WorkflowTraceViewer = ({
env: EnvMap;
isLoading?: boolean;
error?: Error | null;
- height?: number;
}) => {
const [now, setNow] = useState(() => new Date());
Analysis
TypeScript compilation fails due to unused parameter
What fails: TypeScript compiler fails on packages/web-shared/src/workflow-trace-view.tsx due to unused height parameter
How to reproduce:
pnpm turbo run build --filter="@workflow/web-shared"Result:
src/workflow-trace-view.tsx(34,3): error TS6133: 'height' is declared but its value is never read.
There was a problem hiding this comment.
🔧 Build Fix:
The height parameter is declared in the function signature but never used, causing a TypeScript compilation error TS6133.
View Details
📝 Patch Details
diff --git a/packages/web-shared/src/workflow-trace-view.tsx b/packages/web-shared/src/workflow-trace-view.tsx
index 197152c..ac2f377 100644
--- a/packages/web-shared/src/workflow-trace-view.tsx
+++ b/packages/web-shared/src/workflow-trace-view.tsx
@@ -183,7 +183,7 @@ export const WorkflowTraceViewer = ({
customSpanEventClassNameFunc={getCustomSpanEventClassName}
customPanelComponent={<WorkflowDetailPanel env={env} />}
>
- <TraceViewerTimeline height="100%" trace={trace} withPanel />
+ <TraceViewerTimeline height={height} trace={trace} withPanel />
</TraceViewerContextProvider>
</div>
);
Analysis
Unused TypeScript parameter causes compilation failure
What fails: TypeScript compiler fails on src/workflow-trace-view.tsx due to unused height parameter in function signature
How to reproduce:
cd packages/web-shared && pnpm run buildResult:
src/workflow-trace-view.tsx(34,3): error TS6133: 'height' is declared but its value is never read.
There was a problem hiding this comment.
🔧 Build Fix:
The height parameter is declared with a default value but never used in the component, causing a TypeScript compilation error. The parameter should be utilized in the TraceViewerTimeline component instead of the hardcoded "100%" value.
View Details
📝 Patch Details
diff --git a/packages/web-shared/src/workflow-trace-view.tsx b/packages/web-shared/src/workflow-trace-view.tsx
index 197152c..04fa5ec 100644
--- a/packages/web-shared/src/workflow-trace-view.tsx
+++ b/packages/web-shared/src/workflow-trace-view.tsx
@@ -183,7 +183,7 @@ export const WorkflowTraceViewer = ({
customSpanEventClassNameFunc={getCustomSpanEventClassName}
customPanelComponent={<WorkflowDetailPanel env={env} />}
>
- <TraceViewerTimeline height="100%" trace={trace} withPanel />
+ <TraceViewerTimeline height={`${height}px`} trace={trace} withPanel />
</TraceViewerContextProvider>
</div>
);
Analysis
TypeScript unused variable error causes @workflow/web-shared build failure
What fails: TypeScript compiler fails on packages/web-shared/src/workflow-trace-view.tsx line 34 due to unused height parameter
How to reproduce:
cd packages/web-shared && pnpm run buildResult:
src/workflow-trace-view.tsx(34,3): error TS6133: 'height' is declared but its value is never read.
ELIFECYCLE Command failed with exit code 2.
There was a problem hiding this comment.
🔧 Build Fix:
The height parameter is declared but never used in the WorkflowTraceViewer component, causing TypeScript compilation to fail due to the strict noUnusedParameters setting.
View Details
📝 Patch Details
diff --git a/packages/web-shared/src/workflow-trace-view.tsx b/packages/web-shared/src/workflow-trace-view.tsx
index 197152c..ac2f377 100644
--- a/packages/web-shared/src/workflow-trace-view.tsx
+++ b/packages/web-shared/src/workflow-trace-view.tsx
@@ -183,7 +183,7 @@ export const WorkflowTraceViewer = ({
customSpanEventClassNameFunc={getCustomSpanEventClassName}
customPanelComponent={<WorkflowDetailPanel env={env} />}
>
- <TraceViewerTimeline height="100%" trace={trace} withPanel />
+ <TraceViewerTimeline height={height} trace={trace} withPanel />
</TraceViewerContextProvider>
</div>
);
Analysis
TypeScript compilation failure due to unused parameter
What fails: TypeScript compiler fails on packages/web-shared/src/workflow-trace-view.tsx due to unused height parameter
How to reproduce:
pnpm turbo run build --filter=@workflow/web-sharedResult:
src/workflow-trace-view.tsx(34,3): error TS6133: 'height' is declared but its value is never read.The height parameter was declared with a default value of 800 but was never used in the component, causing TypeScript to error due to the noUnusedParameters: true compiler setting.
This PR:
--noBrowser