Function TableNode

frontend/src/react/components/SchemaDiagram/ER/TableNode.tsx:44–225

({ schema, table }: TableNodeProps)

 * glyphs and edit-on-click affordances when `editable` is on.
 */
export function TableNode({ schema, table }: TableNodeProps) {
  const ctx = useSchemaDiagramContext();
  const {
    dummy,
    editable,
    focusedTables,
    foreignKeys,
    idOfTable,
    rectOfTable,
    schemaStatus,
    tableStatus,
    columnStatus,
    panning,
    events,
  } = ctx;

  const tableColor = useMemo(() => {
    const index = (hashCode(table.name) & 0xfffffff) % COLOR_LIST.length;
    return COLOR_LIST[index];
  }, [table.name]);

  const isTableDropped = useMemo(
    () =>
      schemaStatus(schema) === "dropped" || tableStatus(table) === "dropped",
    [schema, table, schemaStatus, tableStatus]
  );

  const isTableCreated = useMemo(
    () =>
      schemaStatus(schema) === "created" || tableStatus(table) === "created",
    [schema, table, schemaStatus, tableStatus]
  );

  const isTableChanged = useMemo(
    () => tableStatus(table) === "changed",
    [table, tableStatus]
  );

  const tableStatusText = isTableCreated
    ? "Created"
    : isTableDropped
      ? "Dropped"
      : isTableChanged
        ? "Changed"
        : "";

  const tableClasses = useMemo(() => {
    if (focusedTables.size === 0) return "";
    if (focusedTables.has(table)) return "opacity-100";
    if (isFocusedForeignTable(table, focusedTables, foreignKeys)) {
      return "opacity-100";
    }
    return "opacity-20 hover:opacity-100";
  }, [table, focusedTables, foreignKeys]);

  const columnClasses = useCallback(
    (column: ColumnMetadata) => {
      const classes: string[] = [];