@finos/legend-application-repl 0.0.31 → 0.0.32

package/src/components/dataCube/editor/DataCubeEditorColumnPropertiesPanel.tsx

@@ -18,6 +18,7 @@ import { cn, DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { useREPLStore } from '../../REPLStoreProvider.js';
 import {
+  Advanced_Badge,
   DataCubeEditorCheckbox,
   DataCubeEditorColorPickerButton,
   DataCubeEditorDropdownMenu,
@@ -31,28 +32,29 @@ import {
 import {
   DataCubeAggregateFunction,
   DataCubeColumnDataType,
+  DataCubeColumnKind,
   DataCubeColumnPinPlacement,
   DataCubeFont,
-  DataCubeFontFormatUnderlinedVariant,
+  DataCubeFontCase,
+  DataCubeFontFormatUnderlineVariant,
   DataCubeFontTextAlignment,
   DataCubeNumberScale,
-  DEFAULT_BACKGROUND_COLOR,
   DEFAULT_COLUMN_MAX_WIDTH,
   DEFAULT_COLUMN_MIN_WIDTH,
   DEFAULT_COLUMN_WIDTH,
-  DEFAULT_ERROR_FOREGROUND_COLOR,
-  DEFAULT_FOREGROUND_COLOR,
-  DEFAULT_NEGATIVE_FOREGROUND_COLOR,
-  DEFAULT_ZERO_FOREGROUND_COLOR,
+  DEFAULT_URL_LABEL_QUERY_PARAM,
 } from '../../../stores/dataCube/core/DataCubeQueryEngine.js';
 
 export const DataCubeEditorColumnPropertiesPanel = observer(() => {
   const replStore = useREPLStore();
   const dataCube = replStore.dataCube;
-  const panel = dataCube.editor.columnPropertiesPanel;
+  const panel = dataCube.editor.columnProperties;
+  const gridConfiguration = dataCube.editor.generalProperties.configuration;
   const selectedColumn = panel.selectedColumn;
   const [openColumnsDropdown, closeColumnsDropdown, columnsDropdownProps] =
     useDropdownMenu();
+  const [openKindDropdown, closeKindDropdown, kindDropdownProps] =
+    useDropdownMenu();
   const [
     openAggregationTypeDropdown,
     closeAggregationTypeDropdown,
@@ -74,25 +76,39 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
     openFontSizeDropdownProps,
   ] = useDropdownMenu();
   const [
-    openFontFormatUnderlinedVariantDropdown,
-    closeFontFormatUnderlinedVariantDropdown,
-    fontFormatUnderlinedVariantDropdownProps,
+    openFontFormatUnderlineVariantDropdown,
+    closeFontFormatUnderlineVariantDropdown,
+    fontFormatUnderlineVariantDropdownProps,
   ] = useDropdownMenu();
   const [
     openColumnPinDropdown,
     closeColumnPinDropdown,
     columnPinDropdownProps,
   ] = useDropdownMenu();
+  const [openFontCaseDropdown, closeFontCaseDropdown, fontCaseDropdownProps] =
+    useDropdownMenu();
 
   return (
     <div className="h-full w-full select-none p-2">
-      <div className="flex h-6">
-        <div className="relative flex h-6 items-center text-xl font-medium">
-          <DataCubeIcon.TableColumn />
-          <DataCubeIcon.TableColumnOptions__Settings className="absolute bottom-1 right-0 bg-white text-xs" />
+      <div className="flex h-6 justify-between">
+        <div className="flex h-full">
+          <div className="relative flex h-6 items-center text-xl font-medium">
+            <DataCubeIcon.TableColumn />
+            <DataCubeIcon.TableColumnOptions__Settings className="absolute bottom-1 right-0 bg-white text-xs" />
+          </div>
+          <div className="ml-1 flex h-6 items-center text-xl font-medium">
+            Column Properties
+          </div>
         </div>
-        <div className="ml-1 flex h-6 items-center text-xl font-medium">
-          Column Properties
+        <div className="flex h-full items-center pr-2">
+          <DataCubeEditorCheckbox
+            label="Show advanced settings"
+            checked={panel.showAdvancedSettings}
+            onChange={() =>
+              panel.setShowAdvancedSettings(!panel.showAdvancedSettings)
+            }
+          />
+          <Advanced_Badge />
         </div>
       </div>
       <div className="flex h-[calc(100%_-_24px)] w-full">
@@ -105,7 +121,16 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
               className="w-80"
               onClick={openColumnsDropdown}
             >
-              {selectedColumn?.name ?? '(None)'}
+              <div className="flex h-full w-full items-center">
+                <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
+                  {selectedColumn?.name ?? '(None)'}
+                </div>
+                {selectedColumn && (
+                  <div className="ml-1.5 mr-0.5 flex h-3.5 w-12 flex-shrink-0 items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-xs font-medium uppercase text-neutral-600">
+                    {selectedColumn.dataType}
+                  </div>
+                )}
+              </div>
             </DataCubeEditorDropdownMenuTrigger>
             <DataCubeEditorDropdownMenu
               className="w-80"
@@ -119,23 +144,50 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                     closeColumnsDropdown();
                   }}
                 >
-                  {column.name}
+                  <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
+                    {column.name}
+                  </div>
+                  <div className="ml-1.5 mr-0.5 flex h-3.5 w-12 flex-shrink-0 items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-xs font-medium uppercase text-neutral-600">
+                    {column.dataType}
+                  </div>
                 </DataCubeEditorDropdownMenuItem>
               ))}
             </DataCubeEditorDropdownMenu>
-            {selectedColumn && (
-              // TODO: if this is an extended column, show the info and link it
-              // e.g. `Extended Column (Leaf)`, `Extended Column (Group)`
-              // with arrow button to go to the extended column editor
+            {panel.showAdvancedSettings && selectedColumn && (
               <>
-                <div className="ml-2 h-[1px] w-4 bg-neutral-400" />
-                <div className="ml-2 flex h-4 items-center justify-center rounded-sm border border-neutral-500 px-2 font-mono text-sm font-medium text-neutral-500">
-                  <div className="mr-1.5 flex h-full items-center uppercase">
-                    {selectedColumn.dataType}
+                <div className="mx-2 h-[1px] w-4 flex-shrink-0 bg-neutral-400" />
+                <div className="flex h-6 items-center">
+                  <div className="flex h-full flex-shrink-0 items-center text-sm">
+                    Kind:
                   </div>
-                  <div className="flex h-full items-center border-l border-l-neutral-500 pl-1.5 uppercase">
+                  <DataCubeEditorDropdownMenuTrigger
+                    className="ml-1 w-20"
+                    onClick={openKindDropdown}
+                    disabled={true}
+                  >
                     {selectedColumn.kind}
-                  </div>
+                  </DataCubeEditorDropdownMenuTrigger>
+                  <DataCubeEditorDropdownMenu
+                    className="w-20"
+                    {...kindDropdownProps}
+                  >
+                    {[
+                      DataCubeColumnKind.DIMENSION,
+                      DataCubeColumnKind.MEASURE,
+                    ].map((kind) => (
+                      <DataCubeEditorDropdownMenuItem
+                        key={kind}
+                        onClick={() => {
+                          selectedColumn.setKind(kind);
+                          closeKindDropdown();
+                        }}
+                      >
+                        {kind}
+                      </DataCubeEditorDropdownMenuItem>
+                    ))}
+                  </DataCubeEditorDropdownMenu>
+                  <Advanced_Badge />
+                  <WIP_Badge />
                 </div>
               </>
             )}
@@ -145,7 +197,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
 
           {selectedColumn && (
             <>
-              <div className="mt-3 flex h-6 w-full items-center">
+              <div className="mt-2 flex h-5 w-full items-center">
                 <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
                   Display Name:
                 </div>
@@ -163,7 +215,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
 
               {selectedColumn.dataType === DataCubeColumnDataType.NUMBER && (
                 <>
-                  <div className="mt-2 flex h-6 w-full items-center">
+                  <div className="mt-2 flex h-5 w-full items-center">
                     <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
                       Number Format:
                     </div>
@@ -201,7 +253,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                     />
                   </div>
 
-                  <div className="mt-2 flex h-6 w-full items-center">
+                  <div className="mt-2 flex h-5 w-full items-center">
                     <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
                       Number Scale:
                     </div>
@@ -222,6 +274,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                         DataCubeNumberScale.THOUSANDS,
                         DataCubeNumberScale.MILLIONS,
                         DataCubeNumberScale.BILLIONS,
+                        DataCubeNumberScale.TRILLIONS,
                         DataCubeNumberScale.AUTO,
                       ].map((scale) => (
                         <DataCubeEditorDropdownMenuItem
@@ -237,7 +290,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                     </DataCubeEditorDropdownMenu>
                   </div>
 
-                  <div className="mt-2 flex h-6 w-full items-center">
+                  <div className="mt-2 flex h-5 w-full items-center">
                     <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
                       Aggregation Type:
                     </div>
@@ -271,20 +324,9 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                       ))}
                     </DataCubeEditorDropdownMenu>
                     <WIP_Badge />
-                    <div className="ml-2 h-[1px] w-4 bg-neutral-400" />
-                    <div className="mx-2 flex h-full flex-shrink-0 items-center text-sm">
-                      Weight Column:
-                    </div>
-                    <DataCubeEditorDropdownMenuTrigger
-                      className="w-32"
-                      disabled={true}
-                    >
-                      {selectedColumn.weightColumn ?? '(None)'}
-                    </DataCubeEditorDropdownMenuTrigger>
-                    <WIP_Badge />
                   </div>
 
-                  <div className="mt-2 flex h-4 w-full items-center">
+                  <div className="mt-2 flex h-5 w-full items-center">
                     <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
                       Exclude from HPivot?
                     </div>
@@ -304,7 +346,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
 
               {selectedColumn.dataType === DataCubeColumnDataType.TEXT && (
                 <>
-                  <div className="mt-2 flex h-4 w-full items-center">
+                  <div className="mt-2 flex h-5 w-full items-center">
                     <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
                       Dislay as Link?
                     </div>
@@ -316,13 +358,194 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                         )
                       }
                     />
+                    <div className="ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" />
+                    <div className="ml-2 mr-1.5 flex h-full flex-shrink-0 items-center text-sm">
+                      Use Parameter in Link as Label:
+                    </div>
+                    <DataCubeEditorTextInput
+                      className="w-48"
+                      placeholder={DEFAULT_URL_LABEL_QUERY_PARAM}
+                      value={selectedColumn.linkLabelParameter ?? ''}
+                      onChange={(event) => {
+                        const value = event.target.value.trim();
+                        selectedColumn.setLinkLabelParameter(
+                          value !== '' ? value : undefined,
+                        );
+                      }}
+                    />
                   </div>
                 </>
               )}
 
+              <div className="mt-2 flex h-5 w-full items-center">
+                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                  Visibility:
+                </div>
+                <DataCubeEditorCheckbox
+                  label="Blur content"
+                  checked={selectedColumn.blur}
+                  onChange={() => selectedColumn.setBlur(!selectedColumn.blur)}
+                  disabled={selectedColumn.hideFromView}
+                />
+                <DataCubeEditorCheckbox
+                  className="ml-3"
+                  label="Hide from view"
+                  checked={selectedColumn.hideFromView}
+                  onChange={() =>
+                    selectedColumn.setHideFromView(!selectedColumn.hideFromView)
+                  }
+                  disabled={true}
+                />
+                <WIP_Badge />
+              </div>
+
+              <div className="mt-2 flex h-5 w-full items-center">
+                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                  Pin:
+                </div>
+                <DataCubeEditorDropdownMenuTrigger
+                  className="w-14"
+                  onClick={openColumnPinDropdown}
+                >
+                  {selectedColumn.pinned ?? '(None)'}
+                </DataCubeEditorDropdownMenuTrigger>
+                <DataCubeEditorDropdownMenu
+                  className="w-14"
+                  {...columnPinDropdownProps}
+                >
+                  {[
+                    undefined,
+                    DataCubeColumnPinPlacement.LEFT,
+                    DataCubeColumnPinPlacement.RIGHT,
+                  ].map((placement) => (
+                    <DataCubeEditorDropdownMenuItem
+                      key={placement ?? ''}
+                      onClick={() => {
+                        selectedColumn.setPinned(placement);
+                        closeColumnPinDropdown();
+                      }}
+                    >
+                      {placement ?? '(None)'}
+                    </DataCubeEditorDropdownMenuItem>
+                  ))}
+                </DataCubeEditorDropdownMenu>
+              </div>
+
+              <div className="mt-1.5 flex h-6 w-full items-center">
+                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                  Width:
+                </div>
+                <DataCubeEditorCheckbox
+                  label="(Any)"
+                  checked={
+                    selectedColumn.fixedWidth === undefined &&
+                    selectedColumn.minWidth === undefined &&
+                    selectedColumn.maxWidth === undefined
+                  }
+                  onChange={() => {
+                    if (
+                      selectedColumn.fixedWidth === undefined &&
+                      selectedColumn.minWidth === undefined &&
+                      selectedColumn.maxWidth === undefined
+                    ) {
+                      selectedColumn.setFixedWidth(DEFAULT_COLUMN_WIDTH);
+                      selectedColumn.setMinWidth(undefined);
+                      selectedColumn.setMaxWidth(undefined);
+                    } else {
+                      selectedColumn.setFixedWidth(undefined);
+                      selectedColumn.setMinWidth(undefined);
+                      selectedColumn.setMaxWidth(undefined);
+                    }
+                  }}
+                />
+
+                <DataCubeEditorCheckbox
+                  className="ml-3"
+                  label="Fixed"
+                  checked={selectedColumn.fixedWidth !== undefined}
+                  onChange={() => {
+                    selectedColumn.setFixedWidth(
+                      selectedColumn.fixedWidth !== undefined
+                        ? undefined
+                        : DEFAULT_COLUMN_WIDTH,
+                    );
+                    selectedColumn.setMinWidth(undefined);
+                    selectedColumn.setMaxWidth(undefined);
+                  }}
+                />
+                <div className="ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" />
+                <DataCubeEditorNumberInput
+                  className="ml-1 w-16 text-sm"
+                  min={0}
+                  step={50}
+                  defaultValue={undefined}
+                  isValid={(value) => value !== undefined && value > 0}
+                  value={selectedColumn.fixedWidth}
+                  setValue={(value) => {
+                    selectedColumn.setFixedWidth(value);
+                  }}
+                  disabled={
+                    selectedColumn.minWidth !== undefined ||
+                    selectedColumn.maxWidth !== undefined
+                  }
+                />
+
+                <DataCubeEditorCheckbox
+                  className="ml-3"
+                  label="In range"
+                  checked={
+                    selectedColumn.minWidth !== undefined ||
+                    selectedColumn.maxWidth !== undefined
+                  }
+                  onChange={() => {
+                    if (
+                      selectedColumn.minWidth === undefined &&
+                      selectedColumn.maxWidth === undefined
+                    ) {
+                      selectedColumn.setMinWidth(DEFAULT_COLUMN_MIN_WIDTH);
+                      selectedColumn.setMaxWidth(DEFAULT_COLUMN_MAX_WIDTH);
+                      selectedColumn.setFixedWidth(undefined);
+                    } else {
+                      selectedColumn.setMinWidth(undefined);
+                      selectedColumn.setMaxWidth(undefined);
+                      selectedColumn.setFixedWidth(undefined);
+                    }
+                  }}
+                />
+                <div className="ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" />
+                <DataCubeEditorNumberInput
+                  className="ml-1 w-16 text-sm"
+                  min={0}
+                  step={50}
+                  defaultValue={undefined}
+                  isValid={(value) => value !== undefined && value > 0}
+                  value={selectedColumn.minWidth}
+                  setValue={(value) => {
+                    selectedColumn.setMinWidth(value);
+                  }}
+                  disabled={selectedColumn.fixedWidth !== undefined}
+                />
+                <div className="ml-1 h-[1px] w-1 flex-shrink-0 bg-neutral-400" />
+                <DataCubeEditorNumberInput
+                  className="ml-1 w-16 text-sm"
+                  min={selectedColumn.minWidth ?? 0}
+                  step={50}
+                  defaultValue={undefined}
+                  isValid={(value) =>
+                    value !== undefined &&
+                    value >= (selectedColumn.minWidth ?? 0)
+                  }
+                  value={selectedColumn.maxWidth}
+                  setValue={(value) => {
+                    selectedColumn.setMaxWidth(value);
+                  }}
+                  disabled={selectedColumn.fixedWidth !== undefined}
+                />
+              </div>
+
               <div className="my-2 h-[1px] w-full bg-neutral-200" />
 
-              <div className="mt-3 flex h-6 w-full items-center">
+              <div className="mt-2 flex h-5 w-full items-center">
                 <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
                   Font:
                 </div>
@@ -330,7 +553,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                   className="w-28"
                   onClick={openFontFamilyDropdown}
                 >
-                  {selectedColumn.fontFamily}
+                  {selectedColumn.fontFamily ?? gridConfiguration.fontFamily}
                 </DataCubeEditorDropdownMenuTrigger>
                 <DataCubeEditorDropdownMenu
                   className="w-28"
@@ -389,7 +612,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                   className="ml-1 w-10"
                   onClick={openFontSizeDropdown}
                 >
-                  {selectedColumn.fontSize}
+                  {selectedColumn.fontSize ?? gridConfiguration.fontSize}
                 </DataCubeEditorDropdownMenuTrigger>
                 <DataCubeEditorDropdownMenu
                   className="w-10"
@@ -417,11 +640,16 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                     className={cn(
                       'relative flex h-5 w-5 items-center justify-center rounded-bl-sm rounded-tl-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
                       {
-                        'bg-neutral-200': selectedColumn.fontBold,
+                        'bg-neutral-200':
+                          selectedColumn.fontBold ?? gridConfiguration.fontBold,
                       },
                     )}
                     onClick={() =>
-                      selectedColumn.setFontBold(!selectedColumn.fontBold)
+                      selectedColumn.setFontBold(
+                        !(
+                          selectedColumn.fontBold ?? gridConfiguration.fontBold
+                        ),
+                      )
                     }
                   >
                     <DataCubeIcon.FontBold />
@@ -431,57 +659,79 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                     className={cn(
                       'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
                       {
-                        'bg-neutral-200': selectedColumn.fontItalic,
+                        'bg-neutral-200':
+                          selectedColumn.fontItalic ??
+                          gridConfiguration.fontItalic,
                       },
                     )}
                     onClick={() =>
-                      selectedColumn.setFontItalic(!selectedColumn.fontItalic)
+                      selectedColumn.setFontItalic(
+                        !(
+                          selectedColumn.fontItalic ??
+                          gridConfiguration.fontItalic
+                        ),
+                      )
                     }
                   >
                     <DataCubeIcon.FontItalic />
                   </button>
                   <button
-                    title={`Underline${selectedColumn.fontUnderlined ? ` (${selectedColumn.fontUnderlined})` : ''}`}
+                    title={`Underline${selectedColumn.fontUnderline ?? gridConfiguration.fontUnderline ? ` (${selectedColumn.fontUnderline ?? gridConfiguration.fontUnderline})` : ''}`}
                     className={cn(
                       'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-r-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
                       {
                         'bg-neutral-200':
-                          selectedColumn.fontUnderlined !== undefined,
+                          (selectedColumn.fontUnderline ??
+                            gridConfiguration.fontUnderline) !== undefined,
                       },
                     )}
-                    onClick={() =>
-                      selectedColumn.setFontUnderlined(
-                        selectedColumn.fontUnderlined === undefined
-                          ? DataCubeFontFormatUnderlinedVariant.SOLID
-                          : undefined,
-                      )
-                    }
+                    onClick={() => {
+                      if (
+                        (selectedColumn.fontUnderline ??
+                          gridConfiguration.fontUnderline) === undefined
+                      ) {
+                        selectedColumn.setFontUnderline(
+                          DataCubeFontFormatUnderlineVariant.SOLID,
+                        );
+                        selectedColumn.setFontStrikethrough(false);
+                      } else {
+                        selectedColumn.setFontUnderline(undefined);
+                      }
+                    }}
                   >
-                    <DataCubeIcon.FontUnderlined />
+                    <DataCubeIcon.FontUnderline />
                   </button>
                   <button
-                    className="text-2xs relative -ml-[1px] flex h-5 w-2.5 items-center justify-center border border-neutral-400 border-l-neutral-200 bg-neutral-50 p-0 text-neutral-600 focus-visible:z-[1]"
-                    onClick={openFontFormatUnderlinedVariantDropdown}
+                    className="text-2xs relative -ml-[1px] flex h-5 w-2.5 items-center justify-center border border-l-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-600 focus-visible:z-[1]"
+                    onClick={openFontFormatUnderlineVariantDropdown}
                   >
+                    <div
+                      className={cn('h-4 w-[0.5px] bg-neutral-200', {
+                        'opacity-0':
+                          (selectedColumn.fontUnderline ??
+                            gridConfiguration.fontUnderline) !== undefined,
+                      })}
+                    />
                     <DataCubeIcon.CaretDown />
                   </button>
                   <DataCubeEditorDropdownMenu
                     className="w-14"
-                    {...fontFormatUnderlinedVariantDropdownProps}
+                    {...fontFormatUnderlineVariantDropdownProps}
                   >
                     {[
-                      DataCubeFontFormatUnderlinedVariant.SOLID,
-                      DataCubeFontFormatUnderlinedVariant.DASHED,
-                      DataCubeFontFormatUnderlinedVariant.DOTTED,
-                      DataCubeFontFormatUnderlinedVariant.DOUBLE,
-                      DataCubeFontFormatUnderlinedVariant.WAVY,
+                      DataCubeFontFormatUnderlineVariant.SOLID,
+                      DataCubeFontFormatUnderlineVariant.DASHED,
+                      DataCubeFontFormatUnderlineVariant.DOTTED,
+                      DataCubeFontFormatUnderlineVariant.DOUBLE,
+                      DataCubeFontFormatUnderlineVariant.WAVY,
                     ].map((variant) => (
                       <DataCubeEditorDropdownMenuItem
                         className="relative"
                         key={variant}
                         onClick={() => {
-                          selectedColumn.setFontUnderlined(variant);
-                          closeFontFormatUnderlinedVariantDropdown();
+                          selectedColumn.setFontUnderline(variant);
+                          selectedColumn.setFontStrikethrough(false);
+                          closeFontFormatUnderlineVariantDropdown();
                         }}
                       >
                         <div
@@ -490,21 +740,23 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                             {
                               '!hover:decoration-solid !decoration-solid':
                                 variant ===
-                                DataCubeFontFormatUnderlinedVariant.SOLID,
+                                DataCubeFontFormatUnderlineVariant.SOLID,
                               '!hover:decoration-dashed !decoration-dashed':
                                 variant ===
-                                DataCubeFontFormatUnderlinedVariant.DASHED,
+                                DataCubeFontFormatUnderlineVariant.DASHED,
                               '!hover:decoration-dotted !decoration-dotted':
                                 variant ===
-                                DataCubeFontFormatUnderlinedVariant.DOTTED,
+                                DataCubeFontFormatUnderlineVariant.DOTTED,
                               '!hover:decoration-double !decoration-double':
                                 variant ===
-                                DataCubeFontFormatUnderlinedVariant.DOUBLE,
+                                DataCubeFontFormatUnderlineVariant.DOUBLE,
                               '!hover:decoration-wavy !decoration-wavy':
                                 variant ===
-                                DataCubeFontFormatUnderlinedVariant.WAVY,
+                                DataCubeFontFormatUnderlineVariant.WAVY,
                               'text-sky-600':
-                                variant === selectedColumn.fontUnderlined,
+                                variant ===
+                                (selectedColumn.fontUnderline ??
+                                  gridConfiguration.fontUnderline),
                             },
                           )}
                         >
@@ -516,19 +768,97 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                   <button
                     title="Strikethrough"
                     className={cn(
-                      'relative -ml-[1px] flex h-5 w-5 items-center justify-center rounded-br-sm rounded-tr-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
+                      'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
                       {
-                        'bg-neutral-200': selectedColumn.fontStrikethrough,
+                        'bg-neutral-200':
+                          selectedColumn.fontStrikethrough ??
+                          gridConfiguration.fontStrikethrough,
                       },
                     )}
-                    onClick={() =>
-                      selectedColumn.setFontStrikethrough(
-                        !selectedColumn.fontStrikethrough,
-                      )
-                    }
+                    onClick={() => {
+                      if (
+                        selectedColumn.fontStrikethrough ??
+                        gridConfiguration.fontStrikethrough
+                      ) {
+                        selectedColumn.setFontStrikethrough(false);
+                      } else {
+                        selectedColumn.setFontStrikethrough(true);
+                        selectedColumn.setFontUnderline(undefined);
+                      }
+                    }}
                   >
                     <DataCubeIcon.FontStrikethrough />
                   </button>
+                  <button
+                    title={`Case${selectedColumn.fontCase ?? gridConfiguration.fontCase ? ` (${selectedColumn.fontCase ?? gridConfiguration.fontCase})` : ''}`}
+                    className={cn(
+                      'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-r-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
+                      {
+                        'bg-neutral-200':
+                          (selectedColumn.fontCase ??
+                            gridConfiguration.fontCase) !== undefined,
+                      },
+                    )}
+                    onClick={() => {
+                      if (
+                        (selectedColumn.fontCase ??
+                          gridConfiguration.fontCase) === undefined
+                      ) {
+                        selectedColumn.setFontCase(DataCubeFontCase.UPPERCASE);
+                      } else {
+                        selectedColumn.setFontCase(undefined);
+                      }
+                    }}
+                  >
+                    <DataCubeIcon.FontCase className="stroke-[0.5px]" />
+                  </button>
+                  <button
+                    className="text-2xs relative -ml-[1px] flex h-5 w-2.5 items-center justify-center rounded-br-sm rounded-tr-sm border border-l-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-600 focus-visible:z-[1]"
+                    onClick={openFontCaseDropdown}
+                  >
+                    <div
+                      className={cn('h-4 w-[0.5px] bg-neutral-200', {
+                        'opacity-0':
+                          (selectedColumn.fontCase ??
+                            gridConfiguration.fontCase) !== undefined,
+                      })}
+                    />
+                    <DataCubeIcon.CaretDown />
+                  </button>
+                  <DataCubeEditorDropdownMenu
+                    className="w-20"
+                    {...fontCaseDropdownProps}
+                  >
+                    {[
+                      DataCubeFontCase.LOWERCASE,
+                      DataCubeFontCase.UPPERCASE,
+                      DataCubeFontCase.CAPITALIZE,
+                    ].map((fontCase) => (
+                      <DataCubeEditorDropdownMenuItem
+                        className="relative"
+                        key={fontCase}
+                        onClick={() => {
+                          selectedColumn.setFontCase(fontCase);
+                          closeFontCaseDropdown();
+                        }}
+                      >
+                        <div
+                          className={cn({
+                            lowercase: fontCase === DataCubeFontCase.LOWERCASE,
+                            uppercase: fontCase === DataCubeFontCase.UPPERCASE,
+                            capitalize:
+                              fontCase === DataCubeFontCase.CAPITALIZE,
+                            'text-sky-600':
+                              fontCase ===
+                              (selectedColumn.fontCase ??
+                                gridConfiguration.fontCase),
+                          })}
+                        >
+                          {fontCase}
+                        </div>
+                      </DataCubeEditorDropdownMenuItem>
+                    ))}
+                  </DataCubeEditorDropdownMenu>
                 </div>
 
                 <div className="relative ml-2 flex h-5">
@@ -538,7 +868,8 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                       'relative flex h-5 w-5 items-center justify-center rounded-bl-sm rounded-tl-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
                       {
                         'bg-neutral-200':
-                          selectedColumn.textAlign ===
+                          (selectedColumn.textAlign ??
+                            gridConfiguration.textAlign) ===
                           DataCubeFontTextAlignment.LEFT,
                       },
                     )}
@@ -556,7 +887,8 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                       'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
                       {
                         'bg-neutral-200':
-                          selectedColumn.textAlign ===
+                          (selectedColumn.textAlign ??
+                            gridConfiguration.textAlign) ===
                           DataCubeFontTextAlignment.CENTER,
                       },
                     )}
