Enhance FilterSidebar with dynamic field select sizing

- Introduced a new FieldSelectLabel component to dynamically size select fields based on the longest label, improving layout consistency.
- Updated FilterSidebar to utilize the FieldSelectLabel for better visual alignment of select options.
- Adjusted CSS styles for the filter sidebar field selects to ensure proper width handling.

assets/stylesheets/App.css

@@ -1109,6 +1109,7 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 
 .simple-date-time-property-filter {
   margin: -6px 0;
+  background-color: transparent;
 }
 
 .simple-date-time-property-filter.ant-tree .ant-tree-treenode {
@@ -1130,3 +1131,11 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   top: -16px !important;
   bottom: -24px !important;
 }
+
+/* Size FilterSidebar field selects to the longest label (via labelRender sizer). */
+.filter-sidebar-field-select.ant-select {
+  width: max-content;
+}
+.filter-sidebar-field-select .ant-select-selector {
+  width: max-content !important;
+}

src/components/Dashboard/common/FilterInput.jsx

@@ -1,5 +1,5 @@
-import { useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { ConfigProvider, Tag, theme } from 'antd'
+import { ConfigProvider, Popover, Tag, theme } from 'antd'
 import { CloseCircleFilled } from '@ant-design/icons'
 import PropTypes from 'prop-types'
 import { createRoot } from 'react-dom/client'
@@ -9,6 +9,8 @@ import useSize from 'antd/es/config-provider/hooks/useSize'
 import { useCompactItemContext } from 'antd/es/space/Compact'
 import useStyle, { useSharedStyle } from 'antd/es/input/style'
 import { useThemeContext } from '../context/ThemeContext'
+import SimplePropertyFilter from './SimplePropertyFilter'
+import ScrollBox from './ScrollBox'
 
 // Longer symbols first so ".." / "<>" / ">=" match before "." / "<" / ">".
 // Wildcards (* ?) and @ stay as plain text — they are not operands.
@@ -327,6 +329,25 @@ const chipsHaveLiveRoots = (root, roots) => {
   return true
 }
 
+const toFilterExpression = (values) => {
+  if (!values?.length) return ''
+  const parts = values.map((value) => {
+    if (value && typeof value === 'object') {
+      return String(value._id ?? value.type ?? JSON.stringify(value))
+    }
+    return String(value)
+  })
+  return parts.length === 1 ? parts[0] : parts.join('|')
+}
+
+const fromFilterExpression = (expr) => {
+  if (expr === undefined || expr === null || expr === '') return []
+  if (typeof expr === 'string' && expr.includes('|')) {
+    return expr.split('|').filter((part) => part !== '')
+  }
+  return [expr]
+}
+
 const FilterInput = ({
   value = '',
   onChange,
@@ -338,7 +359,8 @@ const FilterInput = ({
   onFocus,
   onBlur,
   onPressEnter,
-  size
+  size,
+  propertyFilter = null
 }) => {
   const { getPrefixCls, direction } = useContext(ConfigProvider.ConfigContext)
   const prefixCls = getPrefixCls('input')
@@ -734,6 +756,46 @@ const FilterInput = ({
     editorRef.current?.focus()
   }
 
+  const propertyFilterEnabled =
+    !disabled &&
+    propertyFilter?.modelType != null &&
+    propertyFilter?.propertyName != null
+
+  const propertyFilterValue = useMemo(
+    () => fromFilterExpression(internalValue),
+    [internalValue]
+  )
+
+  const handlePropertyFilterChange = useCallback(
+    (keys) => {
+      const next = toFilterExpression(keys)
+      paint(next, focusedRef.current ? next.length : null)
+      emitChange(next)
+    },
+    [emitChange, paint]
+  )
+
+  const propertyFilterContent = propertyFilterEnabled ? (
+    <div
+      onMouseDown={(event) => {
+        // Keep the input focused while interacting with the popover.
+        event.preventDefault()
+      }}
+      style={{ width: 280, height: 220, margin: -4 }}
+    >
+      <ScrollBox inner smallPadding>
+        <div style={{ padding: '12px 16px', minWidth: 0 }}>
+          <SimplePropertyFilter
+            modelType={propertyFilter.modelType}
+            propertyName={propertyFilter.propertyName}
+            value={propertyFilterValue}
+            onChange={handlePropertyFilterChange}
+          />
+        </div>
+      </ScrollBox>
+    </div>
+  ) : null
+
   // Auto-scroll while click-dragging a selection past the visible edges.
   useEffect(() => {
     let raf = 0
@@ -828,8 +890,7 @@ const FilterInput = ({
         ? (token.paddingInlineSM ?? token.paddingXS)
         : (token.paddingInline ?? token.paddingSM)
 
-  return wrapSharedCSSVar(
+  const input = (
-    wrapCSSVar(
     <span
       className={classNames(
         affixCls,
@@ -852,7 +913,10 @@ const FilterInput = ({
         cursor: disabled ? 'not-allowed' : 'text',
         ...style,
         // Affix ::before strut needs inline-flex; display:block stacks it and inflates height.
-          display: 'inline-flex'
+        display: 'inline-flex',
+        // Stay above Compact siblings so the focus ring isn't covered by Select/Button.
+        position: 'relative',
+        zIndex: focused ? 3 : style?.zIndex
       }}
       onClick={() => {
         if (!disabled) editorRef.current?.focus()
@@ -967,9 +1031,37 @@ const FilterInput = ({
           </span>
         </span>
       )}
+      {propertyFilterEnabled && (
+        <Popover
+          open={focused}
+          content={propertyFilterContent}
+          placement='bottomLeft'
+          arrow={false}
+          trigger={[]}
+          styles={{
+            body: {
+              padding: 8
+            }
+          }}
+        >
+          {/* Anchor only — keep Popover from wrapping the Compact item (z-index/focus ring). */}
+          <span
+            aria-hidden
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: 0,
+              pointerEvents: 'none'
+            }}
+          />
+        </Popover>
+      )}
     </span>
   )
-  )
+
+  return wrapSharedCSSVar(wrapCSSVar(input))
 }
 
 FilterInput.propTypes = {
@@ -983,7 +1075,11 @@ FilterInput.propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   onPressEnter: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'middle', 'large'])
+  size: PropTypes.oneOf(['small', 'middle', 'large']),
+  propertyFilter: PropTypes.shape({
+    modelType: PropTypes.string.isRequired,
+    propertyName: PropTypes.string.isRequired
+  })
 }
 
 export default FilterInput

src/components/Dashboard/common/FilterSidebar.jsx

@@ -11,6 +11,36 @@ import {
 import MissingPlaceholder from './MissingPlaceholder'
 import BinIcon from '../../Icons/BinIcon'
 
+const hiddenSizerStyle = {
+  gridArea: '1 / 1',
+  visibility: 'hidden',
+  whiteSpace: 'nowrap'
+}
+
+const FieldSelectLabel = ({ label, options }) => (
+  <span style={{ display: 'inline-grid' }}>
+    <span aria-hidden style={hiddenSizerStyle}>
+      Field
+    </span>
+    {options.map((option) => (
+      <span key={option.value} aria-hidden style={hiddenSizerStyle}>
+        {option.label}
+      </span>
+    ))}
+    <span style={{ gridArea: '1 / 1', whiteSpace: 'nowrap' }}>{label}</span>
+  </span>
+)
+
+FieldSelectLabel.propTypes = {
+  label: PropTypes.node,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.string
+    })
+  ).isRequired
+}
+
 const FilterSidebar = ({
   type,
   filter = {},
@@ -39,7 +69,17 @@ const FilterSidebar = ({
       if (initialEmptyFields.current.has(k) && v === '') continue
       visible[k] = v
     }
-    setLocalFilter(visible)
+    setLocalFilter((prev) => {
+      const prevKeys = Object.keys(prev)
+      const nextKeys = Object.keys(visible)
+      if (
+        prevKeys.length === nextKeys.length &&
+        nextKeys.every((key) => prev[key] === visible[key])
+      ) {
+        return prev
+      }
+      return visible
+    })
   }, [filter])
 
   const debouncedFilterChange = useCallback(
@@ -159,14 +199,22 @@ const FilterSidebar = ({
                 value={row.field || undefined}
                 onChange={(v) => changeField(row.field, v)}
                 options={availableOptions(row.field)}
-                style={{ minWidth: 80 }}
                 allowClear={false}
+                labelRender={({ label }) => (
+                  <FieldSelectLabel label={label} options={fieldOptions} />
+                )}
+                style={{ flexShrink: 0 }}
+                classNames={{ root: 'filter-sidebar-field-select' }}
               />
               <FilterInput
                 placeholder='Value'
                 value={row.value}
                 onChange={(value) => changeValue(row.field, value)}
                 style={{ flex: 1 }}
+                propertyFilter={{
+                  modelType: type,
+                  propertyName: row.field
+                }}
               />
               <Button
                 icon={<CloseOutlined />}

src/components/Dashboard/common/SimpleDateTimePropertyFilter.jsx

@@ -539,7 +539,9 @@ const SimpleDateTimePropertyFilter = ({
           onClick={(e) => e.stopPropagation()}
           style={{ minWidth: 0 }}
         />
-        <Text style={{ minWidth: 0 }}>{node.title}</Text>
+        <Text style={{ minWidth: 0, paddingInlineStart: '8px' }}>
+          {node.title}
+        </Text>
       </Flex>
     )
   }

src/components/Dashboard/common/SimplePropertyFilter.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext, useMemo } from 'react'
+import { useState, useEffect, useContext, useMemo, useRef } from 'react'
 import { Flex, Checkbox, Spin, Typography } from 'antd'
 import PropTypes from 'prop-types'
 import { ApiServerContext } from '../context/ApiServerContext'
@@ -45,6 +45,9 @@ const matchOptions = (options, selected) => {
   return options.filter((option) => selectedKeys.has(getOptionKey(option)))
 }
 
+// Survive table reloads / popover remounts without refetching the same property.
+const optionsCache = new Map()
+
 const SimplePropertyFilter = ({
   modelType,
   propertyName,
@@ -53,8 +56,17 @@ const SimplePropertyFilter = ({
   search = ''
 }) => {
   const { getModelPropertyValues } = useContext(ApiServerContext)
-  const [options, setOptions] = useState([])
+  const getModelPropertyValuesRef = useRef(getModelPropertyValues)
-  const [loading, setLoading] = useState(false)
+  getModelPropertyValuesRef.current = getModelPropertyValues
+
+  const cacheKey =
+    modelType && propertyName ? `${modelType}:${propertyName}` : null
+  const [options, setOptions] = useState(
+    () => (cacheKey && optionsCache.get(cacheKey)) || []
+  )
+  const [loading, setLoading] = useState(
+    () => !(cacheKey && optionsCache.has(cacheKey))
+  )
   const [localChecked, setLocalChecked] = useState(null)
 
   const property = useMemo(
@@ -67,14 +79,30 @@ const SimplePropertyFilter = ({
     let cancelled = false
 
     const loadOptions = async () => {
-      if (!modelType || !propertyName || isDateTimeProperty(property)) return
+      if (!modelType || !propertyName || isDateTimeProperty(property)) {
+        setLoading(false)
+        return
+      }
+
+      const key = `${modelType}:${propertyName}`
+      const cached = optionsCache.get(key)
+      if (cached) {
+        setOptions(cached)
+        setLoading(false)
+        return
+      }
+
       setLoading(true)
       try {
-        const values = await getModelPropertyValues(modelType, propertyName)
+        const values = await getModelPropertyValuesRef.current(
+          modelType,
+          propertyName
+        )
         if (cancelled) return
         const unique = [
           ...new Set((values || []).filter((v) => v != null && v !== ''))
         ]
+        optionsCache.set(key, unique)
         setOptions(unique)
       } finally {
         if (!cancelled) setLoading(false)
@@ -85,7 +113,9 @@ const SimplePropertyFilter = ({
     return () => {
       cancelled = true
     }
-  }, [modelType, propertyName, getModelPropertyValues, property])
+    // Intentionally omit getModelPropertyValues — context recreates it on every
+    // provider render (e.g. table fetchLoading), which would refetch endlessly.
+  }, [modelType, propertyName, property])
 
   const valueKey = useMemo(
     () => JSON.stringify((value || []).map(getOptionKey)),