feat: displays appropriate error message if backend service is not running

src/lib/insight-analytics/InsightAnalyticsDialog.tsx

@@ -23,8 +23,13 @@ export function InsightAnalyticsDialog(props: Props) {
         const jsonData = await fetchData(projectionType);
         setData(jsonData);
         setLastRefreshTime(new Date());
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching data:', error);
+        setData({
+          status: 'error',
+          error: error.message,
+          errorDetails: error.response?.data?.detail || error.details || error.stack,
+        });
       }
     };
 
@@ -110,14 +115,18 @@ export function InsightAnalyticsDialog(props: Props) {
             {data && data.status === 'success' ? (
               <InsightAnalyticsScatterPlot queries={data.queries} radiusType={radiusType} />
             ) : data && data.status === 'error' ? (
-              <>
+              <div className="space-y-4">
                 <p className="text-red-500 font-bold">Error Message from Backend Knowledge Analytics service: </p>
-                <code>{data.error}</code>
-                <details>
-                  <summary>Error Details</summary>
-                  <code>{data.errorDetails}</code>
-                </details>
-              </>
+                <pre className="p-4 bg-red-50 border border-red-200 rounded text-red-600 whitespace-pre-wrap">{data.error}</pre>
+                {data.errorDetails && (
+                  <details className="mt-4">
+                    <summary className="cursor-pointer text-secondary-700">Error Details</summary>
+                    <pre className="mt-2 p-4 bg-red-50 border border-red-200 rounded text-red-600 whitespace-pre-wrap">
+                      {data.errorDetails}
+                    </pre>
+                  </details>
+                )}
+              </div>
             ) : (
               <p>Loading data...</p>
             )}

src/lib/insight-analytics/insightanalytics.service.ts

 import { ProjectionType, Query } from "./types";
 
 export const fetchData = async (projector: ProjectionType) => {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 10000); // 30 seconds timeout
+
   try {
-    const response = await fetch(`http://localhost:8003/query/${projector}`);
+    const response = await fetch(`http://localhost:8003/query/${projector}`, {
+      signal: controller.signal
+    });
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
     const jsonData = await response.json();
     console.log('Fetched data:', jsonData);
     return jsonData;
   } catch (error) {
-    console.error('Error fetching data:', error);
+    if (error instanceof Error) {
+      if (error.name === 'AbortError') {
+        throw new Error('Request timed out after 30 seconds. Please check if Insight Analytics Service is running.');
+      }
+      console.error('Error fetching data:', error);
+      throw new Error('Failed to connect to Insight Analytics Service. Please verify the service is running.');
+    }
     throw error;
+  } finally {
+    clearTimeout(timeoutId);
   }
 };
 
-
 export const computeQueryComplexity = (query: Query): number => {
   return query.nodes.length + query.edges.length * 2 + (query.query.match(/\b(MATCH|WHERE|WITH|RETURN|ORDER BY|LIMIT)\b/g) || []).length;
 }
\ No newline at end of file