Palette filter (#120)

* Added ProjectSettings class and endpoint for toggling filters

* Added toggles for the filters in the project settings menu

* Filters now apply to palette in the builder, showing only elements from the filters which are set to true

* Endpoint for enabling or disabling filters now no longer relies on /toggle, but on /enable or /disable respectively instead. Also added some more styling to the project settings page

Author: Daan0709

src/main/frontend/app/components/inputs/rounded-toggle.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx'
+
+interface RoundedToggleProperties {
+  label: string
+  enabled?: boolean
+  onClick?: () => void
+  className?: string
+}
+
+export default function RoundedToggle({
+  label,
+  enabled = true,
+  onClick,
+  className,
+}: Readonly<RoundedToggleProperties>) {
+  return (
+    <span
+      onClick={onClick}
+      className={clsx(
+        'cursor-pointer rounded-full border px-3 py-1 text-sm font-medium select-none',
+        enabled
+          ? 'border-foreground-active hover:bg-foreground-active' // active
+          : 'border-border/30 text-foreground/30 hover:border-border', // disabled/faded
+        className,
+      )}
+    >
+      {label}
+    </span>
+  )
+}

src/main/frontend/app/routes/builder/context/builder-context.tsx

@@ -6,13 +6,20 @@ import SortedElements from '~/routes/builder/context/sorted-elements'
 import Search from '~/components/search/search'
 import variables from '../../../../environment/environment'
 import { useFFDoc } from '@frankframework/ff-doc/react'
+import { useProjectStore } from '~/stores/project-store'
 
 export default function BuilderContext() {
   const { setAttributes, setNodeId } = useNodeContextStore((state) => state)
   const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({})
   const [searchTerm, setSearchTerm] = useState('')
+  const project = useProjectStore((state) => state.project)
   const FRANK_DOC_URL = variables.frankDocJsonUrl
-  const { elements } = useFFDoc(FRANK_DOC_URL)
+  const { filters, elements } = useFFDoc(FRANK_DOC_URL)
+  const enabledFilters = project
+    ? Object.entries(project.filters)
+        .filter(([_, enabled]) => enabled)
+        .map(([filterName]) => filterName)
+    : []
 
   useEffect(() => {
     if (!elements) return
@@ -39,6 +46,27 @@ export default function BuilderContext() {
     }
   }
 
+  const shouldShowElement = (elementName: string) => {
+    // Show all elements if no filters are applied
+    if (!filters || enabledFilters.length === 0) return true
+    if (!filters.TYPE || enabledFilters.length === 0) return true
+
+    // Check if element exists in any TYPE category
+    const foundInFilters = Object.values(filters).some((categoryGroup) =>
+      Object.values(categoryGroup).some((items) => items.includes(elementName)),
+    )
+
+    // If the element is not part of any category then its always visible, this would apply for things like Exits, jobs etc.
+    if (!foundInFilters) return true
+
+    // Otherwise, only show if its category is enabled
+    return Object.values(filters).some((categoryGroup) =>
+      Object.entries(categoryGroup).some(
+        ([categoryName, items]) => enabledFilters.includes(categoryName) && items.includes(elementName),
+      ),
+    )
+  }
+
   const groupElementsByType = (elements: Record<string, any>) => {
     const grouped: Record<string, any[]> = {}
     const seen = new Set<string>()
@@ -54,7 +82,11 @@ export default function BuilderContext() {
     return grouped
   }
 
-  const groupedElements = elements ? groupElementsByType(elements) : {}
+  const visibleElements = Object.fromEntries(
+    Object.entries(elements || {}).filter(([_, value]) => shouldShowElement(value.name)),
+  )
+
+  const groupedElements = elements ? groupElementsByType(visibleElements) : {}
 
   const filteredGroupedElements = Object.entries(groupedElements).reduce(
     (accumulator, [type, items]) => {

src/main/frontend/app/routes/builder/context/sorted-elements.tsx

@@ -15,7 +15,7 @@ interface Properties {
 }
 
 export default function SortedElements({ type, items, onDragStart, searchTerm }: Readonly<Properties>) {
-  const [isExpanded, setIsExpanded] = useState(true)
+  const [isExpanded, setIsExpanded] = useState(false)
 
   const toggleExpansion = () => {
     setIsExpanded(!isExpanded)

src/main/frontend/app/routes/projects/project-tile.tsx

@@ -3,7 +3,7 @@ import CodeIcon from '/icons/solar/Code.svg?react'
 import type { Project } from './projects'
 import { useNavigate } from 'react-router'
 import { useProjectStore } from '~/stores/project-store'
-import {useTreeStore} from '~/stores/tree-store';
+import { useTreeStore } from '~/stores/tree-store'
 
 interface ProjectTileProperties {
   project: Project

src/main/frontend/app/routes/projects/projects.tsx

@@ -4,6 +4,7 @@ import ProjectTile from '~/routes/projects/project-tile'
 export interface Project {
   name: string
   filenames: string[]
+  filters: Record<string, boolean> // key = filter name (e.g. "HTTP"), value = true/false
 }
 
 export default function Projects() {

src/main/frontend/app/routes/settings/pages/project-settings.tsx

@@ -0,0 +1,69 @@
+import { Link } from 'react-router'
+import RoundedToggle from '~/components/inputs/rounded-toggle'
+import { useProjectStore } from '~/stores/project-store'
+
+export default function ProjectSettings() {
+  const project = useProjectStore((state) => state.project)
+  const setProject = useProjectStore((state) => state.setProject)
+
+  const handleToggleFilter = async (filter: string) => {
+    if (!project) return
+
+    const currentlyEnabled = project.filters[filter]
+    const action = currentlyEnabled ? 'disable' : 'enable'
+
+    try {
+      const response = await fetch(
+        `http://localhost:8080/projects/${encodeURIComponent(project.name)}/filters/${encodeURIComponent(
+          filter,
+        )}/${action}`,
+        { method: 'PATCH' },
+      )
+
+      if (!response.ok) throw new Error(`Failed to toggle filter ${filter}`)
+
+      // Update the project in the store
+      const updatedFilters = { ...project.filters, [filter]: !currentlyEnabled }
+      setProject({ ...project, filters: updatedFilters })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <div className="space-y-3 p-6">
+      {project ? (
+        // Project loaded: show filters
+        <>
+          <div className="border-border bg-background rounded-md border p-6">
+            <h2 className="text-lg font-semibold">{project.name}</h2>
+            <p className="mb-4">Apply project wide settings</p>
+          </div>
+          <div className="border-border bg-background rounded-md border p-6">
+            <h2 className="text-lg font-semibold">Filters</h2>
+            <p className="mb-4">Enable or disable filters to only show elements of those types in the studio</p>
+            <div className="flex flex-wrap gap-2">
+              {Object.entries(project.filters).map(([filter, enabled]) => (
+                <RoundedToggle
+                  key={filter}
+                  label={filter}
+                  enabled={enabled}
+                  onClick={() => handleToggleFilter(filter)}
+                />
+              ))}
+            </div>
+          </div>
+        </>
+      ) : (
+        // No project loaded
+        <div className="border-border bg-background text-muted-foreground flex h-64 items-center justify-center rounded-md border p-6 text-center text-sm">
+          Load a project in the&nbsp;
+          <Link to="/" className="font-medium text-blue-600 hover:underline">
+            Project Overview
+          </Link>
+          &nbsp;to adjust the settings
+        </div>
+      )}
+    </div>
+  )
+}

src/main/frontend/app/routes/settings/settings-menu-items.ts

@@ -4,6 +4,7 @@ import WidgetIcon from '/icons/solar/Widget.svg?react'
 import RulerCrossPenIcon from '/icons/solar/Ruler Cross Pen.svg?react'
 import CodeIcon from '/icons/solar/Code.svg?react'
 import GeneralSettings from '~/routes/settings/pages/general-settings'
+import ProjectSettings from './pages/project-settings'
 
 export type SettingsMenuItem = TreeItem<SettingsMenuItemData>
 
@@ -37,6 +38,7 @@ const SettingsMenuItems = {
       title: 'Projects',
       description: 'Project settings',
       icon: WidgetIcon,
+      content: ProjectSettings,
     },
   },
   studio: {

src/main/java/org/frankframework/flow/project/Project.java

@@ -2,13 +2,18 @@
 
 import java.util.ArrayList;
 
+import org.frankframework.flow.projectsettings.FilterType;
+import org.frankframework.flow.projectsettings.ProjectSettings;
+
 public class Project {
 	private String name;
 	private ArrayList<String> filenames;
+	private ProjectSettings projectSettings;
 
 	public Project(String name) {
 		this.name = name;
 		this.filenames = new ArrayList<>();
+		this.projectSettings = new ProjectSettings();
 	}
 
 	public String getName() {
@@ -25,4 +30,20 @@ public ArrayList<String> getFilenames() {
 	public void addFilenames(String filename) {
 		this.filenames.add(filename);
 	}
+
+	public ProjectSettings getProjectSettings(){
+		return this.projectSettings;
+	}
+
+	public boolean isFilterEnabled(FilterType type) {
+		return projectSettings.isEnabled(type);
+	}
+
+	public void enableFilter(FilterType type){
+		projectSettings.setEnabled(type, true);
+	}
+
+	public void disableFilter(FilterType type){
+		projectSettings.setEnabled(type, false);
+	}
 }

src/main/java/org/frankframework/flow/project/ProjectController.java

@@ -1,7 +1,9 @@
 package org.frankframework.flow.project;
 
+import org.frankframework.flow.projectsettings.FilterType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PatchMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -24,17 +26,18 @@ public ResponseEntity<List<ProjectDTO>> getAllProjects() {
 		List<ProjectDTO> projectDTOList = new ArrayList<>();
 		List<Project> projects = projectService.getProjects();
 
-		for (Project project : projects){
+		for (Project project : projects) {
 			ProjectDTO projectDTO = new ProjectDTO();
 			projectDTO.name = project.getName();
 			projectDTO.filenames = project.getFilenames();
+			projectDTO.filters = project.getProjectSettings().getFilters();
 			projectDTOList.add(projectDTO);
 		}
 		return ResponseEntity.ok(projectDTOList);
 	}
 
 	@GetMapping("/{projectname}")
-	public ResponseEntity<ProjectDTO> getProject(@PathVariable String projectname){
+	public ResponseEntity<ProjectDTO> getProject(@PathVariable String projectname) {
 		try {
 			Project project = projectService.getProject(projectname);
 			if (project == null) {
@@ -43,14 +46,15 @@ public ResponseEntity<ProjectDTO> getProject(@PathVariable String projectname){
 			ProjectDTO projectDTO = new ProjectDTO();
 			projectDTO.name = project.getName();
 			projectDTO.filenames = project.getFilenames();
+			projectDTO.filters = project.getProjectSettings().getFilters();
 			return ResponseEntity.ok(projectDTO);
 		} catch (Exception e) {
 			return ResponseEntity.badRequest().build();
 		}
 	}
 
 	@PostMapping("/{projectname}")
-	public ResponseEntity<ProjectDTO> createProject(@PathVariable String projectname){
+	public ResponseEntity<ProjectDTO> createProject(@PathVariable String projectname) {
 		try {
 			projectService.createProject(projectname);
 			ProjectDTO projectDTO = new ProjectDTO();
@@ -60,4 +64,68 @@ public ResponseEntity<ProjectDTO> createProject(@PathVariable String projectname
 			return ResponseEntity.badRequest().build();
 		}
 	}
+
+	@PatchMapping("/{projectname}/filters/{type}/enable")
+	public ResponseEntity<ProjectDTO> enableFilter(
+			@PathVariable String projectname,
+			@PathVariable String type) {
+				try {
+			Project project = projectService.getProject(projectname);
+			if (project == null) {
+				return ResponseEntity.notFound().build();
+			}
+
+			// Parse enum safely
+			FilterType filterType = FilterType.valueOf(type.toUpperCase());
+
+			// Enable the filter
+			project.enableFilter(filterType);
+
+			// Return updated DTO
+			ProjectDTO dto = new ProjectDTO();
+			dto.name = project.getName();
+			dto.filenames = project.getFilenames();
+			dto.filters = project.getProjectSettings().getFilters();
+
+			return ResponseEntity.ok(dto);
+
+		} catch (IllegalArgumentException e) {
+			// thrown if invalid type string
+			return ResponseEntity.badRequest().body(null);
+		} catch (Exception e) {
+			return ResponseEntity.internalServerError().build();
+		}
+	}
+
+	@PatchMapping("/{projectname}/filters/{type}/disable")
+	public ResponseEntity<ProjectDTO> disableFilter(
+			@PathVariable String projectname,
+			@PathVariable String type) {
+				try {
+			Project project = projectService.getProject(projectname);
+			if (project == null) {
+				return ResponseEntity.notFound().build();
+			}
+
+			// Parse enum safely
+			FilterType filterType = FilterType.valueOf(type.toUpperCase());
+
+			// Disable the filter
+			project.disableFilter(filterType);
+
+			// Return updated DTO
+			ProjectDTO dto = new ProjectDTO();
+			dto.name = project.getName();
+			dto.filenames = project.getFilenames();
+			dto.filters = project.getProjectSettings().getFilters();
+
+			return ResponseEntity.ok(dto);
+
+		} catch (IllegalArgumentException e) {
+			// thrown if invalid type string
+			return ResponseEntity.badRequest().body(null);
+		} catch (Exception e) {
+			return ResponseEntity.internalServerError().build();
+		}
+	}
 }

src/main/java/org/frankframework/flow/project/ProjectDTO.java

@@ -1,8 +1,12 @@
 package org.frankframework.flow.project;
 
 import java.util.List;
+import java.util.Map;
+
+import org.frankframework.flow.projectsettings.FilterType;
 
 public class ProjectDTO {
 	public String name;
 	public List<String> filenames;
+	public Map<FilterType, Boolean> filters;
 }