function MainComponent() { const [papers, setPapers] = React.useState([]); const [selectedCategories, setSelectedCategories] = React.useState([]); const [selectedTags, setSelectedTags] = React.useState([]); React.useEffect(()=>{ fetchPapers().then(setPapers); }, []); function fetchPapers() { // Mock fetch function return Promise.resolve([ { id: 1, title: "Paper Title 1", author: "Author Name 1", abstract: "Abstract 1...", category: "Category 1", tags: [ "Tag 1" ], x: 50, y: 50, color: "#FF5733" }, { id: 2, title: "Paper Title 2", author: "Author Name 2", abstract: "Abstract 2...", category: "Category 2", tags: [ "Tag 2" ], x: 100, y: 100, color: "#DAF7A6" } ]); } function handleCategoryChange(e) { const category = e.target.name; if (e.target.checked) { setSelectedCategories([ ...selectedCategories, category ]); } else { setSelectedCategories(selectedCategories.filter((c)=>c !== category)); } } function handleTagChange(e) { const tag = e.target.name; if (e.target.checked) { setSelectedTags([ ...selectedTags, tag ]); } else { setSelectedTags(selectedTags.filter((t)=>t !== tag)); } } return /*#__PURE__*/ React.createElement("div", { className: "flex font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] p-4 border-r border-gray-200", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-lg font-semibold text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Filters"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-2 text-md text-gray-600", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "Category 1", className: "mr-2", onChange: handleCategoryChange, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }), "Category 1"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "Category 2", className: "mr-2", onChange: handleCategoryChange, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), "Category 2"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-2 text-md text-gray-600", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Tags"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "Tag 1", className: "mr-2", onChange: handleTagChange, __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }), "Tag 1"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "Tag 2", className: "mr-2", onChange: handleTagChange, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }), "Tag 2")))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[600px]", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, papers.filter((paper)=>selectedCategories.length === 0 || selectedCategories.includes(paper.category)).filter((paper)=>selectedTags.length === 0 || paper.tags.some((tag)=>selectedTags.includes(tag))).map((paper)=>/*#__PURE__*/ React.createElement("div", { key: paper.id, className: "absolute cursor-pointer transition-all duration-300 ease-in-out", style: { top: `${paper.y}px`, left: `${paper.x}px`, backgroundColor: selectedCategories.includes(paper.category) || selectedTags.some((tag)=>paper.tags.includes(tag)) ? paper.color : "#ccc", width: "100px", height: "100px", borderRadius: "50%" }, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onMouseEnter: (e)=>e.currentTarget.style.display = "block", onMouseLeave: (e)=>e.currentTarget.style.display = "none", className: "absolute w-full transform -translate-x-1/2 -translate-y-1/2 p-4 bg-white border border-gray-200 rounded shadow-lg", style: { left: "50%", top: "100%", display: "none" }, __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-md text-gray-700", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, paper.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, paper.author), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, paper.abstract))))))); }