Function Explain

web/pgadmin/static/js/Explain/index.jsx:511–603

({
  plans=[],
  emptyMessage=gettext('Use the Explain/Explain Analyze button to generate the plan for a query. Alternatively, you can also execute "EXPLAIN (FORMAT JSON) [QUERY]".'),
  llmEnabled: llmEnabledProp=false,
  sql='',
  transId=null,
  onInsertSQL=null,
})

}

export default function Explain({
  plans=[],
  emptyMessage=gettext('Use the Explain/Explain Analyze button to generate the plan for a query. Alternatively, you can also execute "EXPLAIN (FORMAT JSON) [QUERY]".'),
  llmEnabled: llmEnabledProp=false,
  sql='',
  transId=null,
  onInsertSQL=null,
}) {

  const [tabValue, setTabValue] = useState(0);
  const [llmEnabled, setLlmEnabled] = useState(llmEnabledProp);

  // Fetch LLM status independently to handle timing issues
  useEffect(() => {
    const api = getApiInstance();
    api.get(url_for('llm.status'))
      .then((res) => {
        if (res.data?.success && res.data?.data?.enabled) {
          setLlmEnabled(true);
        }
      })
      .catch(() => {
        // LLM not available - this is fine
      });
  }, []);

  let ctx = React.useRef({});
  let planData = React.useMemo(()=>{
    ctx.current = {
      totalNodes: 0,
      totalDownloadedNodes: 0,
      isDownloaded: 0,
      explainTable: {
        rows: [],
        statistics: {
          tables: {},
          nodes: {},
        },
      },
      arrows: {},
    };
    return plans && parsePlanData(plans[0], ctx.current);
  }, [plans]);

  if(_.isEmpty(plans)) {
    return (
      <StyledBox height="100%" display="flex" flexDirection="column">
        {emptyMessage && <EmptyPanelMessage text={emptyMessage} />}
      </StyledBox>
    );
  }
  return (
    <StyledBox height="100%" display="flex" flexDirection="column">
      <Box>
        <Tabs
          value={tabValue}
          onChange={(_e, selTabValue) => {
            setTabValue(selTabValue);