Timezone Support (#3139)

Author: jameskerr

apps/zui/src/components/format.ts

@@ -28,8 +28,22 @@ export const getFormatConfig = createSelector(
 )
 
 const getTimeZone = createSelector(getFormatConfig, (config) => config.timeZone)
+const getTimeFormat = createSelector(
+  getFormatConfig,
+  (config) => config.timeFormat
+)
+
+export const useTimeZone = () => {
+  const zone = useSelector(getTimeZone)
+  zed.Time.config.zone = zone
+  return zone
+}
 
-export const useTimeZone = () => useSelector(getTimeZone)
+export const useTimeFormat = () => {
+  const format = useSelector(getTimeFormat)
+  zed.Time.config.format = format
+  return format
+}
 
 export function formatValue(
   data: zed.Value,

apps/zui/src/electron/run-main/run-configurations.ts

@@ -47,9 +47,10 @@ export function runConfigurations() {
         label: "Time Format",
         type: "string",
         defaultValue: "",
+        placeholder: "%Y-%m-%dT%H:%M:%S.%L%:z",
         helpLink: {
           label: "docs",
-          url: "https://momentjs.com/docs/#/displaying/format/",
+          url: "https://github.com/samsonjs/strftime?tab=readme-ov-file#supported-specifiers",
         },
       },
       thousandsSeparator: {

apps/zui/src/views/detail-pane/handler.ts

@@ -5,6 +5,7 @@ import LogDetails from "src/js/state/LogDetails"
 import {useSelector} from "react-redux"
 import {LogDetailHistory} from "src/js/state/LogDetails/reducer"
 import {StateObject, useStateObject} from "src/core/state-object"
+import {useTimeFormat, useTimeZone} from "src/components/format"
 
 const initial = {expanded: {}, page: {}}
 
@@ -14,6 +15,8 @@ export class DetailPaneHandler extends ViewHandler {
 
   constructor(public value: zed.Value) {
     super()
+    useTimeZone()
+    useTimeFormat()
     this.history = useSelector(LogDetails.getHistory)
     this.state = useStateObject(initial)
   }

apps/zui/src/views/export-modal/index.tsx

@@ -39,7 +39,7 @@ export function ExportModal() {
 
         <section className="flow region region-space-xl">
           <label>Export To</label>
-          <div className="cluster">
+          <div className="cluster gap-s">
             <label htmlFor="dest_file">
               <input
                 type="radio"

apps/zui/src/views/results-pane/index.tsx

@@ -6,8 +6,11 @@ import {Inspector} from "./inspector"
 import {Table} from "./table"
 import {TableInspector} from "./table-inspector"
 import styles from "./results-pane.module.css"
+import {useTimeFormat, useTimeZone} from "src/components/format"
 
 export function ResultsPane() {
+  useTimeZone()
+  useTimeFormat()
   const ref = useRef()
   return (
     <div

apps/zui/src/views/results-pane/table.tsx

@@ -14,6 +14,7 @@ import {BareStringView} from "./bare-string-view"
 import {PathView} from "./path-view"
 import {showMenu} from "src/core/menu"
 import Selection from "src/js/state/Selection"
+import {useTimeFormat, useTimeZone} from "src/components/format"
 
 // 1. Don't forget to save the shape using zed.typeunder
 
@@ -24,6 +25,8 @@ export function Table() {
   const settings = useSelector(Slice.getShapeSettings)
   const shape = useSelector(Slice.getShape)
   const initialScrollPosition = useScrollPosition(table)
+  const format = useTimeFormat()
+  const zone = useTimeZone()
 
   return (
     <TableView
@@ -33,6 +36,7 @@ export function Table() {
       width={ctx.width}
       height={ctx.height}
       initialScrollPosition={initialScrollPosition}
+      deps={[format, zone]}
       valuePageState={{
         value: settings.valuePage,
         onChange: (next) => dispatch(Slice.setValuePage(next)),

apps/zui/src/views/settings-modal/input.tsx

@@ -8,7 +8,7 @@ import {invoke} from "src/core/invoke"
 export function Input(props: SettingProps) {
   const dispatch = useDispatch()
   const {field} = props
-  const {name, defaultValue} = field
+  const {name, defaultValue, placeholder} = field
   const value = useSelector(ConfigPropValues.get(props.sectionName, field.name))
   const update = (value) =>
     dispatch(
@@ -29,6 +29,7 @@ export function Input(props: SettingProps) {
           id={name}
           name={name}
           onBlur={onChange}
+          placeholder={placeholder}
           defaultValue={value === undefined ? defaultValue : value}
         />
       )
@@ -109,7 +110,7 @@ export function Input(props: SettingProps) {
             name={name}
             onBlur={onChange}
             type="text"
-            placeholder=""
+            placeholder={placeholder}
             defaultValue={value === undefined ? defaultValue : value}
           />
         )

apps/zui/src/zui-kit/react/table-view.tsx

@@ -37,6 +37,7 @@ export const TableView = forwardRef(function TableView(
       shape,
       args.columnVisibleState.value,
       args.columnExpandedState.value,
+      ...args.deps,
     ]
   )
 

apps/zui/src/zui-kit/react/types.ts

@@ -7,4 +7,5 @@ export type ReactAdapterProps = {
   innerRef?: Ref<HTMLDivElement>
   outerRef?: Ref<HTMLDivElement>
   initialScrollPosition?: {top?: number; left?: number}
+  deps?: any[]
 }

packages/zed-js/jest.config.ts

@@ -1,8 +1,13 @@
+const esModules = ['d3-time-format', 'd3-time', 'd3-array', 'internmap'].join(
+  '|'
+);
+
 export default {
   displayName: 'zed-js',
   preset: '../../jest.preset.js',
   transform: {
     '^.+\\.[tj]s$': ['@swc/jest'],
   },
+  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
   moduleFileExtensions: ['ts', 'js', 'html'],
 };

packages/zed-js/package.json

@@ -5,10 +5,14 @@
   "main": "./dist/cjs/src/index.js",
   "jsdelivr": "./dist/browser/index.js",
   "devDependencies": {
-    "@types/event-source-polyfill": "^1.0.1"
+    "@types/event-source-polyfill": "^1.0.1",
+    "@types/strftime": "^0.9.8"
   },
   "dependencies": {
+    "date-fns": "^3.6.0",
+    "date-fns-tz": "^3.1.3",
     "event-source-polyfill": "^1.0.31",
-    "events": "^3.3.0"
+    "events": "^3.3.0",
+    "strftime": "^0.10.3"
   }
 }

packages/zed-js/src/query/result-stream.ts

@@ -34,11 +34,11 @@ export class ResultStream extends EventEmitter {
   }
 
   get shapes() {
-    return this.channel("main").shapes;
+    return this.channel('main').shapes;
   }
 
   get rows() {
-    return this.channel("main").rows;
+    return this.channel('main').rows;
   }
 
   channel(name: string | undefined = this.currentChannel) {
@@ -54,21 +54,21 @@ export class ResultStream extends EventEmitter {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   async js(opts: JSOptions = {}): Promise<any> {
     this.consume();
-    const channel = this.channel("main");
+    const channel = this.channel('main');
     await this.promise;
     return channel.rows.map((r) => r.toJS(opts));
   }
 
   async zed() {
     this.consume();
-    const channel = this.channel("main");
+    const channel = this.channel('main');
     await this.promise;
     return channel.rows;
   }
 
   collect(collector: Collector) {
     this.consume();
-    this.channel("main").collect(collector);
+    this.channel('main').collect(collector);
     return this.promise;
   }
 
@@ -111,19 +111,19 @@ export class ResultStream extends EventEmitter {
     // XXX This is here to support backwards compatibility for the channel name
     // in the query API. This can be removed after a reasonable period from
     // 8/2024.
-    if ("channel_id" in o) {
-      return o.channel_id === 0 ? "main" : o.channel_id.toString()
+    if ('channel_id' in o) {
+      return o.channel_id === 0 ? 'main' : o.channel_id.toString();
     }
-    return o.channel
+    return o.channel;
   }
 
   private consumeLine(json: zjson.QueryObject) {
     switch (json.type) {
       case 'QueryChannelSet':
-        this.currentChannel = this.getChannel(json.value)
+        this.currentChannel = this.getChannel(json.value);
         break;
       case 'QueryChannelEnd':
-        this.currentChannel = this.getChannel(json.value)
+        this.currentChannel = this.getChannel(json.value);
         this.channel().done();
         break;
       case 'QueryStats':

packages/zed-js/src/values/primitive.ts

@@ -2,6 +2,8 @@ import { Type } from '../types/types';
 import { isNull } from '../utils/is-null';
 import { Value } from './types';
 
+
+
 export abstract class Primitive implements Value {
   abstract type: Type;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/zed-js/src/values/record.ts

@@ -51,8 +51,8 @@ export class Record implements Value {
     return this.fields.map((f) => stream.encodeValue(f.value));
   }
 
-  at(index: number | number[]) {
-    return this.fieldAt(index)?.value ?? null;
+  at<T = Value>(index: number | number[]) {
+    return (this.fieldAt(index)?.value ?? null) as T;
   }
 
   fieldAt(index: number | number[]): null | Field {

packages/zed-js/src/values/time.test.ts

@@ -15,11 +15,64 @@ test('toDate()', () => {
 });
 
 test('create record with time field', () => {
-  const t = createData(new Date(0)) as Time;
+  const t = createData(new Date(0)) as unknown as Time;
   expect(t.toDate()).toEqual(new Date(0));
 });
 
 test('keeps the milliseconds', () => {
   const date = new Time('2020-02-25T16:03:17.838527Z').toDate();
   expect(date?.toISOString()).toEqual('2020-02-25T16:03:17.838Z');
 });
+
+test('format with strftime with default', () => {
+  const time = new Time('2000-01-01T00:00:00Z');
+  expect(time.format()).toBe('2000-01-01T00:00:00.000+00:00');
+});
+
+test('format in new york', () => {
+  const time = new Time('2000-01-01T00:00:00Z');
+  time.zone = 'America/New_York';
+  expect(time.format()).toBe('1999-12-31T19:00:00.000-05:00');
+});
+
+test('format in los angeles', () => {
+  const time = new Time('2000-01-01T00:00:00Z');
+  Time.config.zone = 'America/Los_Angeles';
+  expect(time.format()).toEqual('1999-12-31T16:00:00.000-08:00');
+});
+
+test('format using local specifier and static ime zone', () => {
+  const time = new Time('2000-01-01T00:00:00Z');
+  Time.config.zone = 'Asia/Bangkok';
+  expect(time.format('%a, %B %d %Y at %H:%M, %z')).toEqual(
+    'Sat, January 01 2000 at 07:00, +0700'
+  );
+});
+
+test('format using static format', () => {
+  const time = new Time('2000-01-01T00:00:00Z');
+  Time.config.zone = 'America/New_York';
+  Time.config.format = '%a, %B %d %Y at %H:%M, %z';
+  expect(time.format()).toEqual('Fri, December 31 1999 at 19:00, -0500');
+});
+
+test('toString when nothing is set', () => {
+  Time.config.zone = null;
+  Time.config.format = null;
+  const time = new Time('2000-01-01T00:00:00Z');
+  expect(time.toString()).toBe(time.value);
+});
+
+test('toString when zone is set', () => {
+  Time.config.zone = 'America/New_York';
+  Time.config.format = null;
+  const time = new Time('1999-12-31T19:00:00.000-05:00');
+  expect(time.toString()).toBe(time.value);
+});
+
+test('toString when format is set', () => {
+  Time.config.zone = null;
+  Time.config.format = '%A';
+  const time = new Time('1999-12-31T19:00:00.000-05:00');
+  expect(time.toString()).toBe('Saturday');
+});

packages/zed-js/src/values/time.ts

@@ -1,21 +1,70 @@
+import { toZonedTime } from 'date-fns-tz';
 import { TypeTime } from '../types/type-time';
-import { isNull } from '../utils/is-null';
 import { Primitive } from './primitive';
+import { JSOptions } from './types';
+import strftime from 'strftime';
 
 export class Time extends Primitive {
   type: typeof TypeTime = TypeTime;
-  _date: Date | null;
+  _zone?: string;
+
+  static config: { zone?: string | null; format?: string | null } = {};
 
   constructor(value: string) {
     super(value);
-    this._date = isNull(value) ? null : new Date(value);
   }
 
   toDate() {
-    return this._date;
+    if (!this.value) return null;
+    return new Date(this.value);
+  }
+
+  toJS(opts: JSOptions = {}) {
+    if (opts.zonedDates) {
+      return this.toZonedDate();
+    } else {
+      return this.toDate();
+    }
+  }
+
+  toZonedDate() {
+    if (!this.value) return null;
+    return toZonedTime(this.value, this.zone);
+  }
+
+  format(specifier = this.formatSpecifier) {
+    if (!this.value) return 'null';
+    return strftime.timezone(this.offset)(specifier, this.toDate()!);
+  }
+
+  override toString() {
+    if (!this.value) return 'null';
+    console.log(Time.config);
+    if (Time.config.format || this.zone != 'UTC') {
+      return this.format();
+    } else {
+      return this.value;
+    }
+  }
+
+  get offset() {
+    const timeZone = this.zone;
+    const date = this.toDate();
+    if (!date) return 0;
+    const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }));
+    const tzDate = new Date(date.toLocaleString('en-US', { timeZone }));
+    return (tzDate.getTime() - utcDate.getTime()) / 6e4;
+  }
+
+  get zone() {
+    return this._zone || Time.config.zone || 'UTC';
+  }
+
+  set zone(value: string) {
+    this._zone = value;
   }
 
-  toJS() {
-    return this.toDate();
+  get formatSpecifier() {
+    return Time.config.format || '%Y-%m-%dT%H:%M:%S.%L%:z';
   }
 }