-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add small toggles to Asset Details graphs, consolidate localStorage-b…
…acked state (#6762)
- Loading branch information
Showing
19 changed files
with
174 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 9 additions & 13 deletions
22
js_modules/dagit/packages/core/src/app/time/TimezoneContext.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,18 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import {useStateWithStorage} from '../../hooks/useStateWithStorage'; | ||
|
|
||
| const TimezoneStorageKey = 'TimezonePreference'; | ||
|
|
||
| type Value = [string, (next: string) => void]; | ||
| export const TimezoneContext = React.createContext< | ||
| [string, React.Dispatch<React.SetStateAction<string | undefined>>] | ||
| >(['UTC', () => '']); | ||
|
|
||
| export const TimezoneContext = React.createContext<Value>(['UTC', () => {}]); | ||
| const validateTimezone = (saved: string | undefined) => | ||
| typeof saved === 'string' ? saved : 'Automatic'; | ||
|
|
||
| export const TimezoneProvider: React.FC = (props) => { | ||
| const [value, setValue] = React.useState( | ||
| () => window.localStorage.getItem(TimezoneStorageKey) || 'Automatic', | ||
| ); | ||
|
|
||
| const onChange = React.useCallback((tz: string) => { | ||
| window.localStorage.setItem(TimezoneStorageKey, tz); | ||
| setValue(tz); | ||
| }, []); | ||
|
|
||
| const provided: Value = React.useMemo(() => [value, onChange], [value, onChange]); | ||
| const state = useStateWithStorage(TimezoneStorageKey, validateTimezone); | ||
|
|
||
| return <TimezoneContext.Provider value={provided}>{props.children}</TimezoneContext.Provider>; | ||
| return <TimezoneContext.Provider value={state}>{props.children}</TimezoneContext.Provider>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 6 additions & 16 deletions
22
js_modules/dagit/packages/core/src/assets/useAssetView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,14 @@ | ||
| import * as React from 'react'; | ||
| import {useStateWithStorage} from '../hooks/useStateWithStorage'; | ||
|
|
||
| const ASSET_VIEW_KEY = 'AssetViewPreference'; | ||
|
|
||
| type View = 'flat' | 'directory' | 'graph'; | ||
|
|
||
| type Output = [View, (update: View) => void]; | ||
| const validateSavedAssetView = (storedValue: any) => | ||
| storedValue === 'flat' || storedValue === 'directory' || storedValue === 'graph' | ||
| ? storedValue | ||
| : 'flat'; | ||
|
|
||
| export const useAssetView = () => { | ||
| const [view, setView] = React.useState<View>(() => { | ||
| const storedValue = window.localStorage.getItem(ASSET_VIEW_KEY); | ||
| if (storedValue === 'flat' || storedValue === 'directory' || storedValue === 'graph') { | ||
| return storedValue; | ||
| } | ||
| return 'flat'; | ||
| }); | ||
|
|
||
| const onChange = React.useCallback((update: View) => { | ||
| window.localStorage.setItem(ASSET_VIEW_KEY, update); | ||
| setView(update); | ||
| }, []); | ||
|
|
||
| return React.useMemo(() => [view, onChange], [view, onChange]) as Output; | ||
| return useStateWithStorage<View>(ASSET_VIEW_KEY, validateSavedAssetView); | ||
| }; |
28 changes: 8 additions & 20 deletions
28
js_modules/dagit/packages/core/src/gantt/useGanttChartMode.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,16 @@ | ||
| import * as React from 'react'; | ||
| import {useStateWithStorage} from '../hooks/useStateWithStorage'; | ||
|
|
||
| import {GanttChartMode} from './Constants'; | ||
|
|
||
| const GANTT_CHART_MODE_KEY = 'GanttChartModePreference'; | ||
|
|
||
| type Output = [GanttChartMode, (update: GanttChartMode) => void]; | ||
| const validateSavedMode = (storedValue: string) => | ||
| storedValue === GanttChartMode.FLAT || | ||
| storedValue === GanttChartMode.WATERFALL || | ||
| storedValue === GanttChartMode.WATERFALL_TIMED | ||
| ? storedValue | ||
| : GanttChartMode.WATERFALL_TIMED; | ||
|
|
||
| export const useGanttChartMode = () => { | ||
| const [mode, setMode] = React.useState<GanttChartMode>(() => { | ||
| const storedValue = window.localStorage.getItem(GANTT_CHART_MODE_KEY); | ||
| if ( | ||
| storedValue === GanttChartMode.FLAT || | ||
| storedValue === GanttChartMode.WATERFALL || | ||
| storedValue === GanttChartMode.WATERFALL_TIMED | ||
| ) { | ||
| return storedValue; | ||
| } | ||
| return GanttChartMode.WATERFALL_TIMED; | ||
| }); | ||
|
|
||
| const onChange = React.useCallback((update: GanttChartMode) => { | ||
| window.localStorage.setItem(GANTT_CHART_MODE_KEY, update); | ||
| setMode(update); | ||
| }, []); | ||
|
|
||
| return React.useMemo(() => [mode, onChange], [mode, onChange]) as Output; | ||
| return useStateWithStorage(GANTT_CHART_MODE_KEY, validateSavedMode); | ||
| }; |
49 changes: 49 additions & 0 deletions
49
js_modules/dagit/packages/core/src/hooks/useStateWithStorage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React from 'react'; | ||
|
|
||
| export function getJSONForKey(key: string) { | ||
| let stored = undefined; | ||
| try { | ||
| stored = window.localStorage.getItem(key); | ||
| if (stored) { | ||
| return JSON.parse(stored); | ||
| } | ||
| } catch (err) { | ||
| if (typeof stored === 'string') { | ||
| // With useStateWithStorage, some values like timezone are moving from `UTC` to `"UTC"` | ||
| // in LocalStorage. To read the old values, pass through raw string values. We can | ||
| // remove this a few months after 0.14.1 is released. | ||
| return stored; | ||
| } | ||
| return undefined; | ||
| } | ||
| } | ||
|
|
||
| export function useStateWithStorage<T>(key: string, validate: (json: any) => T) { | ||
| const [version, setVersion] = React.useState(0); | ||
|
|
||
| // Note: This hook doesn't keep the loaded data in state -- instead it uses a version bit and | ||
| // a ref to load the value from localStorage when the `key` changes or when the `version` changes. | ||
| // This allows us to immediately return the saved value for `key` in the same render. | ||
|
|
||
| const state = React.useMemo(() => { | ||
| return validate(getJSONForKey(key)); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [validate, key, version]); | ||
|
|
||
| const setState = React.useCallback( | ||
| (input: React.SetStateAction<T>) => { | ||
| const next = input instanceof Function ? input(validate(getJSONForKey(key))) : input; | ||
| if (next === undefined) { | ||
| window.localStorage.removeItem(key); | ||
| } else { | ||
| window.localStorage.setItem(key, JSON.stringify(next)); | ||
| } | ||
| setVersion((v) => v + 1); | ||
| return next; | ||
| }, | ||
| [validate, key], | ||
| ); | ||
|
|
||
| const value = React.useMemo(() => [state, setState], [state, setState]); | ||
| return value as [T, React.Dispatch<React.SetStateAction<T | undefined>>]; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.