remove unneeded things

Author: pashagolub

src/components/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import React, { Component, ErrorInfo, ReactNode } from "react";
+import { css } from "@emotion/css";
 import { ErrorState, toErrorState } from "../types/error-types";
-import { logError } from "../utils/logger";
 
 interface Props {
   children: ReactNode;
@@ -12,12 +12,43 @@ interface State {
   error?: ErrorState;
 }
 
-/**
- * Error Boundary component
- *
- * Catches React errors and prevents the entire panel from crashing.
- * Displays error information and provides recovery options.
- */
+const errorContainerStyle = css`
+  padding: 16px;
+`;
+
+const errorBoxStyle = css`
+  border: 1px solid #f44336;
+  border-radius: 4px;
+  padding: 12px;
+  background-color: #ffebee;
+  color: #c62828;
+`;
+
+const errorTitleStyle = css`
+  margin: 0 0 8px 0;
+  font-size: 16px;
+`;
+
+const errorMessageStyle = css`
+  margin: 0 0 8px 0;
+  font-size: 14px;
+`;
+
+const errorDetailsStyle = css`
+  margin: 8px 0;
+  padding: 8px;
+  background-color: #fff;
+  font-size: 12px;
+  overflow: auto;
+  max-height: 200px;
+`;
+
+const errorHintStyle = css`
+  margin: 8px 0 0 0;
+  font-size: 13px;
+  font-style: italic;
+`;
+
 export class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -34,57 +65,31 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    logError("ErrorBoundary", "Caught error in component tree", {
-      error: error.message,
+    console.error("ErrorBoundary caught error:", error.message, {
       stack: error.stack,
       componentStack: errorInfo.componentStack,
     });
 
-    const errorState = toErrorState(error);
-
-    if (this.props.onError) {
-      this.props.onError(errorState);
+    if (this.props.onError && this.state.error) {
+      this.props.onError(this.state.error);
     }
   }
 
   render() {
     if (this.state.hasError && this.state.error) {
       return (
-        <div style={{ padding: "16px" }}>
-          <div
-            style={{
-              border: "1px solid #f44336",
-              borderRadius: "4px",
-              padding: "12px",
-              backgroundColor: "#ffebee",
-              color: "#c62828",
-            }}
-          >
-            <h3 style={{ margin: "0 0 8px 0", fontSize: "16px" }}>Error</h3>
-            <p style={{ margin: "0 0 8px 0", fontSize: "14px" }}>
+        <div className={errorContainerStyle}>
+          <div className={errorBoxStyle}>
+            <h3 className={errorTitleStyle}>Error</h3>
+            <p className={errorMessageStyle}>
               {this.state.error.message}
             </p>
             {this.state.error.details && (
-              <pre
-                style={{
-                  margin: "8px 0",
-                  padding: "8px",
-                  backgroundColor: "#fff",
-                  fontSize: "12px",
-                  overflow: "auto",
-                  maxHeight: "200px",
-                }}
-              >
+              <pre className={errorDetailsStyle}>
                 {this.state.error.details}
               </pre>
             )}
-            <p
-              style={{
-                margin: "8px 0 0 0",
-                fontSize: "13px",
-                fontStyle: "italic",
-              }}
-            >
+            <p className={errorHintStyle}>
               {this.state.error.resolutionHint}
             </p>
           </div>

src/components/ErrorDisplay.tsx

@@ -6,12 +6,6 @@ interface Props {
   error: ErrorState;
 }
 
-/**
- * Error Display component
- *
- * Displays error states using Grafana's Alert component.
- * Shows user-friendly messages with resolution hints.
- */
 export const ErrorDisplay: React.FC<Props> = ({ error }) => {
   const severity = ERROR_SEVERITY[error.type];
 

src/components/ExplainPanel.tsx

@@ -1,11 +1,4 @@
-/**
- * Explain Panel Component
- *
- * Main panel component for PostgreSQL EXPLAIN visualization.
- * Orchestrates data extraction, validation, and rendering.
- */
-
-import React, { useMemo } from "react";
+import React from "react";
 import { PanelProps } from "@grafana/data";
 import { PanelOptions } from "../types/panel-options";
 import {
@@ -19,76 +12,39 @@ import { validatePlan } from "../services/planValidator";
 import { VueMount } from "./VueMount";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { ErrorDisplay } from "./ErrorDisplay";
-import { LoadingSpinner } from "./LoadingSpinner";
-import { logDebug, logError } from "../utils/logger";
-
-const CONTEXT = "ExplainPanel";
 
 interface Props extends PanelProps<PanelOptions> {}
 
-/**
- * ExplainPanel
- *
- * Main panel component that:
- * 1. Extracts EXPLAIN data from DataFrame
- * 2. Validates JSON structure
- * 3. Renders visualization using Vue/PEV2
- * 4. Handles errors gracefully
- */
 export const ExplainPanel: React.FC<Props> = ({
   options,
   data,
   width,
   height,
 }) => {
-  logDebug(CONTEXT, "Rendering ExplainPanel", {
-    options,
-    seriesCount: data.series.length,
-    width,
-    height,
-  });
-
-  // Process data and handle errors
-  const result = useMemo(() => {
-    try {
-      // Extract plan data from DataFrame
-      const planData = extractPlanData(data.series, options.planFieldName);
-
-      // Handle no data case
-      if (!planData) {
-        const errorState: ErrorState = {
-          type: ErrorType.NO_DATA,
-          message: "No data available",
-          resolutionHint:
-            "Configure a query to return EXPLAIN output. Use EXPLAIN (FORMAT JSON) SELECT ... or EXPLAIN SELECT ...",
-        };
-        return { type: "error" as const, error: errorState };
-      }
-
-      // Validate and parse plan
+  let result: { type: "success"; plan: any } | { type: "error"; error: ErrorState };
+
+  try {
+    const planData = extractPlanData(data.series, options.planFieldName);
+
+    if (!planData) {
+      const errorState: ErrorState = {
+        type: ErrorType.NO_DATA,
+        message: "No data available",
+        resolutionHint:
+          "Configure a query to return EXPLAIN output. Use EXPLAIN (FORMAT JSON) SELECT ... or EXPLAIN SELECT ...",
+      };
+      result = { type: "error" as const, error: errorState };
+    } else {
       const plan = validatePlan(planData);
-
-      logDebug(CONTEXT, "Plan extracted and validated successfully");
-
-      return { type: "success" as const, plan };
-    } catch (error) {
-      logError(CONTEXT, "Error processing plan data", error);
-
-      // Convert error to ErrorState
-      const errorState =
-        error instanceof PlanError ? error.toErrorState() : toErrorState(error);
-
-      return { type: "error" as const, error: errorState };
+      result = { type: "success" as const, plan };
     }
-  }, [data.series, options.planFieldName]);
+  } catch (error) {
+    const errorState =
+      error instanceof PlanError ? error.toErrorState() : toErrorState(error);
+    result = { type: "error" as const, error: errorState };
+  }
 
-  // Render error state
   if (result.type === "error") {
-    // For NO_DATA, show info message instead of error
-    if (result.error.type === ErrorType.NO_DATA) {
-      return <ErrorDisplay error={result.error} />;
-    }
-
     return <ErrorDisplay error={result.error} />;
   }