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 { ConfigProvider, Tag, theme } from 'antd'
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+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,148 +890,178 @@ const FilterInput = ({
         ? (token.paddingInlineSM ?? token.paddingXS)
         : (token.paddingInline ?? token.paddingSM)
 
-  return wrapSharedCSSVar(
-    wrapCSSVar(
-      <span
-        className={classNames(
-          affixCls,
-          {
-            [`${affixCls}-focused`]: focused,
-            [`${affixCls}-disabled`]: disabled,
-            [`${affixCls}-sm`]: mergedSize === 'small',
-            [`${affixCls}-lg`]: mergedSize === 'large',
-            [`${affixCls}-rtl`]: direction === 'rtl',
-            [`${prefixCls}-outlined`]: true
-          },
-          compactItemClassnames,
-          cssVarCls,
-          rootCls,
-          hashId,
-          className
-        )}
+  const input = (
+    <span
+      className={classNames(
+        affixCls,
+        {
+          [`${affixCls}-focused`]: focused,
+          [`${affixCls}-disabled`]: disabled,
+          [`${affixCls}-sm`]: mergedSize === 'small',
+          [`${affixCls}-lg`]: mergedSize === 'large',
+          [`${affixCls}-rtl`]: direction === 'rtl',
+          [`${prefixCls}-outlined`]: true
+        },
+        compactItemClassnames,
+        cssVarCls,
+        rootCls,
+        hashId,
+        className
+      )}
+      style={{
+        width: '100%',
+        cursor: disabled ? 'not-allowed' : 'text',
+        ...style,
+        // Affix ::before strut needs inline-flex; display:block stacks it and inflates height.
+        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()
+      }}
+    >
+      <style>{`
+        .filter-input-editor::-webkit-scrollbar {
+          display: none;
+          height: 0;
+        }
+      `}</style>
+      {showPlaceholder && (
+        <span
+          aria-hidden
+          style={{
+            position: 'absolute',
+            insetInlineStart: placeholderPaddingInline,
+            insetInlineEnd: showClear
+              ? placeholderPaddingInline + 22
+              : placeholderPaddingInline,
+            top: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            color: token.colorTextPlaceholder,
+            pointerEvents: 'none',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            zIndex: 1
+          }}
+        >
+          {placeholder}
+        </span>
+      )}
+      <div
+        ref={editorRef}
+        className={classNames(prefixCls, 'filter-input-editor')}
+        role='textbox'
+        aria-multiline='false'
+        aria-disabled={disabled || undefined}
+        contentEditable={!disabled}
+        suppressContentEditableWarning
+        spellCheck={false}
+        onInput={handleInput}
+        onKeyDown={handleKeyDown}
+        onPaste={handlePaste}
+        onCopy={handleCopy}
+        onCut={handleCut}
+        onMouseDown={() => {
+          selectingRef.current = true
+        }}
+        onCompositionStart={() => {
+          composingRef.current = true
+        }}
+        onCompositionEnd={() => {
+          composingRef.current = false
+          syncFromDom()
+        }}
+        onFocus={(event) => {
+          focusedRef.current = true
+          setFocused(true)
+          onFocus?.(event)
+        }}
+        onBlur={(event) => {
+          focusedRef.current = false
+          selectingRef.current = false
+          setFocused(false)
+          const next = normalize(serializeNode(editorRef.current))
+          paint(next)
+          if (next !== valueRef.current) emitChange(next)
+          onBlur?.(event)
+        }}
         style={{
+          // Match antd's `> input.ant-input` resets inside affix-wrapper
+          display: 'block',
+          padding: 0,
+          border: 'none',
+          borderRadius: 0,
+          outline: 'none',
+          boxShadow: 'none',
+          background: 'transparent',
+          flex: 'auto',
+          minWidth: 0,
           width: '100%',
-          cursor: disabled ? 'not-allowed' : 'text',
-          ...style,
-          // Affix ::before strut needs inline-flex; display:block stacks it and inflates height.
-          display: 'inline-flex'
+          fontSize: 'inherit',
+          lineHeight: 'inherit',
+          color: 'inherit',
+          whiteSpace: 'nowrap',
+          overflowX: 'auto',
+          overflowY: 'hidden',
+          scrollbarWidth: 'none',
+          msOverflowStyle: 'none',
+          wordBreak: 'keep-all',
+          overflowWrap: 'normal',
+          caretColor: token.colorText,
+          cursor: disabled ? 'not-allowed' : 'text'
         }}
-        onClick={() => {
-          if (!disabled) editorRef.current?.focus()
-        }}
-      >
-        <style>{`
-          .filter-input-editor::-webkit-scrollbar {
-            display: none;
-            height: 0;
-          }
-        `}</style>
-        {showPlaceholder && (
+      />
+      {showClear && (
+        <span className={`${prefixCls}-suffix`}>
+          <span
+            className={classNames(
+              `${prefixCls}-clear-icon`,
+              `${prefixCls}-clear-icon-has-value`
+            )}
+            role='button'
+            tabIndex={-1}
+            onMouseDown={handleClear}
+          >
+            <CloseCircleFilled />
+          </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',
-              insetInlineStart: placeholderPaddingInline,
-              insetInlineEnd: showClear
-                ? placeholderPaddingInline + 22
-                : placeholderPaddingInline,
-              top: 0,
+              left: 0,
+              right: 0,
               bottom: 0,
-              display: 'flex',
-              alignItems: 'center',
-              color: token.colorTextPlaceholder,
-              pointerEvents: 'none',
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              zIndex: 1
+              height: 0,
+              pointerEvents: 'none'
             }}
-          >
-            {placeholder}
-          </span>
-        )}
-        <div
-          ref={editorRef}
-          className={classNames(prefixCls, 'filter-input-editor')}
-          role='textbox'
-          aria-multiline='false'
-          aria-disabled={disabled || undefined}
-          contentEditable={!disabled}
-          suppressContentEditableWarning
-          spellCheck={false}
-          onInput={handleInput}
-          onKeyDown={handleKeyDown}
-          onPaste={handlePaste}
-          onCopy={handleCopy}
-          onCut={handleCut}
-          onMouseDown={() => {
-            selectingRef.current = true
-          }}
-          onCompositionStart={() => {
-            composingRef.current = true
-          }}
-          onCompositionEnd={() => {
-            composingRef.current = false
-            syncFromDom()
-          }}
-          onFocus={(event) => {
-            focusedRef.current = true
-            setFocused(true)
-            onFocus?.(event)
-          }}
-          onBlur={(event) => {
-            focusedRef.current = false
-            selectingRef.current = false
-            setFocused(false)
-            const next = normalize(serializeNode(editorRef.current))
-            paint(next)
-            if (next !== valueRef.current) emitChange(next)
-            onBlur?.(event)
-          }}
-          style={{
-            // Match antd's `> input.ant-input` resets inside affix-wrapper
-            display: 'block',
-            padding: 0,
-            border: 'none',
-            borderRadius: 0,
-            outline: 'none',
-            boxShadow: 'none',
-            background: 'transparent',
-            flex: 'auto',
-            minWidth: 0,
-            width: '100%',
-            fontSize: 'inherit',
-            lineHeight: 'inherit',
-            color: 'inherit',
-            whiteSpace: 'nowrap',
-            overflowX: 'auto',
-            overflowY: 'hidden',
-            scrollbarWidth: 'none',
-            msOverflowStyle: 'none',
-            wordBreak: 'keep-all',
-            overflowWrap: 'normal',
-            caretColor: token.colorText,
-            cursor: disabled ? 'not-allowed' : 'text'
-          }}
-        />
-        {showClear && (
-          <span className={`${prefixCls}-suffix`}>
-            <span
-              className={classNames(
-                `${prefixCls}-clear-icon`,
-                `${prefixCls}-clear-icon-has-value`
-              )}
-              role='button'
-              tabIndex={-1}
-              onMouseDown={handleClear}
-            >
-              <CloseCircleFilled />
-            </span>
-          </span>
-        )}
-      </span>
-    )
+          />
+        </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 [loading, setLoading] = useState(false)
+  const getModelPropertyValuesRef = useRef(getModelPropertyValues)
+  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)),