326 Allow layers to be filtered for visible features

src/components/ControlPanel/index.tsx

@@ -86,7 +86,6 @@ const ControlPanel: React.FC<TimeProps> = ({ bounds, handleSave, isDirty }) => {
           >
             <Button
               style={buttonStyle}
-              color='primary'
               variant={viewportFrozen ? 'solid' : 'outlined'}
               onClick={toggleFreezeViewport}
             >

src/components/Layers/LayersToolbar.tsx

@@ -4,7 +4,8 @@ import {
   ShrinkOutlined,
   CloseCircleOutlined,
   DeleteOutlined,
-  LineChartOutlined
+  FilterFilled,
+  FilterOutlined
 } from '@ant-design/icons'
 import { ToolButton } from './ToolButton'
 import { CopyButton } from './CopyButton'
@@ -18,16 +19,18 @@ interface LayersToolbarProps {
   isExpanded: boolean
   hasSelection: boolean
   hasTemporalFeature: boolean
+  hasTimeFilter: boolean
+  onFilterForTime: (value: boolean) => void
 }
 
 export const LayersToolbar: React.FC<LayersToolbarProps> = ({
   onCollapse,
   onClearSelection,
   onDelete,
-  onGraph,
   isExpanded,
   hasSelection,
-  hasTemporalFeature
+  hasTimeFilter,
+  onFilterForTime
 }) => {
   return (
     <div style={{ position: 'relative' }}>
@@ -75,7 +78,14 @@ export const LayersToolbar: React.FC<LayersToolbarProps> = ({
           />
           <CopyButton />
           <PasteButton />
-          <ToolButton
+          <Button
+            size={'middle'}
+            onClick={() => onFilterForTime(!hasTimeFilter)}
+          >
+            {hasTimeFilter ? <FilterFilled /> : <FilterOutlined />}
+          </Button>
+
+          {/* <ToolButton
             onClick={onGraph}
             disabled={!hasTemporalFeature}
             icon={<LineChartOutlined />}
@@ -84,7 +94,7 @@ export const LayersToolbar: React.FC<LayersToolbarProps> = ({
                 ? 'View graph of selected features'
                 : 'Select a time-related feature to enable graphs'
             }
-          />
+          /> */}
         </Button.Group>
       </Flex>
     </div>

src/components/Layers/index.tsx

@@ -46,6 +46,7 @@ const Layers: React.FC<LayerProps> = ({ openGraph, splitterWidths }) => {
   // Model data is derived from features and handlers
   // Track management is handled by a custom hook
   const [expandedKeys, setExpandedKeys] = useState<string[]>([NODE_TRACKS, 'nav'])
+  const [useTimeFilter, setUseTimeFilter] = useState(false)
 
   const theFeatures = preview ? preview.data.features : features
 
@@ -137,6 +138,8 @@ const Layers: React.FC<LayerProps> = ({ openGraph, splitterWidths }) => {
         isExpanded={isExpanded}
         hasSelection={selection.length > 0}
         hasTemporalFeature={temporalFeatureSelected}
+        hasTimeFilter={useTimeFilter}
+        onFilterForTime={setUseTimeFilter}
       />
       <TreeView
         treeData={model}