@@ -574,7 +906,8 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                       'relative -ml-[1px] flex h-5 w-5 items-center justify-center rounded-br-sm rounded-tr-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
                       {
                         'bg-neutral-200':
-                          selectedColumn.textAlign ===
+                          (selectedColumn.textAlign ??
+                            gridConfiguration.textAlign) ===
                           DataCubeFontTextAlignment.RIGHT,
                       },
                     )}
@@ -615,37 +948,49 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                     </div>
                     <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
                       <DataCubeEditorColorPickerButton
-                        color={selectedColumn.foregroundColor}
-                        defaultColor={DEFAULT_FOREGROUND_COLOR}
+                        color={
+                          selectedColumn.normalForegroundColor ??
+                          gridConfiguration.normalForegroundColor
+                        }
+                        defaultColor={gridConfiguration.normalForegroundColor}
                         onChange={(value) =>
-                          selectedColumn.setForegroundColor(value)
+                          selectedColumn.setNormalForegroundColor(value)
                         }
                       />
                     </div>
                     <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
                       <DataCubeEditorColorPickerButton
-                        color={selectedColumn.foregroundNegativeColor}
-                        defaultColor={DEFAULT_NEGATIVE_FOREGROUND_COLOR}
+                        color={
+                          selectedColumn.negativeForegroundColor ??
+                          gridConfiguration.negativeForegroundColor
+                        }
+                        defaultColor={gridConfiguration.negativeForegroundColor}
                         onChange={(value) =>
-                          selectedColumn.setForegroundNegativeColor(value)
+                          selectedColumn.setNegativeForegroundColor(value)
                         }
                       />
                     </div>
                     <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
                       <DataCubeEditorColorPickerButton
