set null, various fixes

packages/web/src/datagrid/DataGridContextMenu.js

@@ -1,7 +1,14 @@
 import React from 'react';
 import { DropDownMenuItem, DropDownMenuDivider } from '../modals/DropDownMenu';
 
-export default function DataGridContextMenu({ copy, revertRowChanges, deleteSelectedRows, insertNewRow, reload }) {
+export default function DataGridContextMenu({
+  copy,
+  revertRowChanges,
+  deleteSelectedRows,
+  insertNewRow,
+  setNull,
+  reload,
+}) {
   return (
     <>
       <DropDownMenuItem onClick={reload} keyText="F5">
@@ -20,6 +27,10 @@ export default function DataGridContextMenu({ copy, revertRowChanges, deleteSele
       <DropDownMenuItem onClick={insertNewRow} keyText="Insert">
         Insert new row
       </DropDownMenuItem>
+      <DropDownMenuDivider />
+      <DropDownMenuItem onClick={setNull} keyText="Ctrl+0">
+        Set NULL
+      </DropDownMenuItem>
     </>
   );
 }

packages/web/src/datagrid/DataGridCore.js

@@ -530,6 +530,7 @@ export default function DataGridCore(props) {
         deleteSelectedRows={deleteSelectedRows}
         insertNewRow={insertNewRow}
         reload={() => display.reload()}
+        setNull={setNull}
       />
     );
   };
@@ -654,6 +655,22 @@ export default function DataGridCore(props) {
     setChangeSet(chs);
   }
 
+  function setNull() {
+    let chs = changeSet;
+    selectedCells.filter(isRegularCell).forEach((cell) => {
+      chs = setChangeSetValue(
+        chs,
+        display.getChangeSetField(
+          loadedAndInsertedRows[cell[0]],
+          realColumnUniqueNames[cell[1]],
+          cell[0] >= loadedRows.length ? cell[0] - loadedRows.length : null
+        ),
+        null
+      );
+    });
+    setChangeSet(chs);
+  }
+
   function copyToClipboard() {
     const rowIndexes = _.uniq(selectedCells.map((x) => x[0])).sort();
     const lines = rowIndexes.map((rowIndex) => {
@@ -844,6 +861,11 @@ export default function DataGridCore(props) {
       // this.saveAndFocus();
     }
 
+    if (event.keyCode == keycodes.n0 && event.ctrlKey) {
+      event.preventDefault();
+      setNull();
+    }
+
     if (event.keyCode == keycodes.r && event.ctrlKey) {
       event.preventDefault();
       revertRowChanges();

packages/web/src/datagrid/DataGridRow.js

@@ -68,8 +68,7 @@ const TableBodyCell = styled.td`
   `}
 
   ${(props) =>
-    props.isFocusedColumn
-     &&
+    props.isFocusedColumn &&
     `
     background-color: lightgoldenrodyellow;
   `}
@@ -123,11 +122,31 @@ const AutoFillPoint = styled.div`
   cursor: crosshair;
 `;
 
+function makeBulletString(value) {
+  return _.pad('', value.length, '•');
+}
+
+function highlightSpecialCharacters(value) {
+  value = value.replace(/\n/g, '↲');
+  value = value.replace(/\r/g, '');
+  value = value.replace(/^(\s+)/, makeBulletString);
+  value = value.replace(/(\s+)$/, makeBulletString);
+  value = value.replace(/(\s\s+)/g, makeBulletString);
+  return value;
+}
+
+const dateTimeRegex = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d\d\d)?Z?/;
+
 function CellFormattedValue({ value }) {
   if (value == null) return <NullSpan>(NULL)</NullSpan>;
   if (_.isDate(value)) return moment(value).format('YYYY-MM-DD HH:mm:ss');
   if (value === true) return '1';
   if (value === false) return '0';
+  if (_.isNumber(value)) return value.toLocaleString();
+  if (_.isString(value)) {
+    if (dateTimeRegex.test(value)) return moment(value).format('YYYY-MM-DD HH:mm:ss');
+    return highlightSpecialCharacters(value);
+  }
   return value;
 }
 

packages/web/src/widgets/Splitter.js

@@ -29,14 +29,18 @@ export const VerticalSplitHandle = styled.div`
   background-color: #ccc;
   height: ${theme.splitter.thickness}px;
   cursor: row-resize;
-  z-index: 1;
+  &:hover {
+    background-color: #AAA;
+  }
 `;
 
 export const HorizontalSplitHandle = styled.div`
   background-color: #ccc;
   width: ${theme.splitter.thickness}px;
   cursor: col-resize;
-  z-index: 1;
+  &:hover {
+    background-color: #AAA;
+  }
 `;
 
 const ChildContainer1 = styled.div`
@@ -45,6 +49,7 @@ const ChildContainer1 = styled.div`
   //   flex-grow: 1;
   display: flex;
   position: relative;
+  overflow: hidden;
 `;
 
 const ChildContainer2 = styled.div`
@@ -54,6 +59,7 @@ const ChildContainer2 = styled.div`
   //   flex-grow: 1;
   display: flex;
   position: relative;
+  overflow: hidden;
 `;
 
 export function useSplitterDrag(axes, onResize) {

packages/web/src/widgets/ToolbarButton.js

@@ -38,6 +38,7 @@ const StyledIconSpan = styled.span`
 const ButtonDivInner = styled.div`
   position: relative;
   top: ${(props) => props.patchY}px;
+  white-space: nowrap;
 `;
 
 export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined, patchY = 2 }) {