Adding specific CSS class to date's N/A in Apache Superset

[ampil]

Hello,

In Apache Superset, tables have different CSS classes for dates and numbers. For numbers, the class .dt-is-null is used, which makes it easier to modify null (N/A) values using the dashboard's CSS.

However, null values (N/A) in dates do not have a specific class. Is there a way to find or add a specific class to date's N/A values?

Thank you.

[ampil]

bump.

@dosu, any suggestions?

[dosubot[bot]]

In Apache Superset, the CSS class dt-is-null is indeed applied to table cells when the value is null, and this applies to date columns as well. You can use this class to style N/A values in date columns just like you do for numbers ^[1]. If you need to add a specific class for date N/A values, you can customize the TableChart component to include an additional class when the value is null.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[ampil]

Unfortunately, date columns are not treated as dates, their data type is empty (unknown to) Superset. See the screenshot below.

Maybe that's the reason of misbehaviour.

The data is loaded from Oracle SQL, Superset's database is SQLite.

Any suggestions how to handle this?

[ampil]

I have created a new table on PostgreSQL datasource (Superset's db is also on PostgreSQL now).
This table has a single column date1:

CREATE TABLE tmp.a1 (
	date1 date NULL
);

INSERT INTO tmp.a1 (date1) VALUES('2024-01-01');
INSERT INTO tmp.a1 (date1) VALUES(NULL);
INSERT INTO tmp.a1 (date1) VALUES('2024-12-12');

Then created a chart (plain table). The data type is correctly set as date:

Added this chart to a new dashboard.

Still, the class .dt-is-null is not applied on the null value:

It is dt-is-filter right-border-only css-unbob2 for the null value and the same for not null values.

[ampil]

@dosu, check the code related to the assignment of dt-is-null class in Superset's superset/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx (link)

Focus on how it works with the following datatypes: date. datetime. Focus on a special case when a value is null.

Propose assumptions why assigning dt-is-null class may not work for null values in date. datetime data type columns.
Propose code modifications on how to solve it - assign dt-is-null class null values in date. datetime data type columns

[dosubot[bot]]

To address the issue of the dt-is-null class not being applied to null values in date and datetime columns in Superset's TableChart.tsx, you should ensure that the logic for assigning CSS classes correctly identifies null values for these data types.

Here are some assumptions and potential modifications to the code:

1. Assumptions:

   • The data type detection might not be correctly identifying date and datetime columns, especially if the data source or Superset's internal handling does not explicitly set these types.
   • The logic for assigning the dt-is-null class might not be triggered for date and datetime columns due to how the data is processed or rendered.

2. Code Modifications:

   • Ensure that the logic for assigning the dt-is-null class explicitly checks for null values in date and datetime columns. You can modify the relevant part of the code as follows:

const cellProps = {
  'aria-labelledby': `header-${column.key}`,
  role: 'cell',
  title: typeof value === 'number' ? String(value) : undefined,
  onClick:
    emitCrossFilters && !valueRange && !isMetric
      ? () => {
          if (!getSelectedText()) {
            toggleFilter(key, value);
          }
        }
      : undefined,
  onContextMenu: (e: MouseEvent) => {
    if (handleContextMenu) {
      e.preventDefault();
      e.stopPropagation();
      handleContextMenu(
        row.original,
        { key, value, isMetric },
        e.nativeEvent.clientX,
        e.nativeEvent.clientY,
      );
    }
  },
  className: [
    className,
    value == null ? 'dt-is-null' : '',
    isActiveFilterValue(key, value) ? ' dt-is-active-filter' : '',
  ].join(' '),
  tabIndex: 0,
};

This code snippet includes a condition that checks if value == null and adds the dt-is-null class to the cell. This should ensure that the class is applied to null values in date and datetime columns ^[1].

If the issue persists, you may need to verify that the data type detection logic correctly identifies date and datetime columns and that the rendering logic processes these types appropriately.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}