From e862b9d29d65ba9981beb7173306cf174afdf8d1 Mon Sep 17 00:00:00 2001
From: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Date: Wed, 7 Jun 2023 23:54:24 +0900
Subject: [PATCH] fix(frontend): fix analyzer results in trace DAG (#2674)

---
 web/cypress/e2e/TestRunDetail/Outputs.spec.ts |  3 +
 .../e2e/TestRunDetail/TestRunDetail.spec.ts   |  2 +
 web/src/components/Drawer/Drawer.tsx          |  1 +
 .../RunDetailTrace/RunDetailTrace.styled.ts   |  2 +
 .../RunDetailTrace/Visualization.tsx          |  8 +--
 .../components/DAG/AnalyzerResults.styled.ts  | 62 +++++++++++++++++++
 .../components/DAG/AnalyzerResults.tsx        | 44 +++++++++++++
 .../components/DAG/SpanNode.styled.ts         | 49 ---------------
 .../Visualization/components/DAG/SpanNode.tsx | 55 +++++++---------
 .../hooks/__tests__/useElementSize.test.tsx   |  8 ---
 web/src/hooks/useElementSize.tsx              | 38 ------------
 web/src/hooks/useOnClickOutside.tsx           | 24 +++++++
 web/src/redux/slices/Trace.slice.ts           |  8 ++-
 web/src/selectors/Trace.selectors.ts          |  4 ++
 web/src/services/Span.service.ts              | 21 +++----
 15 files changed, 183 insertions(+), 146 deletions(-)
 create mode 100644 web/src/components/Visualization/components/DAG/AnalyzerResults.styled.ts
 create mode 100644 web/src/components/Visualization/components/DAG/AnalyzerResults.tsx
 delete mode 100644 web/src/hooks/__tests__/useElementSize.test.tsx
 delete mode 100644 web/src/hooks/useElementSize.tsx
 create mode 100644 web/src/hooks/useOnClickOutside.tsx

diff --git a/web/cypress/e2e/TestRunDetail/Outputs.spec.ts b/web/cypress/e2e/TestRunDetail/Outputs.spec.ts
index 76e57d2ff0..4bb363ae6b 100644
--- a/web/cypress/e2e/TestRunDetail/Outputs.spec.ts
+++ b/web/cypress/e2e/TestRunDetail/Outputs.spec.ts
@@ -7,6 +7,7 @@ describe('Outputs', () => {
     // Open output flow from the Trace view (attributes)
     cy.selectRunDetailMode(2);
     cy.get('[data-cy=trace-node-database]', {timeout: 25000}).first().click({force: true});
+    cy.get('[data-cy=toggle-drawer]', {timeout: 25000}).click({force: true});
     cy.get('[data-cy=attributes-search-container] input').type('db.name');
     cy.get('[data-cy=attribute-row-db-name] .ant-dropdown-trigger').click();
     cy.contains('Create output').click();
@@ -45,6 +46,7 @@ describe('Outputs', () => {
     // Open output flow from the Trace view (attributes)
     cy.selectRunDetailMode(2);
     cy.get('[data-cy=trace-node-database]', {timeout: 25000}).first().click({force: true});
+    cy.get('[data-cy=toggle-drawer]', {timeout: 25000}).click({force: true});
     cy.get('[data-cy=attributes-search-container] input').type('db.name');
     cy.get('[data-cy=attribute-row-db-name] .ant-dropdown-trigger').click();
     cy.contains('Create output').click();
@@ -87,6 +89,7 @@ describe('Outputs', () => {
     // Open output flow from the Trace view (attributes)
     cy.selectRunDetailMode(2);
     cy.get('[data-cy=trace-node-database]', {timeout: 25000}).first().click({force: true});
+    cy.get('[data-cy=toggle-drawer]', {timeout: 25000}).click({force: true});
     cy.get('[data-cy=attributes-search-container] input').type('db.name');
     cy.get('[data-cy=attribute-row-db-name] .ant-dropdown-trigger').click();
     cy.contains('Create output').click();
diff --git a/web/cypress/e2e/TestRunDetail/TestRunDetail.spec.ts b/web/cypress/e2e/TestRunDetail/TestRunDetail.spec.ts
index e67c5c4e7c..1c4b298a61 100644
--- a/web/cypress/e2e/TestRunDetail/TestRunDetail.spec.ts
+++ b/web/cypress/e2e/TestRunDetail/TestRunDetail.spec.ts
@@ -7,6 +7,7 @@ describe('Test Run Detail Views', () => {
   it('Trace view -> show the attribute list for a specific span', () => {
     cy.selectRunDetailMode(2);
     cy.get('[data-cy=trace-node-http]').click();
+    cy.get('[data-cy=toggle-drawer]').click();
 
     cy.get('[data-cy=attribute-list]').should('be.visible');
     cy.get('[data-cy=attribute-row-http-method]').should('be.visible');
@@ -15,6 +16,7 @@ describe('Test Run Detail Views', () => {
   it('Trace view -> attribute list', () => {
     cy.selectRunDetailMode(2);
     cy.get('[data-cy=trace-node-http]').click();
+    cy.get('[data-cy=toggle-drawer]').click();
 
     cy.get('[data-cy=attribute-list]').should('be.visible');
   });
diff --git a/web/src/components/Drawer/Drawer.tsx b/web/src/components/Drawer/Drawer.tsx
index f6d006f752..a87be3cbb7 100644
--- a/web/src/components/Drawer/Drawer.tsx
+++ b/web/src/components/Drawer/Drawer.tsx
@@ -66,6 +66,7 @@ const Drawer = ({leftPanel, rightPanel}: IProps) => {
         <ReflexSplitter>
           <S.ButtonContainer>
             <Button
+              data-cy="toggle-drawer"
               data-tour={StepsID.SpanDetails}
               icon={isOpen ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
               onClick={event => {
diff --git a/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts b/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts
index 988e99fbe0..a315713cbb 100644
--- a/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts
+++ b/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts
@@ -9,6 +9,8 @@ export const Container = styled.div`
 
 export const SearchContainer = styled.div`
   padding: 24px 24px 0;
+  position: relative;
+  z-index: 9;
 `;
 
 export const Section = styled.div`
diff --git a/web/src/components/RunDetailTrace/Visualization.tsx b/web/src/components/RunDetailTrace/Visualization.tsx
index f4e5adb5ce..370cb94cfe 100644
--- a/web/src/components/RunDetailTrace/Visualization.tsx
+++ b/web/src/components/RunDetailTrace/Visualization.tsx
@@ -11,7 +11,6 @@ import TraceDiagramAnalyticsService from 'services/Analytics/TraceDiagramAnalyti
 import TestRunService from 'services/TestRun.service';
 import {TTestRunState} from 'types/TestRun.types';
 import Span from 'models/Span.model';
-import {useDrawer} from '../Drawer/Drawer';
 import DAG from '../Visualization/components/DAG';
 import Timeline from '../Visualization/components/Timeline';
 import {VisualizationType} from './RunDetailTrace';
@@ -30,7 +29,6 @@ const Visualization = ({runEvents, runState, spans, type}: IProps) => {
   const nodes = useAppSelector(TraceSelectors.selectNodes);
   const selectedSpan = useAppSelector(TraceSelectors.selectSelectedSpan);
   const isMatchedMode = Boolean(matchedSpans.length);
-  const {openDrawer} = useDrawer();
 
   useEffect(() => {
     dispatch(initNodes({spans}));
@@ -48,18 +46,16 @@ const Visualization = ({runEvents, runState, spans, type}: IProps) => {
     (event, {id}: Node) => {
       TraceDiagramAnalyticsService.onClickSpan(id);
       dispatch(selectSpan({spanId: id}));
-      openDrawer();
     },
-    [dispatch, openDrawer]
+    [dispatch]
   );
 
   const onNodeClickTimeline = useCallback(
     (spanId: string) => {
       TraceAnalyticsService.onTimelineSpanClick(spanId);
       dispatch(selectSpan({spanId}));
-      openDrawer();
     },
-    [dispatch, openDrawer]
+    [dispatch]
   );
 
   const onNavigateToSpan = useCallback(
diff --git a/web/src/components/Visualization/components/DAG/AnalyzerResults.styled.ts b/web/src/components/Visualization/components/DAG/AnalyzerResults.styled.ts
new file mode 100644
index 0000000000..05a02b80d7
--- /dev/null
+++ b/web/src/components/Visualization/components/DAG/AnalyzerResults.styled.ts
@@ -0,0 +1,62 @@
+import {ExclamationCircleFilled} from '@ant-design/icons';
+import {Typography} from 'antd';
+import styled, {css} from 'styled-components';
+
+export const Body = styled.div`
+  margin-top: 5px;
+  position: relative;
+`;
+
+export const Connector = styled.div`
+  background-color: ${({theme}) => theme.color.error};
+  height: 2px;
+  left: -26px;
+  position: absolute;
+  top: 49px;
+  width: 26px;
+  z-index: 9;
+`;
+
+export const Container = styled.div`
+  background-color: ${({theme}) => theme.color.white};
+  border: ${({theme}) => `2px solid ${theme.color.error}`};
+  border-radius: 10px;
+  font-size: ${({theme}) => theme.size.xs};
+  height: 100px;
+  padding: 10px;
+  position: absolute;
+  right: -210px;
+  top: -32px;
+  width: 200px;
+`;
+
+export const Content = styled.div`
+  height: 100%;
+  overflow-y: scroll;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const ErrorIcon = styled(ExclamationCircleFilled)<{$isAbsolute?: boolean}>`
+  color: ${({theme}) => theme.color.error};
+
+  ${({$isAbsolute}) =>
+    $isAbsolute &&
+    css`
+      position: absolute;
+      right: 10px;
+      top: 5px;
+    `}
+`;
+
+export const Text = styled(Typography.Text)`
+  color: inherit;
+`;
+
+export const Title = styled(Typography.Title)`
+  && {
+    margin-bottom: 0;
+  }
+`;
diff --git a/web/src/components/Visualization/components/DAG/AnalyzerResults.tsx b/web/src/components/Visualization/components/DAG/AnalyzerResults.tsx
new file mode 100644
index 0000000000..8194150024
--- /dev/null
+++ b/web/src/components/Visualization/components/DAG/AnalyzerResults.tsx
@@ -0,0 +1,44 @@
+import {Space} from 'antd';
+import {useRef} from 'react';
+
+import useOnClickOutside from 'hooks/useOnClickOutside';
+import {TLintBySpanContent} from 'services/Span.service';
+import * as S from './AnalyzerResults.styled';
+
+interface IProps {
+  lintErrors: TLintBySpanContent[];
+  onClose(): void;
+}
+
+const AnalyzerResults = ({lintErrors, onClose}: IProps) => {
+  const ref = useRef(null);
+  useOnClickOutside(ref, onClose);
+
+  return (
+    <S.Container className="nowheel nodrag" ref={ref}>
+      <S.Connector />
+      <S.Content>
+        <Space>
+          <S.ErrorIcon />
+          <S.Title level={4}>Analyzer errors</S.Title>
+        </Space>
+        <S.Body>
+          {lintErrors.map(lintError => (
+            <div key={lintError.ruleName}>
+              <S.Text strong>{lintError.ruleName}</S.Text>
+
+              {lintError.errors.map((error, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <div key={index}>
+                  <S.Text type="secondary">- {error}</S.Text>
+                </div>
+              ))}
+            </div>
+          ))}
+        </S.Body>
+      </S.Content>
+    </S.Container>
+  );
+};
+
+export default AnalyzerResults;
diff --git a/web/src/components/Visualization/components/DAG/SpanNode.styled.ts b/web/src/components/Visualization/components/DAG/SpanNode.styled.ts
index 3c9c32f334..a3a36bceb2 100644
--- a/web/src/components/Visualization/components/DAG/SpanNode.styled.ts
+++ b/web/src/components/Visualization/components/DAG/SpanNode.styled.ts
@@ -1,4 +1,3 @@
-import {CloseOutlined, ExclamationCircleFilled} from '@ant-design/icons';
 import {Badge, Typography} from 'antd';
 import styled, {css} from 'styled-components';
 
@@ -116,54 +115,6 @@ export const ItemText = styled(Typography.Text)`
   margin-left: 5px;
 `;
 
-export const LintBody = styled.div`
-  margin-top: 5px;
-`;
-
-export const LintContainer = styled.div`
-  background-color: ${({theme}) => theme.color.white};
-  border: ${({theme}) => `2px solid ${theme.color.error}`};
-  border-radius: 10px;
-  font-size: ${({theme}) => theme.size.xs};
-  height: 100px;
-  overflow-y: scroll;
-  padding: 10px;
-  position: absolute;
-  right: -210px;
-  top: -50px;
-  width: 200px;
-`;
-
-export const LintCloseIcon = styled(CloseOutlined)`
-  color: ${({theme}) => theme.color.border};
-  cursor: pointer;
-  position: absolute;
-  right: 10px;
-  top: 10px;
-`;
-
-export const LintErrorIcon = styled(ExclamationCircleFilled)<{$isAbsolute?: boolean}>`
-  color: ${({theme}) => theme.color.error};
-
-  ${({$isAbsolute}) =>
-    $isAbsolute &&
-    css`
-      position: absolute;
-      right: 10px;
-      top: 5px;
-    `}
-`;
-
-export const LintText = styled(Typography.Text)`
-  color: inherit;
-`;
-
-export const LintTitle = styled(Typography.Title)`
-  && {
-    margin-bottom: 0;
-  }
-`;
-
 export const TopLine = styled.div<{$type: SemanticGroupNames}>`
   background-color: ${({$type}) => SemanticGroupNamesToColor[$type]};
   height: 7px;
diff --git a/web/src/components/Visualization/components/DAG/SpanNode.tsx b/web/src/components/Visualization/components/DAG/SpanNode.tsx
index 5a8fd3223f..e751ff20a7 100644
--- a/web/src/components/Visualization/components/DAG/SpanNode.tsx
+++ b/web/src/components/Visualization/components/DAG/SpanNode.tsx
@@ -1,27 +1,31 @@
 import {ClockCircleOutlined, SettingOutlined, ToolOutlined} from '@ant-design/icons';
-import {Space} from 'antd';
-import {useMemo, useState} from 'react';
+import {useMemo} from 'react';
 import {Handle, NodeProps, Position} from 'react-flow-renderer';
 
-import {SemanticGroupNamesToText} from 'constants/SemanticGroupNames.constants';
-import {SpanKindToText} from 'constants/Span.constants';
-import {useAppSelector} from 'redux/hooks';
-import SpanService from 'services/Span.service';
-import TestSpecsSelectors from 'selectors/TestSpecs.selectors';
-import {INodeDataSpan} from 'types/DAG.types';
 import AssertionResultChecks from 'components/AssertionResultChecks/AssertionResultChecks';
-import {selectOutputsBySpanId} from 'redux/testOutputs/selectors';
+import CurrentSpanSelector from 'components/CurrentSpanSelector';
 import TestOutputMark from 'components/TestOutputMark';
 import {useTestSpecForm} from 'components/TestSpecForm/TestSpecForm.provider';
-import CurrentSpanSelector from 'components/CurrentSpanSelector';
+import {SemanticGroupNamesToText} from 'constants/SemanticGroupNames.constants';
+import {SpanKindToText} from 'constants/Span.constants';
 import {useSpan} from 'providers/Span/Span.provider';
 import {useTestOutput} from 'providers/TestOutput/TestOutput.provider';
 import {useTestRun} from 'providers/TestRun/TestRun.provider';
+import {useAppDispatch, useAppSelector} from 'redux/hooks';
+import {selectAnalyzerResults} from 'redux/slices/Trace.slice';
+import {selectOutputsBySpanId} from 'redux/testOutputs/selectors';
+import TestSpecsSelectors from 'selectors/TestSpecs.selectors';
+import TraceSelectors from 'selectors/Trace.selectors';
+import SpanService from 'services/Span.service';
+import {INodeDataSpan} from 'types/DAG.types';
+import AnalyzerResults from './AnalyzerResults';
+import * as SA from './AnalyzerResults.styled';
 import * as S from './SpanNode.styled';
 
 interface IProps extends NodeProps<INodeDataSpan> {}
 
 const SpanNode = ({data, id, selected}: IProps) => {
+  const dispatch = useAppDispatch();
   const assertions = useAppSelector(state => TestSpecsSelectors.selectAssertionResultsBySpan(state, data?.id || ''));
   const outputs = useAppSelector(state => selectOutputsBySpanId(state, data?.id || ''));
   const {failed, passed} = useMemo(() => SpanService.getAssertionResultSummary(assertions), [assertions]);
@@ -36,7 +40,11 @@ const SpanNode = ({data, id, selected}: IProps) => {
   const showSelectAsCurrent =
     !data.isMatched && !!matchedSpans.length && (isTestSpecFormOpen || isTestOutputFormOpen) && selected;
   const className = `${data.isMatched ? 'matched' : ''} ${showSelectAsCurrent ? 'selectedAsCurrent' : ''}`;
-  const [isOpenLintErrors, setIsOpenLintErrors] = useState(false);
+  const selectedAnalyzerResults = useAppSelector(TraceSelectors.selectSelectedAnalyzerResults);
+
+  const handleSelectAnalyzerResults = (spanId: string = '') => {
+    dispatch(selectAnalyzerResults({spanId}));
+  };
 
   return (
     <>
@@ -50,27 +58,8 @@ const SpanNode = ({data, id, selected}: IProps) => {
 
         <S.TopLine $type={data.type} />
 
-        {isOpenLintErrors && (
-          <S.LintContainer className="nowheel nodrag">
-            <S.LintCloseIcon onClick={() => setIsOpenLintErrors(false)} />
-            <Space>
-              <S.LintErrorIcon />
-              <S.LintTitle level={4}>Analyzer errors</S.LintTitle>
-            </Space>
-            <S.LintBody>
-              {lintErrors.map(lintError => (
-                <div>
-                  <S.LintText strong>{lintError.ruleName}</S.LintText>
-
-                  {lintError.errors.map(error => (
-                    <div>
-                      <S.LintText type="secondary">- {error}</S.LintText>
-                    </div>
-                  ))}
-                </div>
-              ))}
-            </S.LintBody>
-          </S.LintContainer>
+        {selectedAnalyzerResults === data.id && (
+          <AnalyzerResults lintErrors={lintErrors} onClose={() => handleSelectAnalyzerResults()} />
         )}
 
         <S.Header>
@@ -78,7 +67,7 @@ const SpanNode = ({data, id, selected}: IProps) => {
             <S.BadgeType count={SemanticGroupNamesToText[data.type]} $hasMargin $type={data.type} />
           </S.BadgeContainer>
           <S.HeaderText>{data.name}</S.HeaderText>
-          {!!lintErrors.length && <S.LintErrorIcon $isAbsolute onClick={() => setIsOpenLintErrors(prev => !prev)} />}
+          {!!lintErrors.length && <SA.ErrorIcon $isAbsolute onClick={() => handleSelectAnalyzerResults(data.id)} />}
         </S.Header>
 
         <S.Body>
diff --git a/web/src/hooks/__tests__/useElementSize.test.tsx b/web/src/hooks/__tests__/useElementSize.test.tsx
deleted file mode 100644
index 8b7ec35b67..0000000000
--- a/web/src/hooks/__tests__/useElementSize.test.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import {renderHook} from '@testing-library/react-hooks';
-import {useElementSize} from '../useElementSize';
-
-test('useElementSize', () => {
-  const {result} = renderHook(() => useElementSize());
-  expect(result.current[1].width).toBe(0);
-  expect(result.current[1].height).toBe(0);
-});
diff --git a/web/src/hooks/useElementSize.tsx b/web/src/hooks/useElementSize.tsx
deleted file mode 100644
index f776179977..0000000000
--- a/web/src/hooks/useElementSize.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import {useCallback, useState} from 'react';
-import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
-import {useEventListener} from './useEventListener';
-
-interface Size {
-  width: number;
-  height: number;
-}
-
-export function useElementSize<T extends HTMLElement = HTMLDivElement>(): [(node: T | null) => void, Size] {
-  // Mutable values like 'ref.current' aren't valid dependencies
-  // because mutating them doesn't re-render the component.
-  // Instead, we use a state as a ref to be reactive.
-  const [ref, setRef] = useState<T | null>(null);
-  const [size, setSize] = useState<Size>({
-    width: 0,
-    height: 0,
-  });
-
-  // Prevent too many rendering using useCallback
-  const handleSize = useCallback(() => {
-    setSize({
-      width: ref?.offsetWidth || 0,
-      height: ref?.offsetHeight || 0,
-    });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref?.offsetHeight, ref?.offsetWidth]);
-
-  useEventListener('resize', handleSize);
-
-  useIsomorphicLayoutEffect(() => {
-    handleSize();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref?.offsetHeight, ref?.offsetWidth]);
-
-  return [setRef, size];
-}
diff --git a/web/src/hooks/useOnClickOutside.tsx b/web/src/hooks/useOnClickOutside.tsx
new file mode 100644
index 0000000000..ea7f5b763c
--- /dev/null
+++ b/web/src/hooks/useOnClickOutside.tsx
@@ -0,0 +1,24 @@
+import {RefObject} from 'react';
+
+import {useEventListener} from './useEventListener';
+
+type Handler = (event: MouseEvent) => void;
+
+function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: Handler,
+  mouseEvent: 'click' | 'mousedown' | 'mouseup' = 'click'
+): void {
+  useEventListener(mouseEvent, event => {
+    const el = ref?.current;
+
+    // Do nothing if clicking ref's element or descendent elements
+    if (!el || el.contains(event.target as Node)) {
+      return;
+    }
+
+    handler(event);
+  });
+}
+
+export default useOnClickOutside;
diff --git a/web/src/redux/slices/Trace.slice.ts b/web/src/redux/slices/Trace.slice.ts
index cd0ff400d9..6181bab849 100644
--- a/web/src/redux/slices/Trace.slice.ts
+++ b/web/src/redux/slices/Trace.slice.ts
@@ -11,6 +11,7 @@ export interface ITraceState {
   nodes: Node[];
   searchText: string;
   selectedSpan: string;
+  selectedAnalyzerResults: string;
 }
 
 const initialState: ITraceState = {
@@ -19,6 +20,7 @@ const initialState: ITraceState = {
   nodes: [],
   searchText: '',
   selectedSpan: '',
+  selectedAnalyzerResults: '',
 };
 
 const traceSlice = createSlice({
@@ -66,8 +68,12 @@ const traceSlice = createSlice({
     setSearchText(state, {payload}: PayloadAction<{searchText: string}>) {
       state.searchText = payload.searchText.toLowerCase();
     },
+    selectAnalyzerResults(state, {payload}: PayloadAction<{spanId: string}>) {
+      state.selectedAnalyzerResults = payload.spanId;
+    },
   },
 });
 
-export const {initNodes, changeNodes, selectSpan, matchSpans, setSearchText} = traceSlice.actions;
+export const {initNodes, changeNodes, selectSpan, matchSpans, setSearchText, selectAnalyzerResults} =
+  traceSlice.actions;
 export default traceSlice.reducer;
diff --git a/web/src/selectors/Trace.selectors.ts b/web/src/selectors/Trace.selectors.ts
index 9302dbd7bb..1ae101c98f 100644
--- a/web/src/selectors/Trace.selectors.ts
+++ b/web/src/selectors/Trace.selectors.ts
@@ -10,6 +10,10 @@ const TraceSelectors = () => ({
   selectNodes: createSelector(traceStateSelector, ({nodes}) => nodes),
   selectSelectedSpan: createSelector(traceStateSelector, ({selectedSpan}) => selectedSpan),
   selectSearchText: createSelector(traceStateSelector, ({searchText}) => searchText),
+  selectSelectedAnalyzerResults: createSelector(
+    traceStateSelector,
+    ({selectedAnalyzerResults}) => selectedAnalyzerResults
+  ),
 });
 
 export default TraceSelectors();
diff --git a/web/src/services/Span.service.ts b/web/src/services/Span.service.ts
index 72906553e6..7b4d851ca5 100644
--- a/web/src/services/Span.service.ts
+++ b/web/src/services/Span.service.ts
@@ -87,16 +87,15 @@ const SpanService = () => ({
   },
 });
 
-export type TLintBySpan = Record<
-  string,
-  {
-    ruleName: string;
-    pluginName: string;
-    passed: boolean;
-    spanId: string;
-    errors: string[];
-    severity: 'error' | 'warning';
-  }[]
->;
+export type TLintBySpanContent = {
+  ruleName: string;
+  pluginName: string;
+  passed: boolean;
+  spanId: string;
+  errors: string[];
+  severity: 'error' | 'warning';
+};
+
+export type TLintBySpan = Record<string, TLintBySpanContent[]>;
 
 export default SpanService();