grafana/public/app/features/explore/TraceView/useHoverIndentGuide.ts

import { useState } from 'react';

/**
 * This is used internally to handle hover state of indent guide. As indent guides are separate
 * components per each row/span and you need to highlight all in multiple rows to make the effect of single line
 * they need this kind of common imperative state changes.
 *
 * Ideally would be changed to trace view internal state.
 */
export function useHoverIndentGuide() {
  const [hoverIndentGuideIds, setHoverIndentGuideIds] = useState(new Set<string>());

  function addHoverIndentGuideId(spanID: string) {
    setHoverIndentGuideIds(prevState => {
      const newHoverIndentGuideIds = new Set(prevState);
      newHoverIndentGuideIds.add(spanID);
      return newHoverIndentGuideIds;
    });
  }

  function removeHoverIndentGuideId(spanID: string) {
    setHoverIndentGuideIds(prevState => {
      const newHoverIndentGuideIds = new Set(prevState);
      newHoverIndentGuideIds.delete(spanID);
      return newHoverIndentGuideIds;
    });
  }

  return { hoverIndentGuideIds, addHoverIndentGuideId, removeHoverIndentGuideId };
}