feat: toggle empty/null rendering (#1778)

- Adds #1646 
  - Add a new state in Redux for if empty and null should be rendered
  - Add a check in `IrisGridTableModelTemplate` to check for if the
setting is enabled

Author: wusteven815

packages/code-studio/src/settings/FormattingSectionContent.tsx

@@ -26,6 +26,8 @@ import {
   getShowTimeZone,
   getShowTSeparator,
   getTruncateNumbersWithPound,
+  getShowEmptyStrings,
+  getShowNullStrings,
   updateSettings as updateSettingsAction,
   RootState,
   WorkspaceSettings,
@@ -52,6 +54,8 @@ interface FormattingSectionContentProps {
   showTSeparator: boolean;
   timeZone: string;
   truncateNumbersWithPound: boolean;
+  showEmptyStrings: boolean;
+  showNullStrings: boolean;
   updateSettings: (settings: Partial<WorkspaceSettings>) => void;
   defaultDecimalFormatOptions: FormatOption;
   defaultIntegerFormatOptions: FormatOption;
@@ -66,6 +70,8 @@ interface FormattingSectionContentState {
   defaultDecimalFormatOptions: FormatOption;
   defaultIntegerFormatOptions: FormatOption;
   truncateNumbersWithPound: boolean;
+  showEmptyStrings: boolean;
+  showNullStrings: boolean;
   timestampAtMenuOpen: Date;
 }
 
@@ -103,6 +109,10 @@ export class FormattingSectionContent extends PureComponent<
     this.handleResetTimeZone = this.handleResetTimeZone.bind(this);
     this.handleTruncateNumbersWithPoundChange =
       this.handleTruncateNumbersWithPoundChange.bind(this);
+    this.handleShowEmptyStringsChange =
+      this.handleShowEmptyStringsChange.bind(this);
+    this.handleShowNullStringsChange =
+      this.handleShowNullStringsChange.bind(this);
 
     const {
       defaultDateTimeFormat,
@@ -112,6 +122,8 @@ export class FormattingSectionContent extends PureComponent<
       showTSeparator,
       timeZone,
       truncateNumbersWithPound,
+      showEmptyStrings,
+      showNullStrings,
     } = props;
 
     this.containerRef = React.createRef();
@@ -125,6 +137,8 @@ export class FormattingSectionContent extends PureComponent<
       defaultDecimalFormatOptions,
       defaultIntegerFormatOptions,
       truncateNumbersWithPound,
+      showEmptyStrings,
+      showNullStrings,
       timestampAtMenuOpen: new Date(),
     };
   }
@@ -298,6 +312,24 @@ export class FormattingSectionContent extends PureComponent<
     this.queueUpdate(update);
   }
 
+  handleShowEmptyStringsChange(): void {
+    const { showEmptyStrings } = this.state;
+    const update = {
+      showEmptyStrings: !showEmptyStrings,
+    };
+    this.setState(update);
+    this.queueUpdate(update);
+  }
+
+  handleShowNullStringsChange(): void {
+    const { showNullStrings } = this.state;
+    const update = {
+      showNullStrings: !showNullStrings,
+    };
+    this.setState(update);
+    this.queueUpdate(update);
+  }
+
   commitChanges(): void {
     const { updateSettings } = this.props;
     const updates = this.pendingUpdates.reduce(
@@ -322,6 +354,8 @@ export class FormattingSectionContent extends PureComponent<
       showTimeZone,
       showTSeparator,
       truncateNumbersWithPound,
+      showEmptyStrings,
+      showNullStrings,
     } = this.state;
 
     const {
@@ -527,7 +561,7 @@ export class FormattingSectionContent extends PureComponent<
               />
             </div>
           </div>
-          <div className="form-row mb-3">
+          <div className="form-row mb-2">
             <div className="offset-3 col-9">
               <Checkbox
                 checked={truncateNumbersWithPound ?? null}
@@ -537,6 +571,31 @@ export class FormattingSectionContent extends PureComponent<
               </Checkbox>
             </div>
           </div>
+
+          <div className="form-row mb-3">
+            <label
+              className="col-form-label col-3"
+              htmlFor="default-integer-format-input"
+            >
+              String
+            </label>
+            <div className="col pr-0 pt-2">
+              <Checkbox
+                checked={showEmptyStrings ?? null}
+                onChange={this.handleShowEmptyStringsChange}
+              >
+                Show empty strings as{' '}
+                <span className="font-italic text-muted">empty</span>
+              </Checkbox>
+              <Checkbox
+                checked={showNullStrings ?? null}
+                onChange={this.handleShowNullStringsChange}
+              >
+                Show null strings as{' '}
+                <span className="font-italic text-muted">null</span>
+              </Checkbox>
+            </div>
+          </div>
         </div>
       </div>
     );
@@ -553,6 +612,8 @@ const mapStateToProps = (
   showTimeZone: getShowTimeZone(state),
   showTSeparator: getShowTSeparator(state),
   truncateNumbersWithPound: getTruncateNumbersWithPound(state),
+  showEmptyStrings: getShowEmptyStrings(state),
+  showNullStrings: getShowNullStrings(state),
   timeZone: getTimeZone(state),
   defaults: getDefaultSettings(state),
 });

