Function RelatedValues

app/components/RelatedValues.tsx:19–60

({ relatedPaths }: RelatedValuesProps)

};

export function RelatedValues({ relatedPaths }: RelatedValuesProps) {
  const [json] = useJson();
  const { selectedNodeId } = useJsonColumnViewState();
  const [openId, setOpenId] = useState<string | null>(null);

  const relatedValuesGroups = useMemo<Array<RelatedValuesGroup>>(() => {
    if (!selectedNodeId) {
      return [];
    }
    return groupRelatedValues(relatedPaths, json);
  }, [json, relatedPaths]);

  const toggleOpen = (id: string) => {
    if (openId === id) {
      setOpenId(null);
    } else {
      setOpenId(id);
    }
  };

  return (
    <>
      {relatedValuesGroups.length > 0 && (
        <div className="my-4">
          <Title className="mb-2 text-slate-700 transition dark:text-slate-400">
            Related values
          </Title>
          {relatedValuesGroups.map((relatedValuesGroup, i) => {
            return (
              <RelatedValuesGroupItem
                group={relatedValuesGroup}
                key={relatedValuesGroup.value}
                isOpen={relatedValuesGroup.value === openId}
                toggleOpen={() => toggleOpen(relatedValuesGroup.value)}
              />
            );
          })}
        </div>
      )}
    </>
  );
}

function RelatedValuesGroupItem({
  group,