assets/stylesheets/App.css

@@ -1109,7 +1109,6 @@ 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 {
@@ -1131,11 +1130,3 @@ 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, useMemo, useRef, useState } from 'react'
+import { useCallback, useContext, useEffect, useRef, useState } from 'react'
-import { ConfigProvider, Popover, Tag, theme } from 'antd'
+import { ConfigProvider, Tag, theme } from 'antd'
 import { CloseCircleFilled } from '@ant-design/icons'
 import PropTypes from 'prop-types'
 import { createRoot } from 'react-dom/client'
@@ -9,8 +9,6 @@ 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.
@@ -329,25 +327,6 @@ 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,
@@ -359,8 +338,7 @@ const FilterInput = ({
   onFocus,
   onBlur,
   onPressEnter,
-  size,
+  size
-  propertyFilter = null
 }) => {
   const { getPrefixCls, direction } = useContext(ConfigProvider.ConfigContext)
   const prefixCls = getPrefixCls('input')
@@ -756,46 +734,6 @@ 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
@@ -890,7 +828,8 @@ const FilterInput = ({
         ? (token.paddingInlineSM ?? token.paddingXS)
         : (token.paddingInline ?? token.paddingSM)
 
-  const input = (
+  return wrapSharedCSSVar(
+    wrapCSSVar(
       <span
         className={classNames(
           affixCls,
@@ -913,10 +852,7 @@ 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()
@@ -1031,37 +967,9 @@ 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 = {
@@ -1075,11 +983,7 @@ 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,36 +11,6 @@ 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 = {},
@@ -69,17 +39,7 @@ const FilterSidebar = ({
       if (initialEmptyFields.current.has(k) && v === '') continue
       visible[k] = v
     }
-    setLocalFilter((prev) => {
+    setLocalFilter(visible)
-      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(
@@ -199,22 +159,14 @@ 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,9 +539,7 @@ const SimpleDateTimePropertyFilter = ({
           onClick={(e) => e.stopPropagation()}
           style={{ minWidth: 0 }}
         />
-        <Text style={{ minWidth: 0, paddingInlineStart: '8px' }}>
+        <Text style={{ minWidth: 0 }}>{node.title}</Text>
-          {node.title}
-        </Text>
       </Flex>
     )
   }

src/components/Dashboard/common/SimplePropertyFilter.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext, useMemo, useRef } from 'react'
+import { useState, useEffect, useContext, useMemo } from 'react'
 import { Flex, Checkbox, Spin, Typography } from 'antd'
 import PropTypes from 'prop-types'
 import { ApiServerContext } from '../context/ApiServerContext'
@@ -45,9 +45,6 @@ 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,
@@ -56,17 +53,8 @@ const SimplePropertyFilter = ({
   search = ''
 }) => {
   const { getModelPropertyValues } = useContext(ApiServerContext)
-  const getModelPropertyValuesRef = useRef(getModelPropertyValues)
+  const [options, setOptions] = useState([])
-  getModelPropertyValuesRef.current = getModelPropertyValues
+  const [loading, setLoading] = useState(false)
-
-  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(
@@ -79,30 +67,14 @@ const SimplePropertyFilter = ({
     let cancelled = false
 
     const loadOptions = async () => {
-      if (!modelType || !propertyName || isDateTimeProperty(property)) {
+      if (!modelType || !propertyName || isDateTimeProperty(property)) return
-        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 getModelPropertyValuesRef.current(
+        const values = await getModelPropertyValues(modelType, propertyName)
-          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)
@@ -113,9 +85,7 @@ const SimplePropertyFilter = ({
     return () => {
       cancelled = true
     }
-    // Intentionally omit getModelPropertyValues — context recreates it on every
+  }, [modelType, propertyName, getModelPropertyValues, property])
-    // provider render (e.g. table fetchLoading), which would refetch endlessly.
-  }, [modelType, propertyName, property])
 
   const valueKey = useMemo(
     () => JSON.stringify((value || []).map(getOptionKey)),