Display a tip about how to select nodes (#134)

Bowen7 · Aug 30, 2024 · 6649585 · 6649585
1 parent 2b64e35
commit 6649585
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/public/locales/cn/translation.json b/public/locales/cn/translation.json
@@ -4,7 +4,7 @@
   "Legends": "图例",
   "Edit": "编辑",
   "Test": "测试",
-  "You can select nodes by dragging or clicking": "可以通过点击或拖拽选中节点",
+  "You can select nodes by dragging or clicking on the graph": "可以通过点击或拖拽选中节点",
   "Input a regular expression": "输入一条正则表达式",
   "Characters": "字符",
   "Direct match characters": "直接匹配字符串",

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -38,6 +38,7 @@ export const GRAPH_WITHOUT_ROOT_PADDING_HORIZONTAL = 5
 
 // storage key
 export const STORAGE_TEST_CASES = 'test-cases'
+export const STORAGE_GRAPH_TIP_VISIBLE = 'graph-tip-visible'
 
 // url search param
 export const SEARCH_PARAM_REGEX = 'r'

diff --git a/src/modules/home/index.tsx b/src/modules/home/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { ViewVerticalIcon } from '@radix-ui/react-icons'
-import { useAtom, useSetAtom } from 'jotai'
+import { ArrowUpIcon, ViewVerticalIcon } from '@radix-ui/react-icons'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { useEffectOnce, useLocalStorage, useUpdateEffect } from 'react-use'
 import { useCopyToClipboard } from 'usehooks-ts'
 import { useTranslation } from 'react-i18next'
@@ -16,11 +16,13 @@ import { genPermalink } from '@/utils/helpers'
 import {
   SEARCH_PARAM_REGEX,
   SEARCH_PARAM_TESTS,
+  STORAGE_GRAPH_TIP_VISIBLE,
   STORAGE_TEST_CASES,
 } from '@/constants'
 import {
   astAtom,
   clearSelectedAtom,
+  selectedIdsAtom,
   updateFlagsAtom,
 } from '@/atom'
 import { useToast } from '@/components/ui/use-toast'
@@ -31,13 +33,15 @@ function Home() {
   const [searchParams, setSearchParams] = useSearchParams()
   const [editorCollapsed, setEditorCollapsed] = useState(false)
   const [ast, setAst] = useAtom(astAtom)
+  const selectIds = useAtomValue(selectedIdsAtom)
   const clearSelected = useSetAtom(clearSelectedAtom)
   const updateFlags = useSetAtom(updateFlagsAtom)
   const { t } = useTranslation()
   const { toast } = useToast()
   const [, copy] = useCopyToClipboard()
 
   const [, setCases] = useLocalStorage<string[]>(STORAGE_TEST_CASES, [''])
+  const [graphTipVisible, setGraphTipVisible] = useLocalStorage<boolean>(STORAGE_GRAPH_TIP_VISIBLE, true)
   const shouldGenAst = useRef(true)
   const shouldParseRegex = useRef(true)
 
@@ -110,6 +114,12 @@ function Home() {
     }
   }, [ast])
 
+  useEffect(() => {
+    if (graphTipVisible && selectIds.length > 0) {
+      setGraphTipVisible(false)
+    }
+  }, [selectIds, graphTipVisible, setGraphTipVisible])
+
   const handleFlagsChange = (flags: string[]) => updateFlags(flags)
 
   const handleCopyPermalink = () => {
@@ -125,7 +135,14 @@ function Home() {
     >
       <div className={clsx('flex-1 relative flex flex-col min-w-0 bg-graph-bg', { 'justify-center': !graphShow })}>
         {graphShow && (
-          <ScrollArea className="flex-1 min-h-0 h-full">
+          <ScrollArea className="flex-1 min-h-0 h-full relative">
+            {graphTipVisible
+            && (
+              <div className="absolute bg-graph-bg bottom-0 left-1/2 -translate-x-1/2 z-10 text-sm inline-flex items-center py-1">
+                <ArrowUpIcon className="w-4 h-4 mr-2" />
+                {t('You can select nodes by dragging or clicking on the graph')}
+              </div>
+            )}
             <div className="flex items-center justify-center p-8 h-full">
               <Graph regex={regex} ast={ast} errorMsg={errorMsg} />
             </div>