fix(dashboard): swr rerendering & noderun display

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/ExternalEvent/ExternalEvent.tsx

@@ -8,7 +8,6 @@ import { NodeProps } from '..'
 import { Fade } from '../Fade'
 import { NodeDetails } from '../NodeDetails'
 
-import { NodeRunsList } from '../../NodeRunsList'
 import LinkWithTenant from '@/app/(authenticated)/[tenantId]/components/LinkWithTenant'
 import { DiagramDataGroup } from '../DataGroupComponents/DiagramDataGroup'
 
@@ -19,7 +18,7 @@ const Node: FC<NodeProps<NodeProto>> = ({ data }) => {
   return (
     <>
       <NodeDetails nodeRunList={data.nodeRunsList}>
-        <DiagramDataGroup label="ExternalEvent">
+        <DiagramDataGroup label={nodeRun ? "ExternalEvent" : "ExternalEventDef"}>
           <div>
             <div>
               <div className="flex gap-1 text-nowrap">

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/NodeDetails.tsx

@@ -1,16 +1,13 @@
 'use client'
-import { Separator } from '@/components/ui/separator'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
-import { CSSProperties, FC, PropsWithChildren, ReactNode, useEffect, useMemo, useState } from 'react'
+import { NodeRun } from 'littlehorse-client/proto'
+import React, { CSSProperties, FC, PropsWithChildren, useEffect, useMemo, useState } from 'react'
 import { internalsSymbol, useNodeId, useStore } from 'reactflow'
 import { DiagramDataGroup } from './DataGroupComponents/DiagramDataGroup'
-import React from 'react'
-import { NodeRun, TaskRun } from 'littlehorse-client/proto'
+import { DiagramDataGroupIndexer } from './DataGroupComponents/DiagramDataGroupIndexer'
 import { Duration } from './DataGroupComponents/Duration'
 import { Entry } from './DataGroupComponents/Entry'
 import { ErrorMessage } from './DataGroupComponents/ErrorMessage'
 import { Status } from './DataGroupComponents/Status'
-import { DiagramDataGroupIndexer } from './DataGroupComponents/DiagramDataGroupIndexer'
 
 type Props = PropsWithChildren<{ nodeRunList: NodeRun[] | undefined, nodeRunsIndex?: number, setNodeRunsIndex?: (index: number) => void }>
 
@@ -43,7 +40,7 @@ export const NodeDetails: FC<Props> = ({ children, nodeRunList, nodeRunsIndex, s
     if (nodeRunsIndex !== undefined && setNodeRunsIndex !== undefined) {
       setNodeRunsIndex(nodeRunsIndexInternal);
     }
-  }, [nodeRunsIndexInternal, setNodeRunsIndex]);
+  }, [nodeRunsIndex, nodeRunsIndexInternal, setNodeRunsIndex]);
 
   const zIndex: number = Math.max(...nodes.map(node => (node[internalsSymbol]?.z || 1) + 10))
   if (!selectedNode) {
@@ -70,14 +67,9 @@ export const NodeDetails: FC<Props> = ({ children, nodeRunList, nodeRunsIndex, s
     return [];
   }) as React.ReactElement[];
 
-
-  if (!nodeRunList || nodeRunList.length === 0) {
-    return null;
-  }
-
   return (
     <div style={wrapperStyle} className="flex gap-4 justify-center drop-shadow mb-6 items-start select-none">
-      {nodeRunList && (
+      {nodeRunList && nodeRunList[nodeRunsIndexInternal] && (
         <DiagramDataGroup label={nodeRunList.length > 1 ? `NodeRun #${nodeRunsIndexInternal}` : "NodeRun"} >
           <DiagramDataGroupIndexer index={nodeRunsIndexInternal} setIndex={setNodeRunsIndexInternal} indexes={nodeRunList.length} />
           <Entry label="Status:">
@@ -91,6 +83,8 @@ export const NodeDetails: FC<Props> = ({ children, nodeRunList, nodeRunsIndex, s
           </Entry>
         </DiagramDataGroup>
       )}
+      <div>
+      </div>
       {diagramDataGroups.map((element, i) => (
         <span key={i}>
           {element}

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/Task/TaskDetails.tsx

@@ -1,22 +1,22 @@
 'use client'
 import LinkWithTenant from '@/app/(authenticated)/[tenantId]/components/LinkWithTenant'
+import { OverflowText } from '@/app/(authenticated)/[tenantId]/components/OverflowText'
 import { getTaskDef } from '@/app/(authenticated)/[tenantId]/taskDef/[name]/getTaskDef'
-import { getVariable, getVariableValue } from '@/app/utils'
+import { getVariableValue } from '@/app/utils'
 import { useQuery } from '@tanstack/react-query'
 import { NodeRun, TaskNode } from 'littlehorse-client/proto'
 import { ExternalLinkIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { FC, useState } from 'react'
-import { NodeDetails } from '../NodeDetails'
 import { DiagramDataGroup } from '../DataGroupComponents/DiagramDataGroup'
+import { DiagramDataGroupIndexer } from '../DataGroupComponents/DiagramDataGroupIndexer'
 import { Duration } from '../DataGroupComponents/Duration'
 import { Entry } from '../DataGroupComponents/Entry'
-import { Status } from '../DataGroupComponents/Status'
-import { getTaskRun } from './getTaskRun'
-import { DiagramDataGroupIndexer } from '../DataGroupComponents/DiagramDataGroupIndexer'
 import { Result } from '../DataGroupComponents/Result'
-import { OverflowText } from '@/app/(authenticated)/[tenantId]/components/OverflowText'
+import { Status } from '../DataGroupComponents/Status'
 import { ViewVariableAssignments, ViewVariables } from '../DataGroupComponents/Variables'
+import { NodeDetails } from '../NodeDetails'
+import { getTaskRun } from './getTaskRun'
 
 export const TaskDetails: FC<{
   taskNode?: TaskNode

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/ThrowEvent/ThrowEvent.tsx

@@ -8,7 +8,6 @@ import LinkWithTenant from '@/app/(authenticated)/[tenantId]/components/LinkWith
 import { Fade } from '../Fade'
 import { NodeDetails } from '../NodeDetails'
 
-import { NodeRunsList } from '../../NodeRunsList'
 import { DiagramDataGroup } from '../DataGroupComponents/DiagramDataGroup'
 
 const Node: FC<NodeProps<NodeProto>> = ({ data }) => {
@@ -18,7 +17,7 @@ const Node: FC<NodeProps<NodeProto>> = ({ data }) => {
   return (
     <>
       <NodeDetails nodeRunList={data.nodeRunsList}>
-        <DiagramDataGroup label="WorkflowEvent">
+        <DiagramDataGroup label={nodeRun ? "WorkflowEvent" : "WorkflowEventDef"}>
           <div>
             <div>
               <div className="flex items-center gap-1 text-nowrap">

dashboard/src/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/UserTask/UserTask.tsx

@@ -1,16 +1,14 @@
 import { UserTaskDefDetails } from '@/app/(authenticated)/[tenantId]/(diagram)/components/NodeTypes/UserTask/UserTaskDefDetails'
-import LinkWithTenant from '@/app/(authenticated)/[tenantId]/components/LinkWithTenant'
-import { ExternalLinkIcon, EyeIcon, UserIcon } from 'lucide-react'
+import { UserIcon } from 'lucide-react'
+import { useParams, useRouter } from 'next/navigation'
 import { FC, memo } from 'react'
 import { Handle, Position } from 'reactflow'
+import { ExternalLinkButton } from '../../ExternalLinkButton'
 import { NodeRunsList } from '../../NodeRunsList'
+import { DiagramDataGroup } from '../DataGroupComponents/DiagramDataGroup'
 import { Fade } from '../Fade'
 import { NodeProps } from '../index'
 import { NodeDetails } from '../NodeDetails'
-import { useParams, useRouter } from 'next/navigation'
-import { Button } from '@/components/ui/button'
-import { ExternalLinkButton } from '../../ExternalLinkButton'
-import { DiagramDataGroup } from '../DataGroupComponents/DiagramDataGroup'
 
 const Node: FC<NodeProps> = ({ data, selected }) => {
   const router = useRouter()
@@ -22,7 +20,7 @@ const Node: FC<NodeProps> = ({ data, selected }) => {
   return (
     <>
       <NodeDetails nodeRunList={data.nodeRunsList}>
-        <DiagramDataGroup label="UserTask">
+        <DiagramDataGroup label={nodeRun ? "UserTaskRun" : "UserTaskDef"}>
           <div className="flex flex-col">
             <ExternalLinkButton href={`/userTaskDef/${userTask.userTaskDefName}`} label={userTask.userTaskDefName} />
             {nodeRun && (

dashboard/src/app/hooks/useWfRun.tsx

@@ -1,25 +1,21 @@
 "use client";
-import useSWR from "swr";
-import { getWfRun, WfRunResponse } from "../actions/getWfRun";
-import { useState } from "react";
 import { WfRunId } from "littlehorse-client/proto";
+import useSWR from "swr";
+import { getWfRun } from "../actions/getWfRun";
 
 type Props = {
     wfRunId: WfRunId
     tenantId: string
 }
 
 export function useWfRun({ wfRunId, tenantId }: Props) {
-    const [dataCache, setDataCache] = useState<WfRunResponse | null>(null)
-
-    const { error, isLoading } = useSWR(`wfRun/${tenantId}/${wfRunId.id}/${wfRunId.parentWfRunId?.id}`, async () => {
-        if (!wfRunId.id) return dataCache
-        const data = await getWfRun({ wfRunId, tenantId })
-        setDataCache(data)
+    const { data, error, isLoading } = useSWR(`wfRun/${tenantId}/${wfRunId.id}/${wfRunId.parentWfRunId?.id}`, async () => {
+        if (!wfRunId.id) return
+        return await getWfRun({ wfRunId, tenantId })
     })
 
     return {
-        wfRunData: dataCache,
+        wfRunData: data,
         isLoading,
         isError: error
     }