Function Body

src/ui-solid-inspector/index.tsx:1055–1141

(props: StoreProp)

};

const Body = (props: StoreProp) => {
  let article: HTMLElement | undefined;
  let idleCallback = 0;
  const [scrolled, setScrolled] = createSignal(false);
  const state = useTable(STATE_TABLE, props.s);
  const scrollValues = useValues(props.s);

  createEffect(() => {
    const {scrollLeft, scrollTop} = scrollValues();
    if (article && !scrolled()) {
      const observer = new MutationObserver(() => {
        if (
          article &&
          article.scrollWidth >=
            mathFloor(scrollLeft as number) + article.clientWidth &&
          article.scrollHeight >=
            mathFloor(scrollTop as number) + article.clientHeight
        ) {
          article.scrollTo(scrollLeft as number, scrollTop as number);
        }
      });
      observer.observe(article, {childList: true, subtree: true});
      onCleanup(() => observer.disconnect());
    }
  });

  const handleScroll = (event: Event & {currentTarget: HTMLElement}) => {
    const {scrollLeft, scrollTop} = event.currentTarget;
    cancelInspectorIdleCallback(idleCallback);
    idleCallback = requestInspectorIdleCallback(() => {
      setScrolled(true);
      props.s.setPartialValues({scrollLeft, scrollTop});
    });
  };

  const store = useStore();
  const storeIds = useStoreIds();
  const metrics = useMetrics();
  const metricsIds = useMetricsIds();
  const indexes = useIndexes();
  const indexesIds = useIndexesIds();
  const relationships = useRelationships();
  const relationshipsIds = useRelationshipsIds();
  const queries = useQueries();
  const queriesIds = useQueriesIds();

  return (
    <>
      {state() &&
      isUndefined(store()) &&
      arrayIsEmpty(storeIds()) &&
      isUndefined(metrics()) &&
      arrayIsEmpty(metricsIds()) &&
      isUndefined(indexes()) &&
      arrayIsEmpty(indexesIds()) &&
      isUndefined(relationships()) &&
      arrayIsEmpty(relationshipsIds()) &&
      isUndefined(queries()) &&