...

import { useCallback, useState, useEffect } from 'react';

import { DataFrame, TraceLog } from '@grafana/data';

import DetailState from './components/TraceTimelineViewer/SpanDetail/DetailState';
import { TraceSpanReference } from './components/types/trace';
/**
 * Keeps state of the span detail. This means whether span details are open but also state of each detail subitem
 * like logs or tags.
 */
export function useDetailState(frame: DataFrame) {
  const [detailStates, setDetailStates] = useState(new Map<string, DetailState>());

// Clear detail state when new trace arrives
  useEffect(() => {
    setDetailStates(new Map<string, DetailState>());
  }, [frame, setDetailStates]);

const detailLogItemToggle = useCallback(
    function detailLogItemToggle(spanID: string, log: TraceLog) {
      const old = detailStates.get(spanID);
      if (!old) {
        return;
      }
      const detailState = old.toggleLogItem(log);
      const newDetailStates = new Map(detailStates);
      newDetailStates.set(spanID, detailState);
      return setDetailStates(newDetailStates);
    },
    [detailStates]
  );

const detailReferenceItemToggle = useCallback(
    function detailReferenceItemToggle(spanID: string, reference: TraceSpanReference) {
      const old = detailStates.get(spanID);
      if (!old) {
        return;
      }
      const detailState = old.toggleReferenceItem(reference);
      const newDetailStates = new Map(detailStates);
      newDetailStates.set(spanID, detailState);
      return setDetailStates(newDetailStates);
    },
    [detailStates]
  );

return {
    detailStates,
    toggleDetail,
    detailLogItemToggle,
    detailLogsToggle: useCallback(
      (spanID: string) => makeDetailSubsectionToggle('logs', detailStates, setDetailStates)(spanID),
      [detailStates]
    ),
    detailWarningsToggle: useCallback(
      (spanID: string) => makeDetailSubsectionToggle('warnings', detailStates, setDetailStates)(spanID),
      [detailStates]
    ),
    detailStackTracesToggle: useCallback(
      (spanID: string) => makeDetailSubsectionToggle('stackTraces', detailStates, setDetailStates)(spanID),
      [detailStates]
    ),
    detailReferenceItemToggle,
    detailReferencesToggle: useCallback(
      (spanID: string) => makeDetailSubsectionToggle('references', detailStates, setDetailStates)(spanID),
      [detailStates]
    ),
    detailProcessToggle: useCallback(
      (spanID: string) => makeDetailSubsectionToggle('process', detailStates, setDetailStates)(spanID),
      [detailStates]
    ),
    detailTagsToggle: useCallback(
      (spanID: string) => makeDetailSubsectionToggle('tags', detailStates, setDetailStates)(spanID),
      [detailStates]
    ),
  };
}

.	Edit
..	Edit
TraceView.test.tsx	Edit
TraceView.tsx	Edit
TraceViewContainer.test.tsx	Edit
TraceViewContainer.tsx	Edit
components	Edit
createSpanLink.test.ts	Edit
createSpanLink.tsx	Edit
custom.d.ts	Edit
useChildrenState.test.ts	Edit
useChildrenState.ts	Edit
useDetailState.test.ts	Edit
useDetailState.ts	Edit
useHoverIndentGuide.test.ts	Edit
useHoverIndentGuide.ts	Edit
useSearch.test.ts	Edit
useSearch.ts	Edit
useViewRange.test.ts	Edit
useViewRange.ts	Edit
utils	Edit