function DataExplorerContent()

in packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.tsx [81:181]
94 lines of code
6 McCabe index (conditional complexity)

function DataExplorerContent({ vertexType }: ConnectionsProps) {
  const styleWithTheme = useWithTheme();

  const config = useConfiguration();

  // Automatically updates counts if needed
  useUpdateVertexTypeCounts(vertexType);

  const vertexConfig = useVertexTypeConfig(vertexType);
  const displayTypeConfig = useDisplayVertexTypeConfig(vertexType);
  const { pageIndex, pageSize, onPageIndexChange, onPageSizeChange } =
    usePagingOptions();

  const tableRef = useRef<TabularInstance<DisplayVertex> | null>(null);
  const columns = useColumnDefinitions(vertexType);

  const query = useDataExplorerQuery(vertexType, pageSize, pageIndex);
  const displayVertices = useDisplayVerticesFromVertices(
    query.data?.vertices ?? []
  )
    .values()
    .toArray();

  return (
    <Workspace className={cn(styleWithTheme(defaultStyles), "data-explorer")}>
      <Workspace.TopBar logoVisible>
        <Workspace.TopBar.Title
          title="Data Explorer"
          subtitle={`Connection: ${config?.displayLabel || config?.id}`}
        />
        <Workspace.TopBar.Version>
          {__GRAPH_EXP_VERSION__}
        </Workspace.TopBar.Version>
        <Workspace.TopBar.AdditionalControls>
          <Link
            to="/graph-explorer"
            className={cn(buttonStyles({ variant: "filled" }))}
          >
            <ExplorerIcon />
            Open {APP_NAME}
          </Link>
        </Workspace.TopBar.AdditionalControls>
      </Workspace.TopBar>
      <Workspace.TopBar>
        <Workspace.TopBar.Title>
          <Link to="/connections" className={cn(buttonStyles())}>
            <ChevronLeftIcon />
            Back to all Data
          </Link>
        </Workspace.TopBar.Title>
        <Workspace.TopBar.AdditionalControls>
          <DisplayNameAndDescriptionOptions vertexType={vertexType} />
        </Workspace.TopBar.AdditionalControls>
      </Workspace.TopBar>
      <Workspace.Content>
        <Panel>
          <PanelHeader>
            <PanelTitle>
              <div className="container-header">
                <div>{displayTypeConfig.displayLabel}</div>
                {query.isFetching && <LoadingSpinner className="spinner" />}
              </div>
            </PanelTitle>
          </PanelHeader>
          <Tabular
            ref={tableRef}
            defaultColumn={DEFAULT_COLUMN}
            data={displayVertices}
            columns={columns}
            fullWidth={true}
            pageIndex={pageIndex}
            pageSize={pageSize}
            disablePagination={true}
            disableFilters={true}
            disableSorting={true}
          >
            <TabularEmptyBodyControls>
              {query.isError ? (
                <PanelError error={query.error} onRetry={query.refetch} />
              ) : null}
              {query.data?.vertices.length === 0 && (
                <PlaceholderControl>
                  {`No nodes found for "${displayTypeConfig.displayLabel}"`}
                </PlaceholderControl>
              )}
            </TabularEmptyBodyControls>
            <TabularFooterControls>
              <PaginationControl
                pageIndex={pageIndex}
                onPageIndexChange={onPageIndexChange}
                pageSize={pageSize}
                onPageSizeChange={onPageSizeChange}
                totalRows={vertexConfig?.total ?? pageSize * (pageIndex + 2)}
              />
            </TabularFooterControls>
          </Tabular>
        </Panel>
      </Workspace.Content>
    </Workspace>
  );
}