diff --git a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx index 6323976..86e7e63 100644 --- a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx +++ b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx @@ -359,7 +359,13 @@ const ElementEditor: React.FC = ({
{ if (newValue === "Line Chart") { updateGraphType(selectedBlock, selectedElement, "line"); @@ -568,7 +574,7 @@ const ElementEditor: React.FC = ({
{element?.type === "label-value" && (
- {}} /> + { }} />
= ({ {selectDataMapping === "singleMachine" && (
{singleFields.map((field) => ( - {}} showEyeDropper={!!field.showEyeDropper} /> + { }} showEyeDropper={!!field.showEyeDropper} + /> ))}
@@ -645,7 +658,14 @@ const ElementEditor: React.FC = ({ {multipleFields.map((field) => (
- {}} showEyeDropper={field.label !== "Common Value"} /> + { }} + showEyeDropper={field.label !== "Common Value"} + />
))} diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx index caaae0d..df5136c 100644 --- a/app/src/components/layout/scenes/MainScene.tsx +++ b/app/src/components/layout/scenes/MainScene.tsx @@ -188,7 +188,7 @@ function MainScene() { {!selectedUser && ( <> - {!createNewWindow && loadingProgress > 0 && } + {/* {!createNewWindow && loadingProgress > 0 && } */} {!isPlaying && ( <> {!toggleView && !isComparing && } @@ -254,7 +254,7 @@ function MainScene() { } onDragOver={(event) => event.preventDefault()} > - + {/* */}
); diff --git a/app/src/components/ui/inputs/DataSourceSelector.tsx b/app/src/components/ui/inputs/DataSourceSelector.tsx index 4d8ae66..b222acc 100644 --- a/app/src/components/ui/inputs/DataSourceSelector.tsx +++ b/app/src/components/ui/inputs/DataSourceSelector.tsx @@ -1,10 +1,14 @@ import React, { useState } from "react"; import RegularDropDown from "./RegularDropDown"; import { EyeDroperIcon } from "../../icons/ExportCommonIcons"; +import RegularDropDownID from "./RegularDropDownID"; type DataSourceSelectorProps = { label?: string; - options: string[]; + options: { + id: string; + label: string; + }[]; selected?: string; onSelect: (value: string) => void; eyeDropperActive?: boolean; // initial state @@ -26,7 +30,7 @@ const DataSourceSelector: React.FC = ({
{label}
- void; + search?: boolean; + onClick?: () => void; + onChange?: () => void; +} + +const RegularDropDownID: React.FC = ({ + header, + options, + onSelect, + search = true, +}) => { + const [isOpen, setIsOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState(null); + const [searchTerm, setSearchTerm] = useState(""); + const [filteredOptions, setFilteredOptions] = useState(options); + const dropdownRef = useRef(null); + const [position, setPosition] = useState<{ top: number; left: number; width: number }>({ top: 0, left: 0, width: 0 }); + + useEffect(() => { + if (!isOpen) { + setSelectedOption(null); + setSearchTerm(""); + setFilteredOptions(options); + } + }, [isOpen, options]); + + useEffect(() => { + setSelectedOption(null); + setSearchTerm(""); + setFilteredOptions(options); + }, [header, options]); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setIsOpen(false); + } + }; + document.addEventListener("click", handleClickOutside); + return () => document.removeEventListener("click", handleClickOutside); + }, []); + + useEffect(() => { + if (isOpen && dropdownRef.current) { + const rect = dropdownRef.current.getBoundingClientRect(); + setPosition({ top: rect.bottom + window.scrollY, left: rect.left + window.scrollX, width: rect.width }); + } + }, [isOpen]); + + const toggleDropdown = () => setIsOpen((p) => !p); + + const handleOptionClick = (opt: DropdownOption) => { + setSelectedOption(opt.label); + onSelect(opt.id); + setIsOpen(false); + }; + + const handleSearchChange = (e: React.ChangeEvent) => { + const term = e.target.value; + setSearchTerm(term); + setFilteredOptions(options.filter(o => o.label.toLowerCase().includes(term.toLowerCase()))); + }; + + return ( +
setIsOpen(false)}> +
+
{selectedOption || header}
+
+
+ + {isOpen && createPortal( +
+ {search && ( +
+ +
+ )} + {filteredOptions.length > 0 ? ( + filteredOptions.map((opt) => ( +
handleOptionClick(opt)} title={opt.label}> + {opt.label} +
+ )) + ) : ( +
No options found
+ )} +
, + document.body + )} +
+ ); +} + +export default RegularDropDownID