diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
similarity index 100%
rename from web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
rename to web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx
similarity index 99%
rename from web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
rename to web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx
index 646c8bd93d..09d3e4317c 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx
@@ -54,6 +54,7 @@ export default function ChartView({ appId, headerRight }: IChartViewProps) {
             <SimpleSelect
               items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
               className='mt-0 !w-40'
+              notClearable={true}
               onSelect={(item) => {
                 const id = item.value
                 const value = TIME_PERIOD_MAPPING[id]?.value ?? '-1'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
index e0c09e739e..bc07a799e4 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ChartView from './chartView'
+import ChartView from './chart-view'
 import TracingPanel from './tracing/panel'
 import ApikeyInfoPanel from '@/app/components/app/overview/apikey-info-panel'
 
diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index 288dcf8c8b..cf55c0d68d 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -25,7 +25,7 @@ import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { fetchWorkflowDraft } from '@/service/workflow'
 import ContentDialog from '@/app/components/base/content-dialog'
 import Button from '@/app/components/base/button'
-import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView'
+import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'
 import Divider from '../base/divider'
 import type { Operation } from './app-operations'
 import AppOperations from './app-operations'
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 1f29d5bd6a..aa0cf02215 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -192,7 +192,6 @@ const SimpleSelect: FC<ISelectProps> = ({
   const localPlaceholder = placeholder || t('common.placeholder.select')
 
   const [selectedItem, setSelectedItem] = useState<Item | null>(null)
-  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     let defaultSelect = null
@@ -215,88 +214,83 @@ const SimpleSelect: FC<ISelectProps> = ({
         }
       }}
     >
-      <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
-        {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem)}</ListboxButton>}
-        {!renderTrigger && (
-          <ListboxButton onClick={() => {
-              // get data-open, use setTimeout to ensure the attribute is set
-              setTimeout(() => {
-                if (listboxRef.current) {
-                  const isOpen = listboxRef.current.getAttribute('data-open') !== null
-                  setOpen(isOpen)
-                  onOpenChange?.(isOpen)
-                }
-              })
-          }} className={classNames(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
-            <span className={classNames('system-sm-regular block truncate text-left text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
-            <span className="absolute inset-y-0 right-0 flex items-center pr-2">
-              {isLoading ? <RiLoader4Line className='h-3.5 w-3.5 animate-spin text-text-secondary' />
-              : (selectedItem && !notClearable)
-                ? (
-                  <XMarkIcon
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      setSelectedItem(null)
-                      onSelect({ name: '', value: '' })
-                    }}
-                    className="h-4 w-4 cursor-pointer text-text-quaternary"
-                    aria-hidden="false"
-                  />
-                )
-                : (
-                  open ? (
-                    <ChevronUpIcon
-                      className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
-                      aria-hidden="true"
-                    />
-                  ) : (
-                    <ChevronDownIcon
-                      className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
-                      aria-hidden="true"
+      {({ open }) => (
+        <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
+          {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem)}</ListboxButton>}
+          {!renderTrigger && (
+            <ListboxButton onClick={() => {
+                onOpenChange?.(open)
+            }} className={classNames(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
+              <span className={classNames('system-sm-regular block truncate text-left text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
+              <span className="absolute inset-y-0 right-0 flex items-center pr-2">
+                {isLoading ? <RiLoader4Line className='h-3.5 w-3.5 animate-spin text-text-secondary' />
+                : (selectedItem && !notClearable)
+                  ? (
+                    <XMarkIcon
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        setSelectedItem(null)
+                        onSelect({ name: '', value: '' })
+                      }}
+                      className="h-4 w-4 cursor-pointer text-text-quaternary"
+                      aria-hidden="false"
                     />
                   )
-                )}
-            </span>
-          </ListboxButton>
-        )}
+                  : (
+                    open ? (
+                      <ChevronUpIcon
+                        className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <ChevronDownIcon
+                        className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
+                        aria-hidden="true"
+                      />
+                    )
+                  )}
+              </span>
+            </ListboxButton>
+          )}
 
-        {(!disabled) && (
-          <ListboxOptions className={classNames('absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-1 py-1 text-base shadow-lg backdrop-blur-sm focus:outline-none sm:text-sm', optionWrapClassName)}>
-            {items.map((item: Item) => (
-              <ListboxOption
-                key={item.value}
-                className={
-                  classNames(
-                    'relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover',
-                    optionClassName,
-                  )
-                }
-                value={item}
-                disabled={disabled}
-              >
-                {({ /* active, */ selected }) => (
-                  <>
-                    {renderOption
-                      ? renderOption({ item, selected })
-                      : (<>
-                        <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
-                        {selected && !hideChecked && (
-                          <span
-                            className={classNames(
-                              'absolute inset-y-0 right-0 flex items-center pr-4 text-text-accent',
-                            )}
-                          >
-                            <RiCheckLine className="h-4 w-4" aria-hidden="true" />
-                          </span>
-                        )}
-                      </>)}
-                  </>
-                )}
-              </ListboxOption>
-            ))}
-          </ListboxOptions>
-        )}
-      </div>
+          {(!disabled) && (
+            <ListboxOptions className={classNames('absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-1 py-1 text-base shadow-lg backdrop-blur-sm focus:outline-none sm:text-sm', optionWrapClassName)}>
+              {items.map((item: Item) => (
+                <ListboxOption
+                  key={item.value}
+                  className={
+                    classNames(
+                      'relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover',
+                      optionClassName,
+                    )
+                  }
+                  value={item}
+                  disabled={disabled}
+                >
+                  {({ /* active, */ selected }) => (
+                    <>
+                      {renderOption
+                        ? renderOption({ item, selected })
+                        : (<>
+                          <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
+                          {selected && !hideChecked && (
+                            <span
+                              className={classNames(
+                                'absolute inset-y-0 right-0 flex items-center pr-4 text-text-accent',
+                              )}
+                            >
+                              <RiCheckLine className="h-4 w-4" aria-hidden="true" />
+                            </span>
+                          )}
+                        </>)}
+                    </>
+                  )}
+                </ListboxOption>
+              ))}
+            </ListboxOptions>
+          )}
+        </div>
+      )}
     </Listbox>
   )
 }