allow user to remove item from queue

briefercloud · Feb 18, 2025 · bbced54 · bbced54
1 parent 72623cf
commit bbced54
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 107 deletions.
diff --git a/apps/api/src/python/visualizations-v2.ts b/apps/api/src/python/visualizations-v2.ts
@@ -597,6 +597,11 @@ export async function createVisualizationV2(
         case 'html':
           break
         case 'error':
+          if (output.ename === 'KeyboardInterrupt') {
+            result = { success: false, reason: 'aborted' }
+            break
+          }
+
           pythonErrors.push(output)
           break
         case 'stdio':

diff --git a/apps/web/src/components/v2Editor/customBlocks/pivotTable/index.tsx b/apps/web/src/components/v2Editor/customBlocks/pivotTable/index.tsx
@@ -310,10 +310,18 @@ function PivotTableBlock(props: Props) {
   const onRunAbort = useCallback(() => {
     if (execution || pageExecution) {
       if (execution) {
-        execution.item.setAborting()
+        if (execution.item.getStatus()._tag === 'enqueued') {
+          execution.batch.removeItem(attrs.id)
+        } else {
+          execution.item.setAborting()
+        }
       }
       if (pageExecution) {
-        pageExecution.item.setAborting()
+        if (pageExecution.item.getStatus()._tag === 'enqueued') {
+          pageExecution.batch.removeItem(attrs.id)
+        } else {
+          pageExecution.item.setAborting()
+        }
       }
     } else {
       props.executionQueue.enqueueBlock(
@@ -332,6 +340,7 @@ function PivotTableBlock(props: Props) {
     props.block,
     props.userId,
     environmentStartedAt,
+    attrs.id,
   ])
 
   const onToggleIsBlockHiddenInPublished = useCallback(() => {
@@ -358,13 +367,18 @@ function PivotTableBlock(props: Props) {
     editorAPI.insert(attrs.id, { scrollIntoView: false })
   }, [attrs.id, editorAPI.insert])
 
+  const isRunButtonDisabled =
+    status === 'aborting' || execution?.batch.isRunAll()
+
   const runTooltipContent = useMemo(() => {
     if (status !== 'idle') {
       switch (status) {
         case 'enqueued':
           return {
             title: 'This block is enqueud',
-            message: 'It will run once the previous blocks finish executing.',
+            message: isRunButtonDisabled
+              ? 'When running entire documents, you cannot remove individual blocks from the queue.'
+              : 'It will run once the previous blocks finish executing. Click to remove it from the queue.',
           }
         case 'running': {
           if (envStatus !== 'Running' && !envLoading) {
@@ -400,7 +414,7 @@ function PivotTableBlock(props: Props) {
         ),
       }
     }
-  }, [status, envStatus, envLoading, execution])
+  }, [status, envStatus, envLoading, execution, isRunButtonDisabled])
 
   if (props.dashboardMode && !dashboardModeHasControls(props.dashboardMode)) {
     if (!attrs.result) {
@@ -545,31 +559,18 @@ function PivotTableBlock(props: Props) {
               ref={ref}
               className={clsx(
                 {
-                  'bg-gray-200 cursor-not-allowed':
-                    execStatus !== 'idle' &&
-                    execStatus !== 'running' &&
-                    execStatus !== 'completed' &&
-                    execStatus !== 'unknown',
-                  'bg-red-200':
-                    execStatus === 'running' && envStatus === 'Running',
+                  'bg-gray-200': isRunButtonDisabled || !dataframe,
+                  'bg-red-200': status === 'running' && envStatus === 'Running',
                   'bg-yellow-300':
-                    execStatus === 'running' && envStatus !== 'Running',
-                  'bg-primary-200':
-                    execStatus === 'idle' ||
-                    execStatus === 'completed' ||
-                    execStatus === 'unknown',
+                    !isRunButtonDisabled &&
+                    (status === 'enqueued' ||
+                      (status === 'running' && envStatus !== 'Running')),
+                  'bg-primary-200': !isRunButtonDisabled && status === 'idle',
                 },
-                'rounded-sm h-6 min-w-6 flex items-center justify-center relative group'
+                'rounded-sm h-6 min-w-6 flex items-center justify-center relative group disabled:cursor-not-allowed'
               )}
               onClick={onRunAbort}
-              disabled={
-                !dataframe ||
-                !isEditable ||
-                (execStatus !== 'idle' &&
-                  execStatus !== 'running' &&
-                  execStatus !== 'completed' &&
-                  execStatus !== 'unknown')
-              }
+              disabled={!dataframe || isRunButtonDisabled}
             >
               {isExecutionStatusLoading(execStatus) ? (
                 <div>

diff --git a/apps/web/src/components/v2Editor/customBlocks/python/index.tsx b/apps/web/src/components/v2Editor/customBlocks/python/index.tsx
@@ -147,6 +147,8 @@ function PythonBlock(props: Props) {
   const onRunAbort = useCallback(() => {
     switch (status) {
       case 'enqueued':
+        execution?.batch.removeItem(blockId)
+        break
       case 'running':
         execution?.item.setAborting()
         break
@@ -160,7 +162,7 @@ function PythonBlock(props: Props) {
       default:
         exhaustiveCheck(status)
     }
-  }, [status, execution, onRun])
+  }, [status, execution, onRun, blockId])
 
   const statusIsDisabled = isExecutionStatusLoading(status)
 
@@ -335,13 +337,19 @@ function PythonBlock(props: Props) {
     props.document.title,
   ])
 
+  const isEditorFocused = editorState.cursorBlockId === blockId
+  const isRunButtonDisabled =
+    status === 'aborting' || execution?.batch.isRunAll()
+
   const runTooltipContent = useMemo(() => {
     if (status !== 'idle') {
       switch (status) {
         case 'enqueued':
           return {
             title: 'This block is enqueud',
-            message: 'It will run once the previous blocks finish executing.',
+            message: isRunButtonDisabled
+              ? 'When running entire documents, you cannot remove individual blocks from the queue.'
+              : 'It will run once the previous blocks finish executing. Click to remove it from the queue.',
           }
         case 'running': {
           if (envStatus !== 'Running' && !envLoading) {
@@ -382,7 +390,7 @@ function PythonBlock(props: Props) {
         ),
       }
     }
-  }, [status, envStatus, envLoading, execution])
+  }, [status, envStatus, envLoading, execution, isRunButtonDisabled])
 
   if (props.dashboardMode && !dashboardModeHasControls(props.dashboardMode)) {
     return (
@@ -406,8 +414,6 @@ function PythonBlock(props: Props) {
     )
   }
 
-  const isEditorFocused = editorState.cursorBlockId === blockId
-
   return (
     <div
       className="bg-white relative group/block"
@@ -610,17 +616,18 @@ function PythonBlock(props: Props) {
             <button
               ref={ref}
               onClick={onRunAbort}
-              disabled={status !== 'idle' && status !== 'running'}
+              disabled={isRunButtonDisabled}
               className={clsx(
                 {
-                  'bg-gray-200 cursor-not-allowed':
-                    status !== 'idle' && status !== 'running',
+                  'bg-gray-200': isRunButtonDisabled,
                   'bg-red-200': status === 'running' && envStatus === 'Running',
                   'bg-yellow-300':
-                    status === 'running' && envStatus !== 'Running',
-                  'bg-primary-200': status === 'idle',
+                    !isRunButtonDisabled &&
+                    (status === 'enqueued' ||
+                      (status === 'running' && envStatus !== 'Running')),
+                  'bg-primary-200': !isRunButtonDisabled && status === 'idle',
                 },
-                'rounded-sm h-6 min-w-6 flex items-center justify-center relative group'
+                'rounded-sm h-6 min-w-6 flex items-center justify-center relative group disabled:cursor-not-allowed'
               )}
             >
               {status !== 'idle' ? (

diff --git a/apps/web/src/components/v2Editor/customBlocks/sql/index.tsx b/apps/web/src/components/v2Editor/customBlocks/sql/index.tsx
@@ -304,6 +304,8 @@ function SQLBlock(props: Props) {
   const onRunAbort = useCallback(() => {
     switch (status._tag) {
       case 'enqueued':
+        execution?.batch.removeItem(blockId)
+        break
       case 'running':
         execution?.item.setAborting()
         break
@@ -317,7 +319,7 @@ function SQLBlock(props: Props) {
       default:
         exhaustiveCheck(status)
     }
-  }, [status, execution, onRun])
+  }, [status, execution, onRun, blockId])
 
   const { source, configuration } = getSQLAttributes(props.block, props.blocks)
   const lastQuery = props.block.getAttribute('lastQuery')
@@ -564,14 +566,20 @@ function SQLBlock(props: Props) {
   const headerSelectValue = isFileDataSource ? 'duckdb' : dataSourceId
 
   const isEditorFocused = editorState.cursorBlockId === blockId
+  const isRunButtonDisabled =
+    status._tag === 'aborting' ||
+    execution?.batch.isRunAll() ||
+    headerSelectValue === null
 
   const runTooltipContent = useMemo(() => {
     if (status._tag !== 'idle') {
       switch (status._tag) {
         case 'enqueued':
           return {
             title: 'This block is enqueud',
-            message: 'It will run once the previous blocks finish executing.',
+            message: isRunButtonDisabled
+              ? 'When running entire documents, you cannot remove individual blocks from the queue.'
+              : 'It will run once the previous blocks finish executing. Click to remove it from the queue.',
           }
         case 'running': {
           if (envStatus !== 'Running' && !envLoading) {
@@ -624,6 +632,7 @@ function SQLBlock(props: Props) {
     execution,
     props.dataSources.size,
     headerSelectValue,
+    isRunButtonDisabled,
   ])
 
   const codeEditor = useRef<CodeEditorRef>(null)
@@ -1022,20 +1031,20 @@ function SQLBlock(props: Props) {
             <button
               ref={ref}
               onClick={onRunAbort}
-              disabled={status._tag !== 'idle' && status._tag !== 'running'}
+              disabled={isRunButtonDisabled}
               className={clsx(
                 {
-                  'bg-gray-200 cursor-not-allowed':
-                    (status._tag !== 'idle' && status._tag !== 'running') ||
-                    headerSelectValue === null,
+                  'bg-gray-200': isRunButtonDisabled,
                   'bg-red-200':
                     status._tag === 'running' && envStatus === 'Running',
                   'bg-yellow-300':
-                    status._tag === 'running' && envStatus !== 'Running',
+                    !isRunButtonDisabled &&
+                    (status._tag === 'enqueued' ||
+                      (status._tag === 'running' && envStatus !== 'Running')),
                   'bg-primary-200':
-                    status._tag === 'idle' && headerSelectValue !== null,
+                    !isRunButtonDisabled && status._tag === 'idle',
                 },
-                'rounded-sm h-6 min-w-6 flex items-center justify-center relative group'
+                'rounded-sm h-6 min-w-6 flex items-center justify-center relative group disabled:cursor-not-allowed'
               )}
             >
               {status._tag !== 'idle' ? (

diff --git a/apps/web/src/components/v2Editor/customBlocks/visualization/index.tsx b/apps/web/src/components/v2Editor/customBlocks/visualization/index.tsx
@@ -15,14 +15,7 @@ import {
 } from '@briefer/editor'
 import { ApiDocument } from '@briefer/database'
 import { ChartPieIcon } from '@heroicons/react/24/solid'
-import {
-  CSSProperties,
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import { RefObject, useCallback, useEffect, useMemo, useState } from 'react'
 import HeaderSelect from '@/components/HeaderSelect'
 import clsx from 'clsx'
 import FilterSelector from './FilterSelector'
@@ -288,6 +281,8 @@ function VisualizationBlock(props: Props) {
   const onRunAbort = useCallback(() => {
     switch (status) {
       case 'enqueued':
+        execution?.batch.removeItem(blockId)
+        break
       case 'running':
         execution?.item.setAborting()
         break
@@ -301,7 +296,7 @@ function VisualizationBlock(props: Props) {
       default:
         exhaustiveCheck(status)
     }
-  }, [status, execution, onRun])
+  }, [status, execution, onRun, blockId])
 
   const onAddFilter = useCallback(() => {
     const newFilter: VisualizationFilter = {
@@ -577,14 +572,23 @@ function VisualizationBlock(props: Props) {
   }, [blockId, editorAPI.insert])
 
   const viewLoading = isExecutionStatusLoading(status)
+  const isRunButtonDisabled =
+    status === 'aborting' ||
+    execution?.batch.isRunAll() ||
+    !dataframe ||
+    (!xAxis && chartType !== 'number' && chartType !== 'trend') ||
+    (!hasAValidYAxis && chartType !== 'histogram') ||
+    !props.isEditable
 
   const runTooltipContent = useMemo(() => {
     if (status !== 'idle') {
       switch (status) {
         case 'enqueued':
           return {
             title: 'This block is enqueud',
-            message: 'It will run once the previous blocks finish executing.',
+            message: isRunButtonDisabled
+              ? 'When running entire documents, you cannot remove individual blocks from the queue.'
+              : 'It will run once the previous blocks finish executing. Click to remove it from the queue.',
           }
         case 'running': {
           if (envStatus !== 'Running' && !envLoading) {
@@ -801,23 +805,18 @@ function VisualizationBlock(props: Props) {
               ref={ref}
               className={clsx(
                 {
-                  'bg-gray-200 cursor-not-allowed':
-                    status !== 'idle' && status !== 'running',
+                  'bg-gray-200': isRunButtonDisabled,
                   'bg-red-200': status === 'running' && envStatus === 'Running',
                   'bg-yellow-300':
-                    status === 'running' && envStatus !== 'Running',
-                  'bg-primary-200': status === 'idle',
+                    !isRunButtonDisabled &&
+                    (status === 'enqueued' ||
+                      (status === 'running' && envStatus !== 'Running')),
+                  'bg-primary-200': !isRunButtonDisabled && status === 'idle',
                 },
-                'rounded-sm h-6 min-w-6 flex items-center justify-center relative group'
+                'rounded-sm h-6 min-w-6 flex items-center justify-center relative group disabled:cursor-not-allowed'
               )}
               onClick={onRunAbort}
-              disabled={
-                !dataframe ||
-                (!xAxis && chartType !== 'number' && chartType !== 'trend') ||
-                (!hasAValidYAxis && chartType !== 'histogram') ||
-                !props.isEditable ||
-                (status !== 'idle' && status !== 'running')
-              }
+              disabled={isRunButtonDisabled}
             >
               {status !== 'idle' ? (
                 <div>