feat: De-globalize utils, formatters, linker

packages/chart/README.md

@@ -14,5 +14,5 @@ Then, import and use the component from the package:
 import { Chart } from '@deephaven/chart';
 
 // In your render function
-<Chart model={model} />
+<Chart dh={dh} model={model} />
 ```

packages/chart/src/Chart.tsx

@@ -7,6 +7,7 @@ import {
   dhWarningFilled,
   IconDefinition,
 } from '@deephaven/icons';
+import type { dh as DhType } from '@deephaven/jsapi-types';
 import {
   Formatter,
   FormatterUtils,
@@ -35,6 +36,7 @@ type FormatterSettings = ColumnFormatSettings &
   };
 
 interface ChartProps {
+  dh: DhType;
   model: ChartModel;
   settings: FormatterSettings;
   isActive: boolean;
@@ -505,7 +507,9 @@ export class Chart extends Component<ChartProps, ChartState> {
   }
 
   updateFormatter(): void {
+    const { dh } = this.props;
     const formatter = new Formatter(
+      dh,
       this.columnFormats,
       this.dateTimeFormatterOptions,
       this.decimalFormatOptions,

packages/chart/src/ChartUtils.test.ts

@@ -8,7 +8,7 @@ import ChartTheme from './ChartTheme';
 const chartUtils = new ChartUtils(dh);
 
 function makeFormatter() {
-  return new Formatter();
+  return new Formatter(dh);
 }
 
 it('groups the axes by type properly', () => {

packages/code-studio/src/main/AppMainContainer.tsx

@@ -930,7 +930,7 @@ export class AppMainContainer extends Component<
           <FilterPlugin />
           <PandasPlugin hydrate={this.hydratePandas} />
           <MarkdownPlugin />
-          <LinkerPlugin />
+          <LinkerPlugin dh={dh} />
           {dashboardPlugins}
         </Dashboard>
         <CSSTransition

packages/code-studio/src/settings/ColumnSpecificSectionContent.test.tsx

@@ -7,7 +7,7 @@ import { WorkspaceSettings } from '@deephaven/redux';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Formatter } from '@deephaven/jsapi-utils';
-
+import dh from '@deephaven/jsapi-shim';
 import {
   ColumnSpecificSectionContent,
   ColumnSpecificSectionContentProps,
@@ -35,6 +35,7 @@ function renderContent({
 }: Partial<ColumnSpecificSectionContentProps> = {}) {
   return render(
     <ColumnSpecificSectionContent
+      dh={dh}
       formatter={formatter}
       defaultDateTimeFormat={defaultDateTimeFormat}
       showTimeZone={showTimeZone}

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

@@ -19,6 +19,7 @@ import {
   TableColumnFormat,
   FormattingRule,
 } from '@deephaven/jsapi-utils';
+import { dh as DhType } from '@deephaven/jsapi-types';
 import {
   getDefaultDateTimeFormat,
   getDefaultDecimalFormatOptions,
@@ -42,12 +43,14 @@ import {
   isValidFormat,
   removeFormatRuleExtraProps,
   isFormatRuleValidForSave,
+  ValidFormatterItem,
 } from './SettingsUtils';
 import type { FormatterItem, FormatOption } from './SettingsUtils';
 import ColumnTypeOptions from './ColumnTypeOptions';
 import DateTimeOptions from './DateTimeOptions';
 
 export interface ColumnSpecificSectionContentProps {
+  dh: DhType;
   formatter: FormatterItem[];
   defaultDateTimeFormat: string;
   showTimeZone: boolean;
@@ -190,8 +193,10 @@ export class ColumnSpecificSectionContent extends PureComponent<
       legacyGlobalFormat?: string
     ) => {
       const { timestampAtMenuOpen } = this.state;
+      const { dh } = this.props;
       return (
         <DateTimeOptions
+          dh={dh}
           timestamp={timestampAtMenuOpen}
           timeZone={timeZone}
           showTimeZone={showTimeZone}
@@ -288,10 +293,13 @@ export class ColumnSpecificSectionContent extends PureComponent<
       defaultIntegerFormatOptions,
       truncateNumbersWithPound,
     } = this.state;
+    const { dh } = this.props;
 
     const formatter =
       formatSettings
-        .filter(isFormatRuleValidForSave)
+        .filter((format): format is ValidFormatterItem =>
+          isFormatRuleValidForSave(dh, format)
+        )
         .map(removeFormatRuleExtraProps) ?? [];
 
     const { settings, saveSettings } = this.props;
@@ -306,6 +314,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
     };
     if (
       isValidFormat(
+        dh,
         TableUtils.dataType.DECIMAL,
         DecimalColumnFormatter.makeCustomFormat(
           defaultDecimalFormatOptions.defaultFormatString
@@ -316,6 +325,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
     }
     if (
       isValidFormat(
+        dh,
         TableUtils.dataType.INT,
         IntegerColumnFormatter.makeCustomFormat(
           defaultIntegerFormatOptions.defaultFormatString
@@ -339,6 +349,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
   getRuleError(
     rule: FormatterItem
   ): { hasColumnNameError: boolean; hasFormatError: boolean; message: string } {
+    const { dh } = this.props;
     const error = {
       hasColumnNameError: false,
       hasFormatError: false,
@@ -369,7 +380,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
     ) {
       error.hasFormatError = true;
       errorMessages.push('Empty formatting rule.');
-    } else if (!isValidFormat(rule.columnType, rule.format)) {
+    } else if (!isValidFormat(dh, rule.columnType, rule.format)) {
       error.hasFormatError = true;
       errorMessages.push('Invalid formatting rule.');
     }

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

@@ -4,8 +4,10 @@ import {
   DateTimeColumnFormatter,
   TableUtils,
 } from '@deephaven/jsapi-utils';
+import { dh as DhType } from '@deephaven/jsapi-types';
 
 interface DateTimeOptionProps {
+  dh: DhType;
   timestamp: Date;
   timeZone: string;
   showTimeZone: boolean;
@@ -18,6 +20,7 @@ export default function DateTimeOptions(
   props: DateTimeOptionProps
 ): ReactElement {
   const {
+    dh,
     timestamp,
     timeZone,
     showTimeZone,
@@ -26,7 +29,7 @@ export default function DateTimeOptions(
     legacyGlobalFormat,
   } = props;
 
-  const formatter = new Formatter([], {
+  const formatter = new Formatter(dh, [], {
     timeZone,
     showTimeZone,
     showTSeparator,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import dh from '@deephaven/jsapi-shim';
 import { DateTimeColumnFormatter } from '@deephaven/jsapi-utils';
 import { WorkspaceSettings } from '@deephaven/redux';
 import { assertNotNull } from '@deephaven/utils';
@@ -46,6 +47,7 @@ function renderSectionContent({
 } = {}) {
   return render(
     <FormattingSectionContent
+      dh={dh}
       settings={settings as WorkspaceSettings}
       formatter={formatter}
       showTimeZone={showTimeZone}

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

@@ -16,6 +16,7 @@ import {
   DecimalColumnFormatter,
   TableUtils,
 } from '@deephaven/jsapi-utils';
+import { dh as DhType } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 import {
   getDefaultDateTimeFormat,
@@ -40,6 +41,7 @@ import {
   isValidFormat,
   removeFormatRuleExtraProps,
   isFormatRuleValidForSave,
+  ValidFormatterItem,
 } from './SettingsUtils';
 import type { FormatterItem, FormatOption } from './SettingsUtils';
 import DateTimeOptions from './DateTimeOptions';
@@ -48,6 +50,7 @@ import TimeZoneOptions from './TimeZoneOptions';
 const log = Log.module('FormattingSectionContent');
 
 interface FormattingSectionContentProps {
+  dh: DhType;
   formatter: FormatterItem[];
   defaultDateTimeFormat: string;
   showTimeZone: boolean;
@@ -185,8 +188,10 @@ export class FormattingSectionContent extends PureComponent<
       legacyGlobalFormat?: string
     ) => {
       const { timestampAtMenuOpen } = this.state;
+      const { dh } = this.props;
       return (
         <DateTimeOptions
+          dh={dh}
           timestamp={timestampAtMenuOpen}
           timeZone={timeZone}
           showTimeZone={showTimeZone}
@@ -353,10 +358,13 @@ export class FormattingSectionContent extends PureComponent<
       defaultIntegerFormatOptions,
       truncateNumbersWithPound,
     } = this.state;
+    const { dh } = this.props;
 
     const formatter =
       formatSettings
-        .filter(isFormatRuleValidForSave)
+        .filter((format): format is ValidFormatterItem =>
+          isFormatRuleValidForSave(dh, format)
+        )
         .map(removeFormatRuleExtraProps) ?? [];
 
     const { settings, saveSettings } = this.props;
@@ -371,6 +379,7 @@ export class FormattingSectionContent extends PureComponent<
     };
     if (
       isValidFormat(
+        dh,
         TableUtils.dataType.DECIMAL,
         DecimalColumnFormatter.makeCustomFormat(
           defaultDecimalFormatOptions.defaultFormatString
@@ -381,6 +390,7 @@ export class FormattingSectionContent extends PureComponent<
     }
     if (
       isValidFormat(
+        dh,
         TableUtils.dataType.INT,
         IntegerColumnFormatter.makeCustomFormat(
           defaultIntegerFormatOptions.defaultFormatString
@@ -393,7 +403,7 @@ export class FormattingSectionContent extends PureComponent<
   }
 
   render(): ReactElement {
-    const { defaults } = this.props;
+    const { defaults, dh } = this.props;
     const {
       defaultDateTimeFormat,
       defaultDecimalFormatOptions,
@@ -532,6 +542,7 @@ export class FormattingSectionContent extends PureComponent<
                   'default-decimal-format-input',
                   {
                     'is-invalid': !isValidFormat(
+                      dh,
                       TableUtils.dataType.DECIMAL,
                       DecimalColumnFormatter.makeCustomFormat(
                         defaultDecimalFormatString
@@ -575,6 +586,7 @@ export class FormattingSectionContent extends PureComponent<
                   'default-integer-format-input',
                   {
                     'is-invalid': !isValidFormat(
+                      dh,
                       TableUtils.dataType.INT,
                       IntegerColumnFormatter.makeCustomFormat(
                         defaultIntegerFormatString

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

@@ -209,7 +209,7 @@ export class SettingsMenu extends Component<
             }
             onToggle={this.handleSectionToggle}
           >
-            <FormattingSectionContent />
+            <FormattingSectionContent dh={dh} />
           </SettingsMenuSection>
 
           <SettingsMenuSection
@@ -229,7 +229,10 @@ export class SettingsMenu extends Component<
             }
             onToggle={this.handleSectionToggle}
           >
-            <ColumnSpecificSectionContent scrollTo={this.handleScrollTo} />
+            <ColumnSpecificSectionContent
+              dh={dh}
+              scrollTo={this.handleScrollTo}
+            />
           </SettingsMenuSection>
 
           <SettingsMenuSection

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

@@ -6,9 +6,10 @@ import {
   TableColumnFormat,
   FormattingRule,
 } from '@deephaven/jsapi-utils';
+import { dh as DhType } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 
-const log = Log.module('FormattingSectionContent');
+const log = Log.module('SettingsUtils');
 
 export type FormatOption = {
   defaultFormatString?: string;
@@ -68,6 +69,7 @@ export function isValidColumnName(name: string): boolean {
 }
 
 export function isValidFormat(
+  dh: DhType,
   columnType: string,
   format: Partial<TableColumnFormat>
 ): boolean {
@@ -81,11 +83,11 @@ export function isValidFormat(
   }
   switch (columnType) {
     case 'datetime':
-      return DateTimeColumnFormatter.isValid(format);
+      return DateTimeColumnFormatter.isValid(dh, format);
     case 'decimal':
-      return DecimalColumnFormatter.isValid(format);
+      return DecimalColumnFormatter.isValid(dh, format);
     case 'int':
-      return IntegerColumnFormatter.isValid(format);
+      return IntegerColumnFormatter.isValid(dh, format);
     default: {
       log.warn('Trying to validate format of unknown type');
       return true;
@@ -101,11 +103,12 @@ export function removeFormatRuleExtraProps(
 }
 
 export function isFormatRuleValidForSave(
+  dh: DhType,
   rule: FormatterItem
 ): rule is ValidFormatterItem {
   return (
     isValidColumnName(rule.columnName) &&
-    isValidFormat(rule.columnType, rule.format)
+    isValidFormat(dh, rule.columnType, rule.format)
   );
 }
 

packages/code-studio/src/styleguide/Charts.tsx

@@ -10,7 +10,7 @@ function Charts(): ReactElement {
     <div>
       <h2 className="ui-title">Chart</h2>
       <div style={{ height: 500 }}>
-        <Chart model={model as ChartModel} />
+        <Chart dh={dh} model={model as ChartModel} />
       </div>
     </div>
   );

packages/dashboard-core-plugins/src/LinkerPlugin.tsx

@@ -3,15 +3,23 @@ import {
   assertIsDashboardPluginProps,
   DashboardPluginComponentProps,
 } from '@deephaven/dashboard';
+import { dh as DhType } from '@deephaven/jsapi-types';
 import Linker from './linker/Linker';
 
-export type LinkerPluginProps = Partial<DashboardPluginComponentProps>;
+export type LinkerPluginProps = Partial<DashboardPluginComponentProps> & {
+  dh: DhType;
+};
 
 export function LinkerPlugin(props: LinkerPluginProps): JSX.Element {
   assertIsDashboardPluginProps(props);
-  const { id, layout, panelManager } = props;
+  const { dh, id, layout, panelManager } = props;
   return (
-    <Linker layout={layout} localDashboardId={id} panelManager={panelManager} />
+    <Linker
+      dh={dh}
+      layout={layout}
+      localDashboardId={id}
+      panelManager={panelManager}
+    />
   );
 }