Show status in report mode

haynescd · Sep 5, 2024 · d6ea2c0 · d6ea2c0
1 parent a499d53
commit d6ea2c0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/app/fragments/report/cell.tsx b/app/fragments/report/cell.tsx
@@ -15,7 +15,7 @@ const Prompt = dynamic(() => import('@/app/fragments/report/prompt'))
 const Icon = dynamic(() => import('@/app/components/icon'))
 
 export default function Cell({ session_id, krg, id, head, cellMetadata, setCellMetadata }: { session_id?: string, krg: KRG, id: string, head: Metapath, cellMetadata: Record<string, Exclude<Metapath['cell_metadata'], null>>, setCellMetadata: React.Dispatch<React.SetStateAction<Record<string, Exclude<Metapath['cell_metadata'], null>>>> }) {
-  const { data: { outputNode = undefined, output = undefined } = {}, isLoading } = useMetapathOutput({ krg, head })
+  const { data: { outputNode = undefined, output = undefined } = {}, status, isLoading } = useMetapathOutput({ krg, head })
   const story = useStory()
   const processNode = krg.getProcessNode(head.process.type)
   const currentCellMetadata = cellMetadata[head.id] ?? {}
@@ -64,6 +64,7 @@ export default function Cell({ session_id, krg, id, head, cellMetadata, setCellM
               processNode={processNode}
               outputNode={outputNode}
               output={output}
+              status={status}
             />
             : <div className="collapse collapse-arrow text-black dark:text-white">
             <input type="checkbox" checked={currentCellMetadata.data_visible} onChange={evt => {setCellMetadata((cellMetadata) => ({ ...cellMetadata, [head.id]: { ...currentCellMetadata, data_visible: evt.target.checked, id: '' } }))}} />
@@ -82,6 +83,12 @@ export default function Cell({ session_id, krg, id, head, cellMetadata, setCellM
               </div>
             </div>
             <div className="collapse-content flex flex-col">
+              {status ? (
+                <div className="alert shadow-lg place-content-start align-middle">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-info shrink-0 w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                  <code className="prose max-w-none whitespace-pre-line">{status}</code>
+                </div>
+              ) : null}
               {outputNode?.view && output ? <>
                 <SafeRender component={outputNode.view} props={output} />
                 <FigureCaption id={head.id} story={story} />

diff --git a/app/fragments/report/prompt.tsx b/app/fragments/report/prompt.tsx
@@ -14,7 +14,7 @@ import { AbstractPart, FigureCaption } from './story'
 
 const Icon = dynamic(() => import('@/app/components/icon'))
 
-export default function Prompt({ session_id, krg, processNode, outputNode, output, id, head }: { session_id?: string, krg: KRG, processNode: PromptMetaNode, outputNode?: DataMetaNode, output: any, id: string, head: Metapath }) {
+export default function Prompt({ session_id, krg, processNode, outputNode, output, id, head, status }: { session_id?: string, krg: KRG, processNode: PromptMetaNode, outputNode?: DataMetaNode, output: any, id: string, head: Metapath, status: string | undefined }) {
   const router = useRouter()
   const { data: inputs, error } = useMetapathInputs({ krg, head })
   const story = useStory()
@@ -69,6 +69,12 @@ export default function Prompt({ session_id, krg, processNode, outputNode, outpu
           : <div className="prose max-w-none">Waiting for input</div>}
         {/* <FigureCaption id={head.id} story={story} /> */}
       </div>
+      {status ? (
+        <div className="alert shadow-lg place-content-start align-middle">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-info shrink-0 w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+          <code className="prose max-w-none whitespace-pre-line">{status}</code>
+        </div>
+      ) : null}
       {outputNode && outputNode.spec === 'Error' && output ? outputNode.view(output) : null}
     </div>
   )