From 24d538e317828a68e99b7562fde962b9930b1b1a Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Fri, 23 Feb 2024 15:50:57 -0600
Subject: [PATCH] feat(frontend): Adding Span Result Detail Drawer (#3680)

* feat(frontend):

* feat(frontend): Adding Span Result Detail Drawer
---
 .../components/RunDetailTest/TestPanel.tsx    |  20 ++-
 .../Assertion.tsx                             |   8 +-
 .../components/SpanResultDetail/Content.tsx   |  52 ++++++++
 .../components/SpanResultDetail/Detail.tsx    |  66 ++++++++++
 .../components/SpanResultDetail/Header.tsx    |  28 ++++
 .../SpanResultDetail.styled.ts                | 121 ++++++++++++++++++
 .../SpanResultDetail/SpanResultDetail.tsx     |  38 ++++++
 web/src/components/SpanResultDetail/index.ts  |   2 +
 web/src/components/TestSpecDetail/Content.tsx |  19 +--
 .../components/TestSpecDetail/ResultCard.tsx  |  65 ----------
 .../components/TestSpecDetail/SpanHeader.tsx  |  41 ------
 .../components/TestSpecDetail/SpanResult.tsx  |  52 ++++++++
 .../TestSpecDetail/TestSpecDetail.styled.ts   |  10 +-
 .../TestSpecs/TestSpecs.provider.tsx          |  11 +-
 .../TestSpecs/hooks/useTestSpecsCrud.ts       |  11 +-
 web/src/redux/slices/TestSpecs.slice.ts       |   6 +
 web/src/selectors/TestSpecs.selectors.ts      |   1 +
 web/src/services/Assertion.service.ts         |   4 +
 web/src/types/TestSpecs.types.ts              |   8 ++
 19 files changed, 431 insertions(+), 132 deletions(-)
 rename web/src/components/{TestSpecDetail => SpanResultDetail}/Assertion.tsx (88%)
 create mode 100644 web/src/components/SpanResultDetail/Content.tsx
 create mode 100644 web/src/components/SpanResultDetail/Detail.tsx
 create mode 100644 web/src/components/SpanResultDetail/Header.tsx
 create mode 100644 web/src/components/SpanResultDetail/SpanResultDetail.styled.ts
 create mode 100644 web/src/components/SpanResultDetail/SpanResultDetail.tsx
 create mode 100644 web/src/components/SpanResultDetail/index.ts
 delete mode 100644 web/src/components/TestSpecDetail/ResultCard.tsx
 delete mode 100644 web/src/components/TestSpecDetail/SpanHeader.tsx
 create mode 100644 web/src/components/TestSpecDetail/SpanResult.tsx

diff --git a/web/src/components/RunDetailTest/TestPanel.tsx b/web/src/components/RunDetailTest/TestPanel.tsx
index ed5633a040..56cd2a5078 100644
--- a/web/src/components/RunDetailTest/TestPanel.tsx
+++ b/web/src/components/RunDetailTest/TestPanel.tsx
@@ -24,6 +24,7 @@ import * as S from './RunDetailTest.styled';
 import Visualization from './Visualization';
 import {FillPanel} from '../ResizablePanels';
 import SkipTraceCollectionInfo from '../SkipTraceCollectionInfo';
+import SpanResultDetail from '../SpanResultDetail';
 
 const TABS = {
   SPECS: 'specs',
@@ -39,8 +40,17 @@ interface IProps {
 const TestPanel = ({run, testId, runEvents}: IProps) => {
   const [query, updateQuery] = useSearchParams();
   const {selectedSpan, onSetFocusedSpan} = useSpan();
-  const {remove, revert, selectedTestSpec, setSelectedSpec, setSelectorSuggestions, setPrevSelector, specs} =
-    useTestSpecs();
+  const {
+    remove,
+    revert,
+    selectedTestSpec,
+    selectedSpanResult,
+    setSelectedSpanResult,
+    setSelectedSpec,
+    setSelectorSuggestions,
+    setPrevSelector,
+    specs,
+  } = useTestSpecs();
   const {isOpen: isTestSpecFormOpen, formProps, onSubmit, open, close, isValid, onIsValid} = useTestSpecForm();
   const {
     isEditing,
@@ -219,6 +229,12 @@ const TestPanel = ({run, testId, runEvents}: IProps) => {
             selectedSpan={selectedSpan?.id}
             testSpec={selectedTestSpec}
           />
+
+          <SpanResultDetail
+            isOpen={!!selectedSpanResult}
+            spanResult={selectedSpanResult}
+            onClose={() => setSelectedSpanResult()}
+          />
         </S.SectionRight>
       </S.Container>
     </FillPanel>
diff --git a/web/src/components/TestSpecDetail/Assertion.tsx b/web/src/components/SpanResultDetail/Assertion.tsx
similarity index 88%
rename from web/src/components/TestSpecDetail/Assertion.tsx
rename to web/src/components/SpanResultDetail/Assertion.tsx
index 23fc50533c..bdcd0baebf 100644
--- a/web/src/components/TestSpecDetail/Assertion.tsx
+++ b/web/src/components/SpanResultDetail/Assertion.tsx
@@ -5,7 +5,7 @@ import {ICheckResult} from 'types/Assertion.types';
 import {TCompareOperatorSymbol} from 'types/Operator.types';
 import {SupportedEditors} from 'constants/Editor.constants';
 import {Editor} from 'components/Inputs';
-import * as S from './TestSpecDetail.styled';
+import * as S from './SpanResultDetail.styled';
 
 interface IProps {
   check: ICheckResult;
@@ -15,14 +15,14 @@ interface IProps {
 }
 
 const Assertion = ({check, testId, runId, selector}: IProps) => (
-  <S.CheckItemContainer>
+  <S.CheckItemContainer $isSuccessful={check.result.passed}>
     <S.GridContainer>
       {check.result.error && AssertionService.isValidError(check.result.error) ? (
         <>
           <S.Row $justify="center">
-            <S.IconWarning />
+            <S.IconError />
           </S.Row>
-          <AttributeValue strong type="warning" value={check.result.error} />
+          <AttributeValue strong type="danger" value={check.result.error} />
         </>
       ) : (
         <>
diff --git a/web/src/components/SpanResultDetail/Content.tsx b/web/src/components/SpanResultDetail/Content.tsx
new file mode 100644
index 0000000000..f357c821ef
--- /dev/null
+++ b/web/src/components/SpanResultDetail/Content.tsx
@@ -0,0 +1,52 @@
+import {useMemo} from 'react';
+import {useTest} from 'providers/Test/Test.provider';
+import {ICheckResult} from 'types/Assertion.types';
+import AssertionService from 'services/Assertion.service';
+import Span from 'models/Span.model';
+import {useTestRun} from 'providers/TestRun/TestRun.provider';
+import * as S from './SpanResultDetail.styled';
+import Assertion from './Assertion';
+import Header from './Header';
+import {useTestSpecs} from '../../providers/TestSpecs/TestSpecs.provider';
+
+interface IProps {
+  span: Span;
+  checkResults: ICheckResult[];
+  onClose(): void;
+}
+
+const Content = ({checkResults, span, onClose}: IProps) => {
+  const {
+    run: {id: runId},
+  } = useTestRun();
+  const {
+    test: {id: testId},
+  } = useTest();
+
+  const totalPassedChecks = useMemo(() => AssertionService.getTotalPassedSpanChecks(checkResults), [checkResults]);
+  const {selectedTestSpec} = useTestSpecs();
+
+  return (
+    <>
+      <Header
+        span={span}
+        onClose={onClose}
+        assertionsFailed={checkResults.length - totalPassedChecks}
+        assertionsPassed={totalPassedChecks}
+      />
+      <S.AssertionsContainer>
+        {checkResults.map(checkResult => (
+          <Assertion
+            testId={testId}
+            runId={runId}
+            selector={selectedTestSpec?.selector || ''}
+            check={checkResult}
+            key={`${checkResult.result.spanId}-${checkResult.assertion}`}
+          />
+        ))}
+      </S.AssertionsContainer>
+    </>
+  );
+};
+
+export default Content;
diff --git a/web/src/components/SpanResultDetail/Detail.tsx b/web/src/components/SpanResultDetail/Detail.tsx
new file mode 100644
index 0000000000..11d756b307
--- /dev/null
+++ b/web/src/components/SpanResultDetail/Detail.tsx
@@ -0,0 +1,66 @@
+import Span from 'models/Span.model';
+import {ClockCircleOutlined, SettingOutlined, ToolOutlined} from '@ant-design/icons';
+import {Tooltip} from 'antd';
+import * as STestSpec from 'components/TestSpec/TestSpec.styled';
+import {SemanticGroupNamesToText} from 'constants/SemanticGroupNames.constants';
+import * as SSpanNode from 'components/Visualization/components/DAG/BaseSpanNode/BaseSpanNode.styled';
+import * as S from './SpanResultDetail.styled';
+
+interface IProps {
+  assertionsFailed: number;
+  assertionsPassed: number;
+  span: Span;
+}
+
+const Detail = ({
+  assertionsFailed,
+  assertionsPassed,
+  span: {duration, name, id, service, kind, system, type},
+}: IProps) => {
+  return (
+    <>
+      <S.DetailsWrapper>
+        <S.SpanHeaderContainer>
+          <SSpanNode.BadgeType count={SemanticGroupNamesToText[type]} $type={type} />
+          <Tooltip title={name}>
+            <S.HeaderTitle level={3}>{name}</S.HeaderTitle>
+          </Tooltip>
+        </S.SpanHeaderContainer>
+        <div>
+          {Boolean(assertionsPassed) && (
+            <STestSpec.HeaderDetail>
+              <STestSpec.HeaderDot $passed />
+              {assertionsPassed}
+            </STestSpec.HeaderDetail>
+          )}
+          {Boolean(assertionsFailed) && (
+            <STestSpec.HeaderDetail>
+              <STestSpec.HeaderDot $passed={false} />
+              {assertionsFailed}
+            </STestSpec.HeaderDetail>
+          )}
+        </div>
+      </S.DetailsWrapper>
+
+      <S.SpanHeaderContainer>
+        <S.HeaderItem>
+          <SettingOutlined />
+          <S.HeaderItemText>{`${service} ${kind}`}</S.HeaderItemText>
+        </S.HeaderItem>
+        {Boolean(system) && (
+          <S.HeaderItem>
+            <ToolOutlined />
+            <S.HeaderItemText>{system}</S.HeaderItemText>
+          </S.HeaderItem>
+        )}
+
+        <S.HeaderItem>
+          <ClockCircleOutlined />
+          <S.HeaderItemText>{duration}</S.HeaderItemText>
+        </S.HeaderItem>
+      </S.SpanHeaderContainer>
+    </>
+  );
+};
+
+export default Detail;
diff --git a/web/src/components/SpanResultDetail/Header.tsx b/web/src/components/SpanResultDetail/Header.tsx
new file mode 100644
index 0000000000..87275c8397
--- /dev/null
+++ b/web/src/components/SpanResultDetail/Header.tsx
@@ -0,0 +1,28 @@
+import Span from 'models/Span.model';
+import {ArrowLeftOutlined} from '@ant-design/icons';
+import {Button, Divider} from 'antd';
+import * as S from './SpanResultDetail.styled';
+import Detail from './Detail';
+
+interface IProps {
+  assertionsFailed: number;
+  assertionsPassed: number;
+  onClose(): void;
+  span: Span;
+}
+
+const Header = ({span, assertionsFailed, assertionsPassed, onClose}: IProps) => (
+  <>
+    <S.HeaderContainer>
+      <S.Row $hasGap>
+        <Button icon={<ArrowLeftOutlined />} onClick={onClose} type="link" />
+        <S.HeaderTitle level={2}>Span Result Detail</S.HeaderTitle>
+      </S.Row>
+    </S.HeaderContainer>
+    <Divider />
+    <Detail span={span} assertionsFailed={assertionsFailed} assertionsPassed={assertionsPassed} />
+    <Divider />
+  </>
+);
+
+export default Header;
diff --git a/web/src/components/SpanResultDetail/SpanResultDetail.styled.ts b/web/src/components/SpanResultDetail/SpanResultDetail.styled.ts
new file mode 100644
index 0000000000..01fd7af8c3
--- /dev/null
+++ b/web/src/components/SpanResultDetail/SpanResultDetail.styled.ts
@@ -0,0 +1,121 @@
+import {CheckCircleFilled, CloseCircleFilled, MinusCircleFilled} from '@ant-design/icons';
+import {Drawer, Typography} from 'antd';
+import styled from 'styled-components';
+import {SemanticGroupNames, SemanticGroupNamesToColor} from 'constants/SemanticGroupNames.constants';
+
+export const AssertionsContainer = styled.div`
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border-top: 1px solid ${({theme}) => theme.color.borderLight};
+`;
+
+export const AssertionContainer = styled.div`
+  span {
+    overflow-wrap: anywhere;
+  }
+`;
+
+export const DrawerContainer = styled(Drawer)<{$type: SemanticGroupNames}>`
+  position: absolute;
+  overflow: hidden;
+
+  .ant-drawer-body {
+    display: flex;
+    flex-direction: column;
+    border-top: ${({$type}) => `4px solid ${SemanticGroupNamesToColor[$type]}`};
+  }
+`;
+
+export const DrawerRow = styled.div`
+  flex: 1;
+`;
+
+export const GridContainer = styled.div`
+  display: grid;
+  grid-template-columns: 4.5% 1fr;
+  align-items: center;
+`;
+
+export const CheckItemContainer = styled.div<{$isSuccessful: boolean}>`
+  padding: 10px 12px;
+
+  border: 1px solid ${({theme}) => theme.color.borderLight};
+
+  border-top: ${({$isSuccessful, theme}) => `4px solid ${$isSuccessful ? theme.color.success : theme.color.error}`};
+`;
+
+export const HeaderContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const HeaderItem = styled.div`
+  align-items: center;
+  color: ${({theme}) => theme.color.text};
+  display: flex;
+  font-size: ${({theme}) => theme.size.sm};
+`;
+
+export const HeaderItemText = styled(Typography.Text)`
+  color: inherit;
+  margin-left: 5px;
+`;
+
+export const HeaderTitle = styled(Typography.Title)`
+  && {
+    text-overflow: ellipsis;
+    max-width: 250px;
+    text-wrap: nowrap;
+    overflow: hidden;
+    margin-bottom: 0;
+  }
+`;
+
+export const IconError = styled(MinusCircleFilled)`
+  color: ${({theme}) => theme.color.error};
+`;
+
+export const IconSuccess = styled(CheckCircleFilled)`
+  color: ${({theme}) => theme.color.success};
+`;
+
+export const Row = styled.div<{$align?: string; $hasGap?: boolean; $justify?: string}>`
+  align-items: ${({$align}) => $align || 'center'};
+  display: flex;
+  justify-content: ${({$justify}) => $justify || 'flex-start'};
+  gap: ${({$hasGap}) => $hasGap && '8px'};
+`;
+
+export const SecondaryText = styled(Typography.Text)`
+  color: ${({theme}) => theme.color.textSecondary};
+  font-size: ${({theme}) => theme.size.sm};
+`;
+
+export const SpanHeaderContainer = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+`;
+
+export const DetailsWrapper = styled.div`
+  align-items: center;
+  cursor: pointer;
+  justify-content: space-between;
+  display: flex;
+`;
+
+export const ClearSearchIcon = styled(CloseCircleFilled)`
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  color: ${({theme}) => theme.color.textLight};
+  cursor: pointer;
+`;
+
+export const SearchContainer = styled(Row)`
+  margin-bottom: 16px;
+`;
diff --git a/web/src/components/SpanResultDetail/SpanResultDetail.tsx b/web/src/components/SpanResultDetail/SpanResultDetail.tsx
new file mode 100644
index 0000000000..99ba6b04df
--- /dev/null
+++ b/web/src/components/SpanResultDetail/SpanResultDetail.tsx
@@ -0,0 +1,38 @@
+import {useTestRun} from 'providers/TestRun/TestRun.provider';
+import {ISpanResult} from 'types/TestSpecs.types';
+import * as S from './SpanResultDetail.styled';
+import Content from './Content';
+
+interface IProps {
+  isOpen: boolean;
+  onClose(): void;
+  spanResult?: ISpanResult;
+}
+
+const SpanResultDetail = ({isOpen, onClose, spanResult}: IProps) => {
+  const {
+    run: {trace},
+  } = useTestRun();
+
+  if (!spanResult) return null;
+
+  const span = trace?.flat[spanResult.spanId] || {};
+
+  return (
+    <S.DrawerContainer
+      closable={false}
+      getContainer={false}
+      mask={false}
+      onClose={onClose}
+      placement="right"
+      visible={isOpen}
+      width="100%"
+      height="100%"
+      $type={span.type}
+    >
+      {!!spanResult && <Content onClose={onClose} span={span} checkResults={spanResult.checkResults} />}
+    </S.DrawerContainer>
+  );
+};
+
+export default SpanResultDetail;
diff --git a/web/src/components/SpanResultDetail/index.ts b/web/src/components/SpanResultDetail/index.ts
new file mode 100644
index 0000000000..4ce3d8172b
--- /dev/null
+++ b/web/src/components/SpanResultDetail/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './SpanResultDetail';
diff --git a/web/src/components/TestSpecDetail/Content.tsx b/web/src/components/TestSpecDetail/Content.tsx
index f7c7a7644b..771d121ac0 100644
--- a/web/src/components/TestSpecDetail/Content.tsx
+++ b/web/src/components/TestSpecDetail/Content.tsx
@@ -1,5 +1,5 @@
-import {useCallback, useEffect, useMemo, useRef} from 'react';
-import {VariableSizeList as List} from 'react-window';
+import {useEffect, useMemo, useRef} from 'react';
+import {FixedSizeList as List} from 'react-window';
 import AutoSizer, {Size} from 'react-virtualized-auto-sizer';
 
 import {useAppSelector} from 'redux/hooks';
@@ -8,7 +8,7 @@ import AssertionService from 'services/Assertion.service';
 import TraceSelectors from 'selectors/Trace.selectors';
 import {TAssertionResultEntry} from 'models/AssertionResults.model';
 import Header from './Header';
-import ResultCard from './ResultCard';
+import SpanResult from './SpanResult';
 import Search from './Search';
 import * as S from './TestSpecDetail.styled';
 
@@ -54,15 +54,6 @@ const Content = ({
     }
   }, [results, selectedSpan]);
 
-  const getItemSize = useCallback(
-    index => {
-      const [, checkResults = []] = results[index];
-
-      return checkResults.length * 72.59 + 40 + 16;
-    },
-    [results]
-  );
-
   return (
     <>
       <div>
@@ -98,10 +89,10 @@ const Content = ({
               height={height}
               itemCount={results.length}
               itemData={results}
-              itemSize={getItemSize}
+              itemSize={80}
               width={width}
             >
-              {ResultCard}
+              {SpanResult}
             </List>
           )}
         </AutoSizer>
diff --git a/web/src/components/TestSpecDetail/ResultCard.tsx b/web/src/components/TestSpecDetail/ResultCard.tsx
deleted file mode 100644
index 95f4b33876..0000000000
--- a/web/src/components/TestSpecDetail/ResultCard.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import {useCallback, useMemo} from 'react';
-import {useSpan} from 'providers/Span/Span.provider';
-import {useTest} from 'providers/Test/Test.provider';
-import {ICheckResult} from 'types/Assertion.types';
-import {SemanticGroupNames} from 'constants/SemanticGroupNames.constants';
-import {useTestRun} from 'providers/TestRun/TestRun.provider';
-import * as S from './TestSpecDetail.styled';
-import Assertion from './Assertion';
-import SpanHeader from './SpanHeader';
-
-interface IProps {
-  index: number;
-  data: [string, ICheckResult[]][];
-  style: React.CSSProperties;
-}
-
-const ResultCard = ({index, data, style}: IProps) => {
-  const [spanId, checkResults] = useMemo(() => data[index], [data, index]);
-  const {
-    run: {trace, id: runId},
-  } = useTestRun();
-  const {
-    test: {id: testId},
-  } = useTest();
-  const {selectedSpan, onSetFocusedSpan, onSelectSpan} = useSpan();
-
-  const onFocusAndSelect = useCallback(() => {
-    onSelectSpan(spanId);
-    onSetFocusedSpan(spanId);
-  }, [onSelectSpan, onSetFocusedSpan, spanId]);
-
-  const span = trace?.flat[spanId];
-
-  return (
-    <S.CardContainer
-      key={spanId}
-      style={{
-        ...style,
-        bottom: Number(style.top) - 16,
-        height: Number(style.height) - 16,
-      }}
-      size="small"
-      title={<SpanHeader onSelectSpan={onFocusAndSelect} span={span} />}
-      type="inner"
-      $isSelected={spanId === selectedSpan?.id}
-      $type={span?.type ?? SemanticGroupNames.General}
-      id={`assertion-result-${spanId}`}
-      onClick={() => onSelectSpan(span?.id ?? '')}
-    >
-      <S.AssertionsContainer>
-        {checkResults.map(checkResult => (
-          <Assertion
-            testId={testId}
-            runId={runId}
-            selector=""
-            check={checkResult}
-            key={`${checkResult.result.spanId}-${checkResult.assertion}`}
-          />
-        ))}
-      </S.AssertionsContainer>
-    </S.CardContainer>
-  );
-};
-
-export default ResultCard;
diff --git a/web/src/components/TestSpecDetail/SpanHeader.tsx b/web/src/components/TestSpecDetail/SpanHeader.tsx
deleted file mode 100644
index d6b573e0ad..0000000000
--- a/web/src/components/TestSpecDetail/SpanHeader.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import {SettingOutlined, ToolOutlined} from '@ant-design/icons';
-
-import {Typography} from 'antd';
-import * as SSpanNode from 'components/Visualization/components/DAG/BaseSpanNode/BaseSpanNode.styled';
-import {SemanticGroupNamesToText} from 'constants/SemanticGroupNames.constants';
-import SpanService from 'services/Span.service';
-import Span from 'models/Span.model';
-import * as S from './TestSpecDetail.styled';
-
-interface IProps {
-  onSelectSpan(spanId: string): void;
-  span?: Span;
-}
-
-const SpanHeader = ({onSelectSpan, span}: IProps) => {
-  const {kind, name, service, system, type} = SpanService.getSpanInfo(span);
-
-  return (
-    <S.Wrapper>
-      <S.SpanHeaderContainer onClick={() => onSelectSpan(span?.id ?? '')}>
-        <SSpanNode.BadgeType count={SemanticGroupNamesToText[type]} $type={type} />
-        <S.HeaderTitle level={3}>{name}</S.HeaderTitle>
-        <S.HeaderItem>
-          <SettingOutlined />
-          <S.HeaderItemText>{`${service} ${kind}`}</S.HeaderItemText>
-        </S.HeaderItem>
-        {Boolean(system) && (
-          <S.HeaderItem>
-            <ToolOutlined />
-            <S.HeaderItemText>{system}</S.HeaderItemText>
-          </S.HeaderItem>
-        )}
-      </S.SpanHeaderContainer>
-      <Typography.Text type="secondary">
-        <i>{span?.id}</i>
-      </Typography.Text>
-    </S.Wrapper>
-  );
-};
-
-export default SpanHeader;
diff --git a/web/src/components/TestSpecDetail/SpanResult.tsx b/web/src/components/TestSpecDetail/SpanResult.tsx
new file mode 100644
index 0000000000..88c93fbfab
--- /dev/null
+++ b/web/src/components/TestSpecDetail/SpanResult.tsx
@@ -0,0 +1,52 @@
+import {useCallback, useMemo} from 'react';
+import {useSpan} from 'providers/Span/Span.provider';
+import {ICheckResult} from 'types/Assertion.types';
+
+import {useTestSpecs} from 'providers/TestSpecs/TestSpecs.provider';
+import {useTestRun} from 'providers/TestRun/TestRun.provider';
+import AssertionService from 'services/Assertion.service';
+import * as S from './TestSpecDetail.styled';
+import Detail from '../SpanResultDetail/Detail';
+
+interface IProps {
+  index: number;
+  data: [string, ICheckResult[]][];
+  style: React.CSSProperties;
+}
+
+const SpanResult = ({index, data, style}: IProps) => {
+  const [spanId, checkResults] = useMemo(() => data[index], [data, index]);
+  const {
+    run: {trace},
+  } = useTestRun();
+  const {selectedSpan, onSetFocusedSpan, onSelectSpan} = useSpan();
+  const {setSelectedSpanResult} = useTestSpecs();
+
+  const onFocusAndSelect = useCallback(() => {
+    onSelectSpan(spanId);
+    onSetFocusedSpan(spanId);
+    setSelectedSpanResult({spanId, checkResults});
+  }, [checkResults, onSelectSpan, onSetFocusedSpan, setSelectedSpanResult, spanId]);
+
+  const span = trace?.flat[spanId] || {};
+
+  const assertionsPassed = useMemo(() => AssertionService.getTotalPassedSpanChecks(checkResults), [checkResults]);
+  const assertionsFailed = checkResults.length - assertionsPassed;
+
+  return (
+    <S.Wrapper
+      style={{
+        ...style,
+        bottom: Number(style.top) - 16,
+        height: Number(style.height) - 16,
+      }}
+      $type={span.type}
+      $isSelected={spanId === selectedSpan?.id}
+      onClick={onFocusAndSelect}
+    >
+      <Detail span={span} assertionsFailed={assertionsFailed} assertionsPassed={assertionsPassed} />
+    </S.Wrapper>
+  );
+};
+
+export default SpanResult;
diff --git a/web/src/components/TestSpecDetail/TestSpecDetail.styled.ts b/web/src/components/TestSpecDetail/TestSpecDetail.styled.ts
index 651e9a7ae0..e67a3f637b 100644
--- a/web/src/components/TestSpecDetail/TestSpecDetail.styled.ts
+++ b/web/src/components/TestSpecDetail/TestSpecDetail.styled.ts
@@ -115,12 +115,14 @@ export const SpanHeaderContainer = styled.div`
   gap: 8px;
 `;
 
-export const Wrapper = styled.div`
-  align-items: center;
+export const Wrapper = styled.div<{$isSelected: boolean; $type: SemanticGroupNames}>`
   cursor: pointer;
-  justify-content: space-between;
-  display: flex;
   padding: 8px 12px;
+
+  border: ${({$isSelected, theme}) =>
+    $isSelected ? `1px solid ${theme.color.interactive}` : `1px solid ${theme.color.borderLight}`};
+
+  border-top: ${({$type}) => `4px solid ${SemanticGroupNamesToColor[$type]}`};
 `;
 
 export const ClearSearchIcon = styled(CloseCircleFilled)`
diff --git a/web/src/providers/TestSpecs/TestSpecs.provider.tsx b/web/src/providers/TestSpecs/TestSpecs.provider.tsx
index ac4179c0e2..3f649131fe 100644
--- a/web/src/providers/TestSpecs/TestSpecs.provider.tsx
+++ b/web/src/providers/TestSpecs/TestSpecs.provider.tsx
@@ -6,7 +6,7 @@ import {useTestRun} from 'providers/TestRun/TestRun.provider';
 import TestSpecsSelectors from 'selectors/TestSpecs.selectors';
 import AssertionResults, {TAssertionResultEntry} from 'models/AssertionResults.model';
 import {TTestSpecEntry} from 'models/TestSpecs.model';
-import {ISuggestion} from 'types/TestSpecs.types';
+import {ISpanResult, ISuggestion} from 'types/TestSpecs.types';
 import useTestSpecsCrud from './hooks/useTestSpecsCrud';
 import {useTest} from '../Test/Test.provider';
 
@@ -20,12 +20,14 @@ interface IContext {
   dryRun(definitionList: TTestSpecEntry[]): void;
   updateIsInitialized(isInitialized: boolean): void;
   selectedTestSpec?: TAssertionResultEntry;
+  selectedSpanResult?: ISpanResult;
   assertionResults?: AssertionResults;
   specs: TTestSpecEntry[];
   isLoading: boolean;
   isError: boolean;
   isDraftMode: boolean;
   setSelectedSpec(selector?: string): void;
+  setSelectedSpanResult(spanResult?: ISpanResult): void;
   setSelectorSuggestions(selectorSuggestions: ISuggestion[]): void;
   setPrevSelector(selector: string): void;
 }
@@ -46,6 +48,7 @@ export const Context = createContext<IContext>({
   updateIsInitialized: noop,
   setSelectorSuggestions: noop,
   setPrevSelector: noop,
+  setSelectedSpanResult: noop,
 });
 
 interface IProps {
@@ -68,6 +71,7 @@ const TestSpecsProvider = ({children, testId, runId}: IProps) => {
 
   const selectedSpec = useAppSelector(TestSpecsSelectors.selectSelectedSpec);
   const selectedTestSpec = useAppSelector(state => TestSpecsSelectors.selectAssertionBySelector(state, selectedSpec!));
+  const selectedSpanResult = useAppSelector(TestSpecsSelectors.selectSelectedSpanResult);
 
   const {
     add,
@@ -83,6 +87,7 @@ const TestSpecsProvider = ({children, testId, runId}: IProps) => {
     setSelectedSpec,
     setSelectorSuggestions,
     setPrevSelector,
+    setSelectedSpanResult,
   } = useTestSpecsCrud({
     assertionResults,
     test,
@@ -124,6 +129,8 @@ const TestSpecsProvider = ({children, testId, runId}: IProps) => {
       updateIsInitialized,
       setSelectorSuggestions,
       setPrevSelector,
+      selectedSpanResult,
+      setSelectedSpanResult,
     }),
     [
       add,
@@ -142,6 +149,8 @@ const TestSpecsProvider = ({children, testId, runId}: IProps) => {
       updateIsInitialized,
       setSelectorSuggestions,
       setPrevSelector,
+      selectedSpanResult,
+      setSelectedSpanResult,
     ]
   );
 
diff --git a/web/src/providers/TestSpecs/hooks/useTestSpecsCrud.ts b/web/src/providers/TestSpecs/hooks/useTestSpecsCrud.ts
index 38097a9721..8b1e0ac3fd 100644
--- a/web/src/providers/TestSpecs/hooks/useTestSpecsCrud.ts
+++ b/web/src/providers/TestSpecs/hooks/useTestSpecsCrud.ts
@@ -22,8 +22,9 @@ import {
   setIsInitialized,
   setSelectorSuggestions as setSelectorSuggestionsAction,
   setPrevSelector as setPrevSelectorAction,
+  setSelectedSpanResult as setSelectedSpanResultAction,
 } from 'redux/slices/TestSpecs.slice';
-import {ISuggestion} from 'types/TestSpecs.types';
+import {ISpanResult, ISuggestion} from 'types/TestSpecs.types';
 
 interface IProps {
   runId: number;
@@ -54,6 +55,13 @@ const useTestSpecsCrud = ({runId, testId, test, isDraftMode, assertionResults}:
     [assertionResults?.resultList, dispatch]
   );
 
+  const setSelectedSpanResult = useCallback(
+    (spanResult: ISpanResult) => {
+      dispatch(setSelectedSpanResultAction(spanResult));
+    },
+    [dispatch]
+  );
+
   const revert = useCallback(
     (originalSelector: string) => {
       return dispatch(revertSpec({originalSelector}));
@@ -164,6 +172,7 @@ const useTestSpecsCrud = ({runId, testId, test, isDraftMode, assertionResults}:
     setSelectedSpec,
     setSelectorSuggestions,
     setPrevSelector,
+    setSelectedSpanResult,
   };
 };
 
diff --git a/web/src/redux/slices/TestSpecs.slice.ts b/web/src/redux/slices/TestSpecs.slice.ts
index 9657eda367..ec67839855 100644
--- a/web/src/redux/slices/TestSpecs.slice.ts
+++ b/web/src/redux/slices/TestSpecs.slice.ts
@@ -12,6 +12,7 @@ export const initialState: ITestSpecsState = {
   isLoading: false,
   isInitialized: false,
   selectedSpec: undefined,
+  selectedSpanResult: undefined,
   isDraftMode: false,
   selectorSuggestions: [],
   prevSelector: '',
@@ -90,6 +91,10 @@ const testSpecsSlice = createSlice<ITestSpecsState, TTestSpecsSliceActions, 'tes
       if (assertionResult) state.selectedSpec = assertionResult.selector;
       else state.selectedSpec = undefined;
     },
+    setSelectedSpanResult(state, {payload: spanResult}) {
+      if (spanResult) state.selectedSpanResult = spanResult;
+      else state.selectedSpanResult = undefined;
+    },
     setSelectorSuggestions(state, {payload: selectorSuggestions}) {
       state.selectorSuggestions = selectorSuggestions;
     },
@@ -139,5 +144,6 @@ export const {
   setIsInitialized,
   setSelectorSuggestions,
   setPrevSelector,
+  setSelectedSpanResult,
 } = testSpecsSlice.actions;
 export default testSpecsSlice.reducer;
diff --git a/web/src/selectors/TestSpecs.selectors.ts b/web/src/selectors/TestSpecs.selectors.ts
index 9e4e3c8701..5862fc360a 100644
--- a/web/src/selectors/TestSpecs.selectors.ts
+++ b/web/src/selectors/TestSpecs.selectors.ts
@@ -42,6 +42,7 @@ const TestSpecsSelectors = () => ({
   selectAssertionBySelector: createSelector(stateSelector, selectorSelector, ({assertionResults}, selector) =>
     assertionResults?.resultList.find(def => def.selector === selector)
   ),
+  selectSelectedSpanResult: createSelector(stateSelector, ({selectedSpanResult}) => selectedSpanResult),
   selectAssertionByPositionIndex: createSelector(
     stateSelector,
     positionIndexSelector,
diff --git a/web/src/services/Assertion.service.ts b/web/src/services/Assertion.service.ts
index cf616dc3da..acec18d9a8 100644
--- a/web/src/services/Assertion.service.ts
+++ b/web/src/services/Assertion.service.ts
@@ -43,6 +43,10 @@ const AssertionService = () => ({
     return countBy(passedResults);
   },
 
+  getTotalPassedSpanChecks(checks: ICheckResult[]) {
+    return checks.filter(({result: {passed}}) => passed).length;
+  },
+
   isValidError(error: string) {
     return TestSpecErrors.some(testSpecError => error.includes(testSpecError));
   },
diff --git a/web/src/types/TestSpecs.types.ts b/web/src/types/TestSpecs.types.ts
index 3a8914d08e..e714629a2e 100644
--- a/web/src/types/TestSpecs.types.ts
+++ b/web/src/types/TestSpecs.types.ts
@@ -3,12 +3,18 @@ import {CaseReducer, PayloadAction} from '@reduxjs/toolkit';
 import {TChange} from 'redux/actions/TestSpecs.actions';
 import TestSpecs, {TTestSpecEntry} from 'models/TestSpecs.model';
 import AssertionResults, {TAssertionResultEntry} from 'models/AssertionResults.model';
+import {ICheckResult} from './Assertion.types';
 
 export interface ISuggestion {
   query: string;
   title: string;
 }
 
+export interface ISpanResult {
+  spanId: string;
+  checkResults: ICheckResult[];
+}
+
 export interface ITestSpecsState {
   initialSpecs: TTestSpecEntry[];
   specs: TTestSpecEntry[];
@@ -20,6 +26,7 @@ export interface ITestSpecsState {
   isDraftMode: boolean;
   selectorSuggestions: ISuggestion[];
   prevSelector: string;
+  selectedSpanResult?: ISpanResult;
 }
 
 export type TTestSpecsSliceActions = {
@@ -32,6 +39,7 @@ export type TTestSpecsSliceActions = {
   resetSpecs: CaseReducer<ITestSpecsState>;
   setAssertionResults: CaseReducer<ITestSpecsState, PayloadAction<AssertionResults>>;
   setSelectedSpec: CaseReducer<ITestSpecsState, PayloadAction<TAssertionResultEntry | undefined>>;
+  setSelectedSpanResult: CaseReducer<ITestSpecsState, PayloadAction<ISpanResult | undefined>>;
   setIsInitialized: CaseReducer<ITestSpecsState, PayloadAction<{isInitialized: boolean}>>;
   setSelectorSuggestions: CaseReducer<ITestSpecsState, PayloadAction<ISuggestion[]>>;
   setPrevSelector: CaseReducer<ITestSpecsState, PayloadAction<{prevSelector: string}>>;