-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(graph): add button to toggle graph rankDir under feature flag (#…
…12646) Co-authored-by: Philip Fulcher <philip@nrwl.io>
- Loading branch information
1 parent
1c0c00e
commit 5577bfb
Showing
7 changed files
with
169 additions
and
8 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { getGraphService } from './machines/graph.service'; | ||
|
|
||
| export const localStorageRankDirKey = 'nx-dep-graph-rankdir'; | ||
| export type RankDir = 'TB' | 'LR'; | ||
| export let currentRankDir: RankDir; | ||
|
|
||
| export function rankDirInit() { | ||
| const rankDir = | ||
| (localStorage.getItem(localStorageRankDirKey) as RankDir) ?? 'TB'; | ||
| rankDirResolver(rankDir); | ||
| } | ||
|
|
||
| export function rankDirResolver(rankDir: RankDir) { | ||
| currentRankDir = rankDir; | ||
| localStorage.setItem(localStorageRankDirKey, rankDir); | ||
| getGraphService().setRankDir(currentRankDir); | ||
| } | ||
|
|
||
| export function selectValueByRankDirDynamic<T>( | ||
| topBottomSetting: T, | ||
| leftRightSetting: T | ||
| ): () => T { | ||
| return () => selectValueByRankDirStatic(topBottomSetting, leftRightSetting); | ||
| } | ||
|
|
||
| // The function exists because some places do not support selectDynamically | ||
| // It also prevents the dynamic change of rankDir for certain elements like tippy | ||
| export function selectValueByRankDirStatic<T>( | ||
| topBottomSetting: T, | ||
| leftRightSetting: T | ||
| ): T { | ||
| return currentRankDir === 'TB' ? topBottomSetting : leftRightSetting; | ||
| } |
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,12 @@ | ||
| import { ComponentStory, ComponentMeta } from '@storybook/react'; | ||
| import RankDirPanel from './rankdir-panel'; | ||
|
|
||
| export default { | ||
| component: RankDirPanel, | ||
| title: 'Project Graph/RankDirPanel', | ||
| } as ComponentMeta<typeof RankDirPanel>; | ||
|
|
||
| const Template: ComponentStory<typeof RankDirPanel> = () => <RankDirPanel />; | ||
|
|
||
| export const Primary = Template.bind({}); | ||
| Primary.args = {}; |
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,50 @@ | ||
| import { Menu } from '@headlessui/react'; | ||
| import { | ||
| ArrowsUpDownIcon, | ||
| ArrowsRightLeftIcon, | ||
| } from '@heroicons/react/24/outline'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { | ||
| localStorageRankDirKey, | ||
| RankDir, | ||
| rankDirResolver, | ||
| } from '../rankdir-resolver'; | ||
|
|
||
| export default function RankdirPanel(): JSX.Element { | ||
| const [rankDir, setRankDir] = useState( | ||
| (localStorage.getItem(localStorageRankDirKey) as RankDir) || 'TB' | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| rankDirResolver(rankDir); | ||
| }, [rankDir]); | ||
|
|
||
| return ( | ||
| <div className="relative inline-block text-left"> | ||
| <button | ||
| className="inline-flex w-full justify-center rounded-md p-2 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 dark:text-sky-500" | ||
| data-cy="rankdir-change-button" | ||
| > | ||
| <span className="sr-only">Graph layout direction switcher</span> | ||
| {rankDir === 'TB' && ( | ||
| <button | ||
| title="Set graph direction to left-to-right" | ||
| data-cy="lr-rankdir-button" | ||
| onClick={() => setRankDir('LR')} | ||
| > | ||
| <ArrowsUpDownIcon className="h-4 w-4" aria-hidden="true" /> | ||
| </button> | ||
| )} | ||
| {rankDir === 'LR' && ( | ||
| <button | ||
| title="Set graph direction to top-to-bottom" | ||
| data-cy="tb-rankdir-button" | ||
| onClick={() => setRankDir('TB')} | ||
| > | ||
| <ArrowsRightLeftIcon className="h-4 w-4" aria-hidden="true" /> | ||
| </button> | ||
| )} | ||
| </button> | ||
| </div> | ||
| ); | ||
| } |
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
5577bfbThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
nx-dev – ./
nx-five.vercel.app
nx-dev-nrwl.vercel.app
nx.dev
nx-dev-git-master-nrwl.vercel.app