-                        color={selectedColumn.foregroundZeroColor}
-                        defaultColor={DEFAULT_ZERO_FOREGROUND_COLOR}
+                        color={
+                          selectedColumn.zeroForegroundColor ??
+                          gridConfiguration.zeroForegroundColor
+                        }
+                        defaultColor={gridConfiguration.zeroForegroundColor}
                         onChange={(value) =>
-                          selectedColumn.setForegroundZeroColor(value)
+                          selectedColumn.setZeroForegroundColor(value)
                         }
                       />
                     </div>
                     <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
                       <DataCubeEditorColorPickerButton
-                        color={selectedColumn.foregroundErrorColor}
-                        defaultColor={DEFAULT_ERROR_FOREGROUND_COLOR}
+                        color={
+                          selectedColumn.errorForegroundColor ??
+                          gridConfiguration.errorForegroundColor
+                        }
+                        defaultColor={gridConfiguration.errorForegroundColor}
                         onChange={(value) =>
-                          selectedColumn.setForegroundErrorColor(value)
+                          selectedColumn.setErrorForegroundColor(value)
                         }
                       />
                     </div>
@@ -656,37 +1001,49 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                     </div>
                     <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
                       <DataCubeEditorColorPickerButton
-                        color={selectedColumn.backgroundColor}
-                        defaultColor={DEFAULT_BACKGROUND_COLOR}
+                        color={
+                          selectedColumn.normalBackgroundColor ??
+                          gridConfiguration.normalBackgroundColor
+                        }
+                        defaultColor={gridConfiguration.normalBackgroundColor}
                         onChange={(value) =>
-                          selectedColumn.setBackgroundColor(value)
+                          selectedColumn.setNormalBackgroundColor(value)
                         }
                       />
                     </div>
                     <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
                       <DataCubeEditorColorPickerButton
