Display DataFrame

[minhbtrc]

I have a component that return DataFrame as output, but I struggle to make it to be display in Output modal. Do you guys have any ideas on this?

[dosubot[bot]]

To display a DataFrame in an Output modal when a component returns it as output, you can use the TableComponent within the OutputModal component. This setup handles different types of outputs, including data that can be displayed in a tabular format.

Here is the relevant part of the code that handles displaying the DataFrame:

import { Button } from "../../../../components/ui/button";
import BaseModal from "../../../../modals/baseModal";
import TableComponent from "../../components/tableComponent";
import { useEffect, useState } from "react";
import { useGetTransactionsQuery } from "@/controllers/API/queries/transactions";
import useFlowsManagerStore from "../../stores/flowsManagerStore";

export default function OutputModal({ open, setOpen, nodeId }): JSX.Element {
  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);

  const [columns, setColumns] = useState([]);
  const [rows, setRows] = useState([]);

  const { data, isLoading, refetch } = useGetTransactionsQuery({
    id: currentFlowId,
    mode: "union",
  });

  useEffect(() => {
    if (data) {
      const { columns, rows } = data;
      setColumns(columns.map((col) => ({ ...col, editable: true })));
      setRows(rows);
    }
    if (open) refetch();
  }, [data, open, isLoading]);

  return (
    <BaseModal open={open} setOpen={setOpen} size="medium-tall">
      <BaseModal.Header description="Inspect the output of the component below.">
        <div className="flex items-center">
          <span className="pr-2">Component Output</span>
        </div>
      </BaseModal.Header>
      <BaseModal.Content>
        <TableComponent
          key={"OutputData"}
          readOnlyEdit
          className="h-max-full h-full w-full"
          pagination={rows.length === 0 ? false : true}
          columnDefs={columns}
          autoSizeStrategy={{ type: "fitGridWidth" }}
          rowData={rows}
          headerHeight={rows.length === 0 ? 0 : undefined}
        ></TableComponent>
      </BaseModal.Content>
      <BaseModal.Footer>
        <div className="flex w-full justify-end pt-2">
          <Button className="flex gap-2 px-3" onClick={() => setOpen(false)}>
            Close
          </Button>
        </div>
      </BaseModal.Footer>
    </BaseModal>
  );
}

The TableComponent is used within the OutputModal to handle and display the output data. The modal is structured with a header, content area where the TableComponent is rendered, and a footer with a close button. This setup ensures that the DataFrame or any other output type is displayed correctly in the modal ^[1][2][3].

To continue talking to Dosu, mention @dosu.