Make NULL values visible (#7439)

* Make NULL value visible
* Make the representation of NULL value configurable
* use display-as-null css class for null-value styling

Author: yoshiokatsuneo

client/app/components/visualizations/visualizationComponents.jsx

@@ -59,6 +59,7 @@ function wrapComponentWithSettings(WrappedComponent) {
         "dateTimeFormat",
         "integerFormat",
         "floatFormat",
+        "nullValue",
         "booleanValues",
         "tableCellMaxJSONSize",
         "allowCustomJSVisualizations",

redash/handlers/authentication.py

@@ -255,6 +255,12 @@ def number_format_config():
     }
 
 
+def null_value_config():
+    return {
+        "nullValue": current_org.get_setting("null_value"),
+    }
+
+
 def client_config():
     if not current_user.is_api_user() and current_user.is_authenticated:
         client_config = {
@@ -289,6 +295,7 @@ def client_config():
     client_config.update({"basePath": base_href()})
     client_config.update(date_time_format_config())
     client_config.update(number_format_config())
+    client_config.update(null_value_config())
 
     return client_config
 

redash/settings/organization.py

@@ -27,6 +27,7 @@
 TIME_FORMAT = os.environ.get("REDASH_TIME_FORMAT", "HH:mm")
 INTEGER_FORMAT = os.environ.get("REDASH_INTEGER_FORMAT", "0,0")
 FLOAT_FORMAT = os.environ.get("REDASH_FLOAT_FORMAT", "0,0.00")
+NULL_VALUE = os.environ.get("REDASH_NULL_VALUE", "null")
 MULTI_BYTE_SEARCH_ENABLED = parse_boolean(os.environ.get("MULTI_BYTE_SEARCH_ENABLED", "false"))
 
 JWT_LOGIN_ENABLED = parse_boolean(os.environ.get("REDASH_JWT_LOGIN_ENABLED", "false"))
@@ -59,6 +60,7 @@
     "time_format": TIME_FORMAT,
     "integer_format": INTEGER_FORMAT,
     "float_format": FLOAT_FORMAT,
+    "null_value": NULL_VALUE,
     "multi_byte_search_enabled": MULTI_BYTE_SEARCH_ENABLED,
     "auth_jwt_login_enabled": JWT_LOGIN_ENABLED,
     "auth_jwt_auth_issuer": JWT_AUTH_ISSUER,

viz-lib/src/lib/value-format.tsx

@@ -5,16 +5,24 @@ import numeral from "numeral";
 import { isString, isArray, isUndefined, isFinite, isNil, toString } from "lodash";
 import { visualizationsSettings } from "@/visualizations/visualizationsSettings";
 
+
 numeral.options.scalePercentBy100 = false;
 
 // eslint-disable-next-line
 const urlPattern = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
 
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
+function NullValueComponent() {
+  return <span className="display-as-null">{visualizationsSettings.nullValue}</span>;
+}
+
 export function createTextFormatter(highlightLinks: any) {
   if (highlightLinks) {
     return (value: any) => {
+      if (value === null) {
+        return <NullValueComponent/>
+      }
       if (isString(value)) {
         const Link = visualizationsSettings.LinkComponent;
         value = value.replace(urlPattern, (unused, prefix, href) => {
@@ -29,7 +37,7 @@ export function createTextFormatter(highlightLinks: any) {
       return toString(value);
     };
   }
-  return (value: any) => toString(value);
+  return (value: any) => value === null ? <NullValueComponent/> : toString(value);
 }
 
 function toMoment(value: any) {
@@ -46,18 +54,24 @@ function toMoment(value: any) {
 export function createDateTimeFormatter(format: any) {
   if (isString(format) && format !== "") {
     return (value: any) => {
+      if (value === null) {
+        return <NullValueComponent/>;
+      }
       const wrapped = toMoment(value);
       return wrapped.isValid() ? wrapped.format(format) : toString(value);
     };
   }
-  return (value: any) => toString(value);
+  return (value: any) => value === null ? <NullValueComponent/> : toString(value);
 }
 
 export function createBooleanFormatter(values: any) {
   if (isArray(values)) {
     if (values.length >= 2) {
       // Both `true` and `false` specified
       return (value: any) => {
+        if (value === null) {
+          return <NullValueComponent/>;
+        }
         if (isNil(value)) {
           return "";
         }
@@ -69,19 +83,30 @@ export function createBooleanFormatter(values: any) {
     }
   }
   return (value: any) => {
+    if (value === null) {
+      return <NullValueComponent/>;
+    }
     if (isNil(value)) {
       return "";
     }
     return value ? "true" : "false";
   };
 }
 
-export function createNumberFormatter(format: any) {
+export function createNumberFormatter(format: any, canReturnHTMLElement: boolean = false) {
   if (isString(format) && format !== "") {
     const n = numeral(0); // cache `numeral` instance
-    return (value: any) => (value === null || value === "" ? "" : n.set(value).format(format));
+    return (value: any) => {
+        if (canReturnHTMLElement && value === null) {
+            return <NullValueComponent/>;
+        }
+        if (value === "" || value === null) {
+            return "";
+        }
+        return n.set(value).format(format);
+    }
   }
-  return (value: any) => toString(value);
+  return (value: any) => (canReturnHTMLElement && value === null) ? <NullValueComponent/> : toString(value);
 }
 
 export function formatSimpleTemplate(str: any, data: any) {

viz-lib/src/visualizations/table/Editor/__snapshots__/ColumnsSettings.test.tsx.snap

@@ -23,6 +23,7 @@ Object {
       "linkTitleTemplate": "{{ @ }}",
       "linkUrlTemplate": "{{ @ }}",
       "name": "a",
+      "nullValue": "null",
       "numberFormat": undefined,
       "order": 100000,
       "title": "a",
@@ -56,6 +57,7 @@ Object {
       "linkTitleTemplate": "{{ @ }}",
       "linkUrlTemplate": "{{ @ }}",
       "name": "a",
+      "nullValue": "null",
       "numberFormat": undefined,
       "order": 100000,
       "title": "a",
@@ -89,6 +91,7 @@ Object {
       "linkTitleTemplate": "{{ @ }}",
       "linkUrlTemplate": "{{ @ }}",
       "name": "a",
+      "nullValue": "null",
       "numberFormat": undefined,
       "order": 100000,
       "title": "test",
@@ -122,6 +125,7 @@ Object {
       "linkTitleTemplate": "{{ @ }}",
       "linkUrlTemplate": "{{ @ }}",
       "name": "a",
+      "nullValue": "null",
       "numberFormat": undefined,
       "order": 100000,
       "title": "a",
@@ -155,6 +159,7 @@ Object {
       "linkTitleTemplate": "{{ @ }}",
       "linkUrlTemplate": "{{ @ }}",
       "name": "a",
+      "nullValue": "null",
       "numberFormat": undefined,
       "order": 100000,
       "title": "a",

viz-lib/src/visualizations/table/columns/number.tsx

@@ -33,7 +33,7 @@ function Editor({ column, onChange }: Props) {
 }
 
 export default function initNumberColumn(column: any) {
-  const format = createNumberFormatter(column.numberFormat);
+  const format = createNumberFormatter(column.numberFormat, true);
 
   function prepareData(row: any) {
     return {

viz-lib/src/visualizations/table/getOptions.ts

@@ -73,6 +73,7 @@ function getDefaultFormatOptions(column: any) {
     dateTimeFormat: dateTimeFormat[column.type],
     // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
     numberFormat: numberFormat[column.type],
+    nullValue: visualizationsSettings.nullValue,
     booleanValues: visualizationsSettings.booleanValues || ["false", "true"],
     // `image` cell options
     imageUrlTemplate: "{{ @ }}",

viz-lib/src/visualizations/table/renderer.less

@@ -39,6 +39,11 @@
       white-space: nowrap;
     }
 
+    .display-as-null {
+      font-style: italic;
+      color: @text-muted;
+    }
+
     .table-visualization-spacer {
       padding-left: 0;
       padding-right: 0;

viz-lib/src/visualizations/visualizationsSettings.tsx

@@ -42,6 +42,7 @@ export const visualizationsSettings = {
   dateTimeFormat: "DD/MM/YYYY HH:mm",
   integerFormat: "0,0",
   floatFormat: "0,0.00",
+  nullValue: "null",
   booleanValues: ["false", "true"],
   tableCellMaxJSONSize: 50000,
   allowCustomJSVisualizations: false,