-                        color={selectedColumn.backgroundNegativeColor}
-                        defaultColor={DEFAULT_BACKGROUND_COLOR}
+                        color={
+                          selectedColumn.negativeBackgroundColor ??
+                          gridConfiguration.negativeBackgroundColor
+                        }
+                        defaultColor={gridConfiguration.negativeBackgroundColor}
                         onChange={(value) =>
-                          selectedColumn.setBackgroundNegativeColor(value)
+                          selectedColumn.setNegativeBackgroundColor(value)
                         }
                       />
                     </div>
                     <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
                       <DataCubeEditorColorPickerButton
-                        color={selectedColumn.backgroundZeroColor}
-                        defaultColor={DEFAULT_BACKGROUND_COLOR}
+                        color={
+                          selectedColumn.zeroBackgroundColor ??
+                          gridConfiguration.zeroBackgroundColor
+                        }
+                        defaultColor={gridConfiguration.zeroBackgroundColor}
                         onChange={(value) =>
-                          selectedColumn.setBackgroundZeroColor(value)
+                          selectedColumn.setZeroBackgroundColor(value)
                         }
                       />
                     </div>
                     <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
                       <DataCubeEditorColorPickerButton
-                        color={selectedColumn.backgroundErrorColor}
-                        defaultColor={DEFAULT_BACKGROUND_COLOR}
+                        color={
+                          selectedColumn.errorBackgroundColor ??
+                          gridConfiguration.errorBackgroundColor
+                        }
+                        defaultColor={gridConfiguration.errorBackgroundColor}
                         onChange={(value) =>
-                          selectedColumn.setBackgroundErrorColor(value)
+                          selectedColumn.setErrorBackgroundColor(value)
                         }
                       />
                     </div>
