feat: transport Exceptions from tasks over our websocket connection

renumics/spotlight/backend/tasks/reduction.py

@@ -78,6 +78,8 @@ def compute_umap(
     Prepare data from table and compute U-Map on them.
     """
 
+    raise Exception("Ooops")
+
     try:
         data, indices = align_data(data_store, column_names, indices)
     except (ColumnNotExistsError, ColumnNotEmbeddable):

renumics/spotlight/backend/websockets.py

@@ -57,6 +57,19 @@ class ReductionMessage(Message):
     generation_id: int
 
 
+class TaskErrorMessage(Message):
+    """
+    Common message model for task errors
+    """
+
+    widget_id: str
+    uid: str
+    error: str
+    title: str
+    detail: Optional[str] = None
+    data: None = None
+
+
 class ReductionRequestData(BaseModel):
     """
     Base data reduction request payload.
@@ -155,6 +168,7 @@ async def handle_message(request: Message, connection: "WebsocketConnection") ->
     New message types should be registered by decorating with `@handle_message.register`.
     """
 
+    # TODO: add generic error handler
     raise NotImplementedError
 
 
@@ -326,6 +340,16 @@ async def _(request: UMapRequest, connection: "WebsocketConnection") -> None:
         )
     except TaskCancelled:
         ...
+    except Exception as e:
+        msg = TaskErrorMessage(
+            type="tasks.error",
+            widget_id=request.widget_id,
+            uid=request.uid,
+            error=type(e).__name__,
+            title=type(e).__name__,
+            detail=type(e).__doc__,
+        )
+        await connection.send_async(msg)
     else:
         response = ReductionResponse(
             type="umap_result",

src/services/data.ts

@@ -2,6 +2,7 @@ import { useDataset } from '../stores/dataset';
 import { useLayout } from '../stores/layout';
 import { IndexArray } from '../types';
 import { v4 as uuidv4 } from 'uuid';
+import { Problem } from '../types';
 
 export const umapMetricNames = [
     'euclidean',
@@ -110,9 +111,18 @@ export class DataService {
     ): Promise<ReductionResult> {
         const messageId = uuidv4();
 
-        const promise = new Promise<ReductionResult>((resolve) => {
+        const promise = new Promise<ReductionResult>((resolve, reject) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.dispatchTable.set(messageId, (message: any) => {
+                if (message.type === 'tasks.error') {
+                    const error: Problem = {
+                        type: message.error,
+                        title: message.title,
+                        detail: message.detail,
+                    };
+                    reject(error);
+                    return;
+                }
                 const result = {
                     points: message.data.points,
                     indices: message.data.indices,

src/widgets/SimilarityMap/SimilarityMap.tsx

@@ -1,4 +1,5 @@
 import SimilaritiesIcon from '../../icons/Bubbles';
+import WarningIcon from '../../icons/Warning';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import Plot, {
     MergeStrategy,
@@ -23,6 +24,7 @@ import {
     IndexArray,
     isNumberColumn,
     NumberColumn,
+    Problem,
     TableData,
 } from '../../types';
 import { createSizeTransferFunction } from '../../dataformat';
@@ -220,8 +222,8 @@ const SimilarityMap: Widget = () => {
     const placeByColumns = useDataset(placeByColumnsSelector, shallow);
 
     const [positions, setPositions] = useState<[number, number][]>([]);
-
     const [visibleIndices, setVisibleIndices] = useState<IndexArray>([]);
+    const [problem, setProblem] = useState<Problem | null>(null);
 
     const selected = useMemo(() => {
         const selected: boolean[] = [];
@@ -275,13 +277,14 @@ const SimilarityMap: Widget = () => {
     const widgetId = useMemo(() => uuidv4(), []);
 
     useEffect(() => {
+        setVisibleIndices([]);
+        setPositions([]);
+        setProblem(null);
+
         if (!indices.length || !placeByColumnKeys.length) {
-            setVisibleIndices([]);
-            setPositions([]);
             setIsComputing(false);
             return;
         }
-
         setIsComputing(true);
 
         const reductionPromise =
@@ -302,12 +305,18 @@ const SimilarityMap: Widget = () => {
                   );
 
         let cancelled = false;
-        reductionPromise.then(({ points, indices }) => {
-            if (cancelled) return;
-            setVisibleIndices(indices);
-            setPositions(points);
-            setIsComputing(false);
-        });
+        reductionPromise
+            .then(({ points, indices }) => {
+                if (cancelled) return;
+                setVisibleIndices(indices);
+                setPositions(points);
+                setIsComputing(false);
+            })
+            .catch((problem: Problem) => {
+                if (cancelled) return;
+                setProblem(problem);
+                setIsComputing(false);
+            });
 
         return () => {
             cancelled = true;
@@ -443,23 +452,35 @@ const SimilarityMap: Widget = () => {
     const areColumnsSelected = !!placeByColumnKeys.length;
     const hasVisibleRows = !!visibleIndices.length;
 
-    return (
-        <MapContainer data-test-tag="similaritymap">
-            {isComputing && <LoadingIndicator />}
-            {!areColumnsSelected && !isComputing && (
-                <Info>
-                    <span>
-                        Select columns and show at least two rows to display similarity
-                        map
-                    </span>
-                </Info>
-            )}
-            {areColumnsSelected && !hasVisibleRows && !isComputing && (
-                <Info>
-                    <span>Not enough rows</span>
-                </Info>
-            )}
-            {areColumnsSelected && hasVisibleRows && !isComputing && (
+    let content: JSX.Element;
+    if (problem) {
+        content = (
+            <div tw="w-full h-full flex flex-col items-stretch justify-end">
+                <div tw="bg-red-500 text-black/80 text-sm font-bold p-0.5">
+                    {problem.title}
+                </div>
+                <div tw="bg-red-500 text-black/80 text-xs p-0.5">{problem.detail}</div>
+            </div>
+        );
+    } else if (isComputing) {
+        content = <LoadingIndicator />;
+    } else if (!areColumnsSelected) {
+        content = (
+            <Info>
+                <span>
+                    Select columns and show at least two rows to display similarity map
+                </span>
+            </Info>
+        );
+    } else if (!hasVisibleRows) {
+        content = (
+            <Info>
+                <span>Not enough rows</span>
+            </Info>
+        );
+    } else {
+        content = (
+            <>
                 <PlotContainer>
                     <Plot
                         points={positions}
@@ -485,14 +506,17 @@ const SimilarityMap: Widget = () => {
                         />
                     )}
                 </PlotContainer>
-            )}
 
-            {!isComputing && (
                 <div tw="absolute bottom-0 w-full text-xs text-right text-gray-700 p-0.5 pointer-events-none">
                     {visibleIndices.length} of {indices.length} rows
                 </div>
-            )}
+            </>
+        );
+    }
 
+    return (
+        <MapContainer data-test-tag="similaritymap">
+            {content}
             <MenuBar
                 colorBy={colorByKey}
                 sizeBy={sizeByKey}