packages/code-studio/src/storage/LocalWorkspaceStorage.ts

@@ -54,6 +54,8 @@ export class LocalWorkspaceStorage implements WorkspaceStorage {
         defaultFormatString: IntegerColumnFormatter.DEFAULT_FORMAT_STRING,
       },
       truncateNumbersWithPound: false,
+      showEmptyStrings: true,
+      showNullStrings: true,
       defaultNotebookSettings: {
         isMinimapEnabled: false,
       },
@@ -90,6 +92,14 @@ export class LocalWorkspaceStorage implements WorkspaceStorage {
         serverConfigValues,
         'truncateNumbersWithPound'
       ),
+      showEmptyStrings: LocalWorkspaceStorage.getBooleanServerConfig(
+        serverConfigValues,
+        'showEmptyStrings'
+      ),
+      showNullStrings: LocalWorkspaceStorage.getBooleanServerConfig(
+        serverConfigValues,
+        'showNullStrings'
+      ),
       defaultNotebookSettings:
         serverConfigValues?.get('isMinimapEnabled') !== undefined
           ? {

packages/iris-grid/src/IrisGrid.tsx

@@ -514,6 +514,8 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       showTimeZone: false,
       showTSeparator: true,
       truncateNumbersWithPound: false,
+      showEmptyStrings: true,
+      showNullStrings: true,
       formatter: EMPTY_ARRAY,
       decimalFormatOptions: PropTypes.shape({
         defaultFormatString: PropTypes.string,
@@ -620,6 +622,8 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     this.decimalFormatOptions = {};
     this.integerFormatOptions = {};
     this.truncateNumbersWithPound = false;
+    this.showEmptyStrings = true;
+    this.showNullStrings = true;
 
     // When the loading scrim started/when it should extend to the end of the screen.
     this.renderer = new IrisGridRenderer();
@@ -997,6 +1001,10 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
   truncateNumbersWithPound: boolean;
 
+  showEmptyStrings: boolean;
+
+  showNullStrings: boolean;
+
   // When the loading scrim started/when it should extend to the end of the screen.
   loadingScrimStartTime?: number;
 
@@ -1793,6 +1801,9 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     const truncateNumbersWithPound =
       settings?.truncateNumbersWithPound ?? false;
 
+    const showEmptyStrings = settings?.showEmptyStrings ?? true;
+    const showNullStrings = settings?.showNullStrings ?? true;
+
     const isColumnFormatChanged = !deepEqual(
       this.globalColumnFormats,
       globalColumnFormats
@@ -1811,18 +1822,26 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     );
     const isTruncateNumbersChanged =
       this.truncateNumbersWithPound !== truncateNumbersWithPound;
+    const isShowEmptyStringsChanged =
+      this.showEmptyStrings !== showEmptyStrings;
+    const isShowNullStringsChanged = this.showNullStrings !== showNullStrings;
+
     if (
       isColumnFormatChanged ||
       isDateFormattingChanged ||
       isDecimalFormattingChanged ||
       isIntegerFormattingChanged ||
-      isTruncateNumbersChanged
+      isTruncateNumbersChanged ||
+      isShowEmptyStringsChanged ||
+      isShowNullStringsChanged
     ) {
       this.globalColumnFormats = globalColumnFormats;
       this.dateTimeFormatterOptions = dateTimeFormatterOptions;
       this.decimalFormatOptions = defaultDecimalFormatOptions;
       this.integerFormatOptions = defaultIntegerFormatOptions;
       this.truncateNumbersWithPound = truncateNumbersWithPound;
+      this.showEmptyStrings = showEmptyStrings;
+      this.showNullStrings = showNullStrings;
       this.updateFormatter({}, forceUpdate);
 
       if (isDateFormattingChanged && forceUpdate) {
@@ -1889,7 +1908,9 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       this.dateTimeFormatterOptions,
       this.decimalFormatOptions,
       this.integerFormatOptions,
-      this.truncateNumbersWithPound
+      this.truncateNumbersWithPound,
+      this.showEmptyStrings,
+      this.showNullStrings
     );
 
     log.debug('updateFormatter', this.globalColumnFormats, mergedColumnFormats);

packages/iris-grid/src/IrisGridTableModelTemplate.ts

@@ -547,11 +547,11 @@ class IrisGridTableModelTemplate<
 
     if (TableUtils.isTextType(this.columns[x]?.type)) {
       if (text === null) {
-        return 'null';
+        return this.formatter.showNullStrings ? 'null' : '';
       }
 
       if (text === '') {
-        return 'empty';
+        return this.formatter.showEmptyStrings ? 'empty' : '';
       }
     }
 

packages/jsapi-utils/src/Formatter.ts

@@ -83,7 +83,9 @@ export class Formatter {
     integerFormatOptions?: ConstructorParameters<
       typeof IntegerColumnFormatter
     >[1],
-    truncateNumbersWithPound = false
+    truncateNumbersWithPound = false,
+    showEmptyStrings = true,
+    showNullStrings = true
   ) {
     // Formatting order:
     // - columnFormatMap[type][name]
@@ -114,6 +116,9 @@ export class Formatter {
     // Formats indexed by data type and column name
     this.columnFormatMap = Formatter.makeColumnFormatMap(columnFormattingRules);
     this.truncateNumbersWithPound = truncateNumbersWithPound;
+
+    this.showEmptyStrings = showEmptyStrings;
+    this.showNullStrings = showNullStrings;
   }
 
   defaultColumnFormatter: TableColumnFormatter;
@@ -124,6 +129,10 @@ export class Formatter {
 
   truncateNumbersWithPound: boolean;
 
+  showEmptyStrings: boolean;
+
+  showNullStrings: boolean;
+
   /**
    * Gets columnFormatMap indexed by name for a given column type, creates new Map entry if necessary
    * @param columnType column type

packages/jsapi-utils/src/Settings.ts

@@ -19,6 +19,8 @@ export interface NumberFormatSettings {
     defaultFormatString?: string;
   };
   truncateNumbersWithPound?: boolean;
+  showEmptyStrings?: boolean;
+  showNullStrings?: boolean;
 }
 
 export interface Settings

packages/redux/src/selectors.ts

@@ -118,6 +118,14 @@ export const getTruncateNumbersWithPound = <
 ): Settings<State>['truncateNumbersWithPound'] =>
   getSettings(store).truncateNumbersWithPound;
 
+export const getShowEmptyStrings = <State extends RootState = RootState>(
+  store: State
+): Settings<State>['showEmptyStrings'] => getSettings(store).showEmptyStrings;
+
+export const getShowNullStrings = <State extends RootState = RootState>(
+  store: State
+): Settings<State>['showNullStrings'] => getSettings(store).showNullStrings;
+
 export const getDisableMoveConfirmation = <State extends RootState>(
   store: State
 ): Settings<State>['disableMoveConfirmation'] =>

packages/redux/src/store.ts

@@ -47,6 +47,8 @@ export interface WorkspaceSettings {
   showTimeZone: boolean;
   showTSeparator: boolean;
   truncateNumbersWithPound: boolean;
+  showEmptyStrings: boolean;
+  showNullStrings: boolean;
   disableMoveConfirmation: boolean;
   shortcutOverrides?: {
     windows?: { [id: string]: ValidKeyState };