@@ -694,174 +1051,18 @@ export const DataCubeEditorColumnPropertiesPanel = observer(() => {
                 </div>
               </div>
 
-              <div className="mt-2 flex h-4 w-full items-center">
-                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                  Hide from View?
-                </div>
-                <DataCubeEditorCheckbox
-                  checked={selectedColumn.hideFromView}
-                  onChange={() =>
-                    selectedColumn.setHideFromView(!selectedColumn.hideFromView)
-                  }
-                  disabled={true}
-                />
-                <WIP_Badge />
-              </div>
-
-              <div className="mt-2 flex h-6 w-full items-center">
-                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                  Pin:
-                </div>
-                <DataCubeEditorDropdownMenuTrigger
-                  className="w-14"
-                  onClick={openColumnPinDropdown}
-                >
-                  {selectedColumn.pinned ?? '(None)'}
-                </DataCubeEditorDropdownMenuTrigger>
-                <DataCubeEditorDropdownMenu
-                  className="w-14"
-                  {...columnPinDropdownProps}
-                >
-                  {[
-                    undefined,
-                    DataCubeColumnPinPlacement.LEFT,
-                    DataCubeColumnPinPlacement.RIGHT,
-                  ].map((placement) => (
-                    <DataCubeEditorDropdownMenuItem
-                      key={placement ?? ''}
-                      onClick={() => {
-                        selectedColumn.setPinned(placement);
-                        closeColumnPinDropdown();
-                      }}
-                    >
-                      {placement ?? '(None)'}
-                    </DataCubeEditorDropdownMenuItem>
-                  ))}
-                </DataCubeEditorDropdownMenu>
-              </div>
-
-              <div className="mt-2 flex h-6 w-full items-center">
-                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                  Width:
-                </div>
-                <DataCubeEditorCheckbox
-                  label="(Any)"
-                  checked={
-                    selectedColumn.fixedWidth === undefined &&
-                    selectedColumn.minWidth === undefined &&
-                    selectedColumn.maxWidth === undefined
-                  }
-                  onChange={() => {
-                    if (
-                      selectedColumn.fixedWidth === undefined &&
-                      selectedColumn.minWidth === undefined &&
-                      selectedColumn.maxWidth === undefined
-                    ) {
-                      selectedColumn.setFixedWidth(DEFAULT_COLUMN_WIDTH);
-                      selectedColumn.setMinWidth(undefined);
-                      selectedColumn.setMaxWidth(undefined);
-                    } else {
-                      selectedColumn.setFixedWidth(undefined);
-                      selectedColumn.setMinWidth(undefined);
-                      selectedColumn.setMaxWidth(undefined);
-                    }
-                  }}
-                />
-
-                <DataCubeEditorCheckbox
-                  className="ml-2"
-                  label="Fixed"
-                  checked={selectedColumn.fixedWidth !== undefined}
-                  onChange={() => {
-                    selectedColumn.setFixedWidth(
-                      selectedColumn.fixedWidth !== undefined
-                        ? undefined
-                        : DEFAULT_COLUMN_WIDTH,
-                    );
-                    selectedColumn.setMinWidth(undefined);
-                    selectedColumn.setMaxWidth(undefined);
-                  }}
-                />
-                <div className="ml-1 h-[1px] w-2 bg-neutral-400" />
-                <DataCubeEditorNumberInput
-                  className="ml-1 w-16 text-sm"
-                  min={0}
-                  step={50}
-                  defaultValue={undefined}
-                  isValid={(value) => value !== undefined && value > 0}
-                  value={selectedColumn.fixedWidth}
-                  setValue={(value) => {
-                    selectedColumn.setFixedWidth(value);
-                  }}
-                  disabled={
-                    selectedColumn.minWidth !== undefined ||
-                    selectedColumn.maxWidth !== undefined
-                  }
-                />
-
-                <DataCubeEditorCheckbox
-                  className="ml-3"
-                  label="In range"
-                  checked={
-                    selectedColumn.minWidth !== undefined ||
-                    selectedColumn.maxWidth !== undefined
-                  }
-                  onChange={() => {
-                    if (
-                      selectedColumn.minWidth === undefined &&
-                      selectedColumn.maxWidth === undefined
-                    ) {
-                      selectedColumn.setMinWidth(DEFAULT_COLUMN_MIN_WIDTH);
-                      selectedColumn.setMaxWidth(DEFAULT_COLUMN_MAX_WIDTH);
-                      selectedColumn.setFixedWidth(undefined);
-                    } else {
-                      selectedColumn.setMinWidth(undefined);
-                      selectedColumn.setMaxWidth(undefined);
-                      selectedColumn.setFixedWidth(undefined);
-                    }
-                  }}
-                />
-                <div className="ml-1 h-[1px] w-2 bg-neutral-400" />
-                <DataCubeEditorNumberInput
-                  className="ml-1 w-16 text-sm"
-                  min={0}
-                  step={50}
-                  defaultValue={undefined}
-                  isValid={(value) => value !== undefined && value > 0}
-                  value={selectedColumn.minWidth}
-                  setValue={(value) => {
-                    selectedColumn.setMinWidth(value);
-                  }}
-                  disabled={selectedColumn.fixedWidth !== undefined}
-                />
-                <div className="ml-1 h-[1px] w-1 bg-neutral-400" />
-                <DataCubeEditorNumberInput
-                  className="ml-1 w-16 text-sm"
-                  min={selectedColumn.minWidth ?? 0}
-                  step={50}
-                  defaultValue={undefined}
-                  isValid={(value) =>
-                    value !== undefined &&
-                    value >= (selectedColumn.minWidth ?? 0)
-                  }
-                  value={selectedColumn.maxWidth}
-                  setValue={(value) => {
-                    selectedColumn.setMaxWidth(value);
-                  }}
-                  disabled={selectedColumn.fixedWidth !== undefined}
-                />
-              </div>
-
-              <div className="mt-2 flex h-4 w-full items-center">
-                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                  Blur Content?
+              <div className="mt-2 flex w-full">
+                <div className="flex h-6 w-32 flex-shrink-0 items-center text-sm" />
+                <div className="w-80">
+                  <div className="mb-2 h-[1px] w-full bg-neutral-200" />
+                  <button
+                    className="flex h-5 items-center justify-center rounded-sm border border-neutral-400 bg-neutral-200 p-0 px-1 text-sm text-neutral-700 disabled:text-neutral-400"
+                    disabled={selectedColumn.isUsingDefaultStyling}
+                    onClick={() => selectedColumn.useDefaultStyling()}
+                  >
+                    Use Default Styling
+                  </button>
                 </div>
-                <DataCubeEditorCheckbox
-                  checked={selectedColumn.blur}
-                  onChange={() => selectedColumn.setBlur(!selectedColumn.blur)}
-                  disabled={true}
-                />
-                <WIP_Badge />
               </div>
             </>
           )}