Function TableRow

app/src/components/nodeEntries/NodeEntriesTable/TableRow.tsx:48–102

({
  nodeEntry,
  isSelected,
  toggleSelected,
  expandable,
}: {
  nodeEntry: NodeEntryRow;
  isSelected: boolean;
  toggleSelected: () => void;
  expandable: boolean;
})

};

export const TableRow = ({
  nodeEntry,
  isSelected,
  toggleSelected,
  expandable,
}: {
  nodeEntry: NodeEntryRow;
  isSelected: boolean;
  toggleSelected: () => void;
  expandable: boolean;
}) => {
  const createdAt = dayjs(nodeEntry.creationTime).format("MMMM D h:mm A");
  const fullTime = dayjs(nodeEntry.creationTime).toString();

  const isClientInitialized = useIsClientInitialized();
  if (!isClientInitialized) return null;

  return (
    <>
      <Tr
        onClick={toggleSelected}
        key={nodeEntry.id}
        _hover={{ td: { bgColor: isSelected ? "gray.200" : "gray.50", cursor: "pointer" } }}
        bgColor={isSelected ? "gray.100" : undefined}
        transition={!expandable ? "background-color 1.2s" : undefined}
        sx={
          expandable
            ? {
                "> td": { borderBottom: "none" },
              }
            : undefined
        }
        fontSize="sm"
      >
        <Td>
          <Tooltip label={fullTime} placement="top-start">
            <Box whiteSpace="nowrap" minW="120px">
              {createdAt}
            </Box>
          </Tooltip>
        </Td>
        <Td isNumeric>
          {nodeEntry.inputTokens?.toLocaleString() ?? <Text color="gray.500">counting</Text>}
        </Td>
        <Td isNumeric>
          {nodeEntry.outputTokens?.toLocaleString() ?? <Text color="gray.500">counting</Text>}
        </Td>
        <Td isNumeric>
          <EntrySplit split={nodeEntry.split} />
        </Td>
      </Tr>
      {expandable && <ExpandableRow nodeEntry={nodeEntry} expanded={isSelected} />}
    </>
  );
};

const ExpandableRow = ({ nodeEntry, expanded }: { nodeEntry: NodeEntryRow; expanded: boolean }) => {
  const isRelabeled = nodeEntry.originalOutputHash !== nodeEntry.outputHash;