From 8ea0011cbb8541b2eaeeaa524b45f5cacb0d489b Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 13:18:10 +0100 Subject: [PATCH 01/20] chore: format --- src/components/eln/ElnFinder.js | 270 ++++++++++++++++---------------- 1 file changed, 132 insertions(+), 138 deletions(-) diff --git a/src/components/eln/ElnFinder.js b/src/components/eln/ElnFinder.js index ae8d8d17..e03c49d8 100644 --- a/src/components/eln/ElnFinder.js +++ b/src/components/eln/ElnFinder.js @@ -11,158 +11,152 @@ import styles from "./Eln.module.css"; // const elnData = require("@site/static/assets/eln_test.json"); function ElnFinder(props) { - // State for ELN data + // State for ELN data - const [elnData, setElnData] = useState(null); - const [error, setError] = useState(null); + const [elnData, setElnData] = useState(null); + const [error, setError] = useState(null); - // State for filtering + // State for filtering - const [filter, setFilter] = useImmer( - props.subDisc ? { subDisc: props.subDisc } : {} - ); + const [filter, setFilter] = useImmer( + props.subDisc ? { subDisc: props.subDisc } : {}, + ); - // Fetch ELN data + // Fetch ELN data - useEffect(() => { - fetch("../../assets/elnData.json") - .then((response) => response.json()) - .then((data) => { - setElnData(data); - console.log(data); - }) - .catch((error) => { - setError(error); - console.error(error); - }); - }, []); - - // Catch if fetch is still loading - - if (!elnData) { - return Loading...; - } - - // Define working variables - - let elnTable = []; - let allSubDisc = []; - let allLicenses = []; - - // Parse timestamp of ELN data - - const dateDownloaded = moment(elnData.date); - const relativeDate = moment(dateDownloaded).fromNow(); - - // Assemble essential ELN data - - try { - const chemElns = elnData["_embedded"].searchResult["_embedded"].objects; - - chemElns.map((eln) => { - let subDisc = []; - eln["_embedded"].indexableObject.metadata["dc.subject"].map( - (discipline) => - discipline.value.startsWith("Chemistry:") - ? subDisc.push(discipline.value.split(":")[1]) - : null - ); - - elnTable.push({ - name: eln["_embedded"].indexableObject.name, - url: eln["_embedded"].indexableObject.metadata[ - "dc.identifier.uri" - ][0].value, - license: - eln["_embedded"].indexableObject.metadata[ - "K.lizenzmodell" - ][0].value, - desc: eln["_embedded"].indexableObject.metadata[ - "dc.description.abstract" - ][0].value, - subDisc: subDisc, - }); - allSubDisc.push(subDisc); - allLicenses.push( - eln["_embedded"].indexableObject.metadata["K.lizenzmodell"][0] - .value - ); - }); - - allSubDisc = [...new Set(allSubDisc.flat())]; - allLicenses = [...new Set(allLicenses)]; - } catch (error) { + useEffect(() => { + fetch("../../assets/elnData.json") + .then((response) => response.json()) + .then((data) => { + setElnData(data); + console.log(data); + }) + .catch((error) => { + setError(error); console.error(error); - return Failed to process ELN data.; - } - - // Filter ELN data based on filter state + }); + }, []); + + // Catch if fetch is still loading + + if (!elnData) { + return Loading...; + } + + // Define working variables + + let elnTable = []; + let allSubDisc = []; + let allLicenses = []; + + // Parse timestamp of ELN data + + const dateDownloaded = moment(elnData.date); + const relativeDate = moment(dateDownloaded).fromNow(); + + // Assemble essential ELN data + + try { + const chemElns = elnData["_embedded"].searchResult["_embedded"].objects; + + chemElns.map((eln) => { + let subDisc = []; + eln["_embedded"].indexableObject.metadata["dc.subject"].map( + (discipline) => + discipline.value.startsWith("Chemistry:") + ? subDisc.push(discipline.value.split(":")[1]) + : null, + ); + + elnTable.push({ + name: eln["_embedded"].indexableObject.name, + url: eln["_embedded"].indexableObject.metadata["dc.identifier.uri"][0] + .value, + license: + eln["_embedded"].indexableObject.metadata["K.lizenzmodell"][0].value, + desc: eln["_embedded"].indexableObject.metadata[ + "dc.description.abstract" + ][0].value, + subDisc: subDisc, + }); + allSubDisc.push(subDisc); + allLicenses.push( + eln["_embedded"].indexableObject.metadata["K.lizenzmodell"][0].value, + ); + }); - const filteredTable = elnTable.filter((eln) => { - if (Object.keys(filter).length === 0) { - return true; - } + allSubDisc = [...new Set(allSubDisc.flat())]; + allLicenses = [...new Set(allLicenses)]; + } catch (error) { + console.error(error); + return Failed to process ELN data.; + } - if (filter.subDisc && !eln.subDisc.includes(filter.subDisc)) { - return false; - } + // Filter ELN data based on filter state - if (filter.license && eln.license !== filter.license) { - return false; - } + const filteredTable = elnTable.filter((eln) => { + if (Object.keys(filter).length === 0) { + return true; + } - if ( - filter.text && - !JSON.stringify(eln) - .toLowerCase() - .includes(filter.text.toLowerCase()) - ) { - return false; - } + if (filter.subDisc && !eln.subDisc.includes(filter.subDisc)) { + return false; + } - return true; - }); + if (filter.license && eln.license !== filter.license) { + return false; + } - // Determine number of results and generate output - - const numberOfResults = filteredTable.length; - - let resultOutput = null; - - switch (numberOfResults) { - case elnTable.length: - resultOutput = null; - break; - case 0: - resultOutput = "No results found."; - break; - case 1: - resultOutput = "1 result found."; - break; - default: - resultOutput = numberOfResults + " results found."; - break; + if ( + filter.text && + !JSON.stringify(eln).toLowerCase().includes(filter.text.toLowerCase()) + ) { + return false; } - // Render ELN Finder component - - return ( - - -
- - -
- - ); + return true; + }); + + // Determine number of results and generate output + + const numberOfResults = filteredTable.length; + + let resultOutput = null; + + switch (numberOfResults) { + case elnTable.length: + resultOutput = null; + break; + case 0: + resultOutput = "No results found."; + break; + case 1: + resultOutput = "1 result found."; + break; + default: + resultOutput = numberOfResults + " results found."; + break; + } + + // Render ELN Finder component + + return ( + + +
+ + +
+ + ); } export default ElnFinder; From 574a598ddf77a352c17a0d70f4f75dab076c9b75 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 13:20:27 +0100 Subject: [PATCH 02/20] chore: styles --- src/components/eln/ElnCard.js | 66 ++++---- src/components/eln/ElnFinder.js | 2 +- src/components/eln/ElnFinderPharm.js | 230 +++++++++++++-------------- src/components/eln/ElnStack.js | 14 +- src/components/eln/ElnStatus.js | 27 ++-- 5 files changed, 165 insertions(+), 174 deletions(-) diff --git a/src/components/eln/ElnCard.js b/src/components/eln/ElnCard.js index 7da873ad..4934a397 100644 --- a/src/components/eln/ElnCard.js +++ b/src/components/eln/ElnCard.js @@ -6,40 +6,40 @@ import ShortenDesc from "../commons/ShortenDesc.js"; import styles from "./Eln.module.css"; function ElnCard({ eln, filter, setFilter }) { - return ( -
-
-

{eln.name}

- -
- -
- -
- {eln.subDisc && eln.subDisc.length > 0 && ( -
- {eln.subDisc.map((subdisc, idx) => { - let isActive = filter.subDisc === subdisc; - return ( - - ); - })} -
- )} + return ( +
+
+

{eln.name}

+ +
+ +
+ +
+ {eln.subDisc && eln.subDisc.length > 0 && ( +
+ {eln.subDisc.map((subdisc, idx) => { + let isActive = filter.subDisc === subdisc; + return ( + + ); + })}
- ); + )} +
+ ); } export default ElnCard; diff --git a/src/components/eln/ElnFinder.js b/src/components/eln/ElnFinder.js index e03c49d8..2cbc6834 100644 --- a/src/components/eln/ElnFinder.js +++ b/src/components/eln/ElnFinder.js @@ -6,7 +6,7 @@ import ElnStatus from "./ElnStatus"; import ElnFilter from "./elnFilter/ElnFilter"; import ElnStack from "./ElnStack"; -import styles from "./Eln.module.css"; +import styles from "./styles"; // const elnData = require("@site/static/assets/eln_test.json"); diff --git a/src/components/eln/ElnFinderPharm.js b/src/components/eln/ElnFinderPharm.js index 9f828d11..b75f1870 100644 --- a/src/components/eln/ElnFinderPharm.js +++ b/src/components/eln/ElnFinderPharm.js @@ -11,141 +11,135 @@ import styles from "./Eln.module.css"; // const elnData = require("@site/static/assets/eln_test.json"); function ElnFinderPharm(props) { - // State for ELN data + // State for ELN data - const [elnData, setElnData] = useState(null); - const [error, setError] = useState(null); + const [elnData, setElnData] = useState(null); + const [error, setError] = useState(null); - // State for filtering + // State for filtering - const [filter, setFilter] = useImmer( - props.subDisc ? { subDisc: props.subDisc } : {} - ); + const [filter, setFilter] = useImmer( + props.subDisc ? { subDisc: props.subDisc } : {}, + ); - // Fetch ELN data + // Fetch ELN data - useEffect(() => { - fetch("../../assets/elnDataPharm.json") - .then((response) => response.json()) - .then((data) => { - setElnData(data); - console.log(data); - }) - .catch((error) => { - setError(error); - console.error(error); - }); - }, []); + useEffect(() => { + fetch("../../assets/elnDataPharm.json") + .then((response) => response.json()) + .then((data) => { + setElnData(data); + console.log(data); + }) + .catch((error) => { + setError(error); + console.error(error); + }); + }, []); - // Catch if fetch is still loading + // Catch if fetch is still loading - if (!elnData) { - return Loading...; - } + if (!elnData) { + return Loading...; + } - // Define working variables - - let elnTable = []; - let allLicenses = []; - - // Parse timestamp of ELN data - - const dateDownloaded = moment(elnData.date); - const relativeDate = moment(dateDownloaded).fromNow(); - - // Assemble essential ELN data - - try { - const chemElns = elnData["_embedded"].searchResult["_embedded"].objects; - - chemElns.map((eln) => { - elnTable.push({ - name: eln["_embedded"].indexableObject.name, - url: eln["_embedded"].indexableObject.metadata[ - "dc.identifier.uri" - ][0].value, - license: - eln["_embedded"].indexableObject.metadata[ - "K.lizenzmodell" - ][0].value, - desc: eln["_embedded"].indexableObject.metadata[ - "dc.description.abstract" - ][0].value, - }); - allLicenses.push( - eln["_embedded"].indexableObject.metadata["K.lizenzmodell"][0] - .value - ); - }); - - allLicenses = [...new Set(allLicenses)]; - } catch (error) { - console.error(error); - return Failed to process ELN data.; - } + // Define working variables + + let elnTable = []; + let allLicenses = []; - // Filter ELN data based on filter state + // Parse timestamp of ELN data - const filteredTable = elnTable.filter((eln) => { - if (Object.keys(filter).length === 0) { - return true; - } + const dateDownloaded = moment(elnData.date); + const relativeDate = moment(dateDownloaded).fromNow(); - if (filter.license && eln.license !== filter.license) { - return false; - } + // Assemble essential ELN data - if ( - filter.text && - !JSON.stringify(eln) - .toLowerCase() - .includes(filter.text.toLowerCase()) - ) { - return false; - } + try { + const chemElns = elnData["_embedded"].searchResult["_embedded"].objects; - return true; + chemElns.map((eln) => { + elnTable.push({ + name: eln["_embedded"].indexableObject.name, + url: eln["_embedded"].indexableObject.metadata["dc.identifier.uri"][0] + .value, + license: + eln["_embedded"].indexableObject.metadata["K.lizenzmodell"][0].value, + desc: eln["_embedded"].indexableObject.metadata[ + "dc.description.abstract" + ][0].value, + }); + allLicenses.push( + eln["_embedded"].indexableObject.metadata["K.lizenzmodell"][0].value, + ); }); - // Determine number of results and generate output - - const numberOfResults = filteredTable.length; - - let resultOutput = null; - - switch (numberOfResults) { - case elnTable.length: - resultOutput = null; - break; - case 0: - resultOutput = "No results found."; - break; - case 1: - resultOutput = "1 result found."; - break; - default: - resultOutput = numberOfResults + " results found."; - break; + allLicenses = [...new Set(allLicenses)]; + } catch (error) { + console.error(error); + return Failed to process ELN data.; + } + + // Filter ELN data based on filter state + + const filteredTable = elnTable.filter((eln) => { + if (Object.keys(filter).length === 0) { + return true; + } + + if (filter.license && eln.license !== filter.license) { + return false; + } + + if ( + filter.text && + !JSON.stringify(eln).toLowerCase().includes(filter.text.toLowerCase()) + ) { + return false; } - // Render ELN Finder component - - return ( - - -
- - -
- - ); + return true; + }); + + // Determine number of results and generate output + + const numberOfResults = filteredTable.length; + + let resultOutput = null; + + switch (numberOfResults) { + case elnTable.length: + resultOutput = null; + break; + case 0: + resultOutput = "No results found."; + break; + case 1: + resultOutput = "1 result found."; + break; + default: + resultOutput = numberOfResults + " results found."; + break; + } + + // Render ELN Finder component + + return ( + + +
+ + +
+ + ); } export default ElnFinderPharm; diff --git a/src/components/eln/ElnStack.js b/src/components/eln/ElnStack.js index 42b59029..4042873a 100644 --- a/src/components/eln/ElnStack.js +++ b/src/components/eln/ElnStack.js @@ -3,13 +3,13 @@ import React from "react"; import ElnCard from "./ElnCard"; function ElnStack({ filteredTable, filter, setFilter }) { - return ( - - {filteredTable.map((eln, idx) => ( - - ))} - - ); + return ( + + {filteredTable.map((eln, idx) => ( + + ))} + + ); } export default ElnStack; diff --git a/src/components/eln/ElnStatus.js b/src/components/eln/ElnStatus.js index 108f58e2..a94fb8b2 100644 --- a/src/components/eln/ElnStatus.js +++ b/src/components/eln/ElnStatus.js @@ -1,21 +1,18 @@ import Link from "@docusaurus/Link"; function ElnStatus({ relativeDate }) { - return ( -

- - Data kindly provided by{" "} - - ELN Finder - {" "} - ( - {relativeDate !== "Invalid date" - ? "last updated " + relativeDate - : "last update unknown"} - ). - -

- ); + return ( +

+ + Data kindly provided by{" "} + ELN Finder ( + {relativeDate !== "Invalid date" + ? "last updated " + relativeDate + : "last update unknown"} + ). + +

+ ); } export default ElnStatus; From 79ca5acd40c96857b74baf61ce00986282e3fd5a Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 13:21:30 +0100 Subject: [PATCH 03/20] feat: refactor styles import to include required lbe classes --- src/components/eln/ElnCard.js | 2 +- src/components/eln/ElnFinderPharm.js | 2 +- src/components/eln/styles.js | 6 ++++++ 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 src/components/eln/styles.js diff --git a/src/components/eln/ElnCard.js b/src/components/eln/ElnCard.js index 4934a397..0561f66f 100644 --- a/src/components/eln/ElnCard.js +++ b/src/components/eln/ElnCard.js @@ -3,7 +3,7 @@ import RepoButton from "@site/src/components/repos/RepoButton"; import FilterButton from "./elnFilter/FilterButton.js"; import ShortenDesc from "../commons/ShortenDesc.js"; -import styles from "./Eln.module.css"; +import styles from "./styles"; function ElnCard({ eln, filter, setFilter }) { return ( diff --git a/src/components/eln/ElnFinderPharm.js b/src/components/eln/ElnFinderPharm.js index b75f1870..8dbb4cd8 100644 --- a/src/components/eln/ElnFinderPharm.js +++ b/src/components/eln/ElnFinderPharm.js @@ -6,7 +6,7 @@ import ElnStatus from "./ElnStatus"; import ElnFilter from "./elnFilter/ElnFilter"; import ElnStack from "./ElnStack"; -import styles from "./Eln.module.css"; +import styles from "./styles"; // const elnData = require("@site/static/assets/eln_test.json"); diff --git a/src/components/eln/styles.js b/src/components/eln/styles.js new file mode 100644 index 00000000..952781bb --- /dev/null +++ b/src/components/eln/styles.js @@ -0,0 +1,6 @@ +import elnStyles from "./Eln.module.css"; +import lbeStyles from "../lbe/lbe.module.css"; + +const styles = { ...elnStyles, ...lbeStyles }; + +export default styles; From 735fa6318801160a82ffdd324c6a1ed61d779c51 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 13:23:27 +0100 Subject: [PATCH 04/20] chore: styles --- src/components/eln/elnFilter/ElnFilter.js | 144 +++++++++---------- src/components/eln/elnFilter/FilterButton.js | 42 +++--- src/components/eln/elnFilter/TextSearch.js | 62 ++++---- 3 files changed, 123 insertions(+), 125 deletions(-) diff --git a/src/components/eln/elnFilter/ElnFilter.js b/src/components/eln/elnFilter/ElnFilter.js index 20f47689..daf3388d 100644 --- a/src/components/eln/elnFilter/ElnFilter.js +++ b/src/components/eln/elnFilter/ElnFilter.js @@ -8,91 +8,89 @@ import styles from "../Eln.module.css"; // Assemble buttons for filtering section function ButtonFilters({ allSubDisc, allLicenses, filter, setFilter }) { - let subDiscButtons = []; + let subDiscButtons = []; - if (allSubDisc) { - subDiscButtons = ["All", ...allSubDisc]; - } - let licenseButtons = ["All", ...allLicenses]; + if (allSubDisc) { + subDiscButtons = ["All", ...allSubDisc]; + } + let licenseButtons = ["All", ...allLicenses]; - // Check if active prop should be handed to FilterButton + // Check if active prop should be handed to FilterButton - function isActive(type, label) { - // check if filter value is equal to label + function isActive(type, label) { + // check if filter value is equal to label - if (filter[type] === label) { - return true; - } + if (filter[type] === label) { + return true; + } - // check if object is empty and label is "All" + // check if object is empty and label is "All" - if ( - (label === "All" && Object.keys(filter).length === 0) || - (label === "All" && !filter[type]) - ) { - return true; - } else { - return false; - } + if ( + (label === "All" && Object.keys(filter).length === 0) || + (label === "All" && !filter[type]) + ) { + return true; + } else { + return false; } + } - return ( - - {subDiscButtons.length > 0 && ( -
-
Filter by subdisciplines
-

- {subDiscButtons.map((subDisc, idx) => ( - - ))} -

-
- )} -
-
Filter by license
-

- {licenseButtons.map((license, idx) => ( - - ))} -

-
- - ); + return ( + + {subDiscButtons.length > 0 && ( +
+
Filter by subdisciplines
+

+ {subDiscButtons.map((subDisc, idx) => ( + + ))} +

+
+ )} +
+
Filter by license
+

+ {licenseButtons.map((license, idx) => ( + + ))} +

+
+ + ); } function ElnFilter({ - allSubDisc, - allLicenses, - filter, - setFilter, - resultOutput, + allSubDisc, + allLicenses, + filter, + setFilter, + resultOutput, }) { - return ( -
-
- -
-
- -
-
- ); + return ( +
+
+ +
+
+ +
+
+ ); } export default ElnFilter; diff --git a/src/components/eln/elnFilter/FilterButton.js b/src/components/eln/elnFilter/FilterButton.js index ee278ba4..0f0e9dd7 100644 --- a/src/components/eln/elnFilter/FilterButton.js +++ b/src/components/eln/elnFilter/FilterButton.js @@ -3,30 +3,30 @@ import clsx from "clsx"; import styles from "../Eln.module.css"; function FilterButton(props) { - const handleClick = () => { - if (props.label === "All") { - props.setFilter((draft) => { - delete draft[props.type]; - }); - } else { - props.setFilter((draft) => { - draft[props.type] = props.label; - }); - } - }; + const handleClick = () => { + if (props.label === "All") { + props.setFilter((draft) => { + delete draft[props.type]; + }); + } else { + props.setFilter((draft) => { + draft[props.type] = props.label; + }); + } + }; - // Conditional styling for button + // Conditional styling for button - let buttonClass = clsx("lbe__filterbutton", { - [styles["eln__filterbutton--secondary"]]: props.secondary, - "lbe__filterbutton--active": props.active, - }); + let buttonClass = clsx("lbe__filterbutton", { + [styles["eln__filterbutton--secondary"]]: props.secondary, + "lbe__filterbutton--active": props.active, + }); - return ( - - ); + return ( + + ); } export default FilterButton; diff --git a/src/components/eln/elnFilter/TextSearch.js b/src/components/eln/elnFilter/TextSearch.js index 46580d9d..4afdd2b0 100644 --- a/src/components/eln/elnFilter/TextSearch.js +++ b/src/components/eln/elnFilter/TextSearch.js @@ -1,38 +1,38 @@ import styles from "../Eln.module.css"; function TextSearch({ resultOutput, filter, setFilter }) { - const handleChange = (e) => - setFilter((draft) => { - draft.text = e.target.value; - }); + const handleChange = (e) => + setFilter((draft) => { + draft.text = e.target.value; + }); - return ( -
- - - {filter.text && ( - - )} -   - - {resultOutput} -
- ); + return ( +
+ + + {filter.text && ( + + )} +   + + {resultOutput} +
+ ); } export default TextSearch; From b3a6de3f5cd51e161d214124c0156c26dd6cec88 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 16:00:11 +0100 Subject: [PATCH 05/20] chore: formatting --- src/components/repos/RepoButton.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/repos/RepoButton.js b/src/components/repos/RepoButton.js index 1093b8c2..c8def5e4 100644 --- a/src/components/repos/RepoButton.js +++ b/src/components/repos/RepoButton.js @@ -4,16 +4,16 @@ import Link from "@docusaurus/Link"; import IconExternalLink from "@theme/Icon/ExternalLink"; function RepoButton(props) { - return ( - - - - - - ); + return ( + + + + + + ); } export default RepoButton; From 6fe181affda4b4d011e1e0b17e26067a3c20ac4d Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 16:03:00 +0100 Subject: [PATCH 06/20] fix: update styles import and class names in FilterButton and RepoButton components --- src/components/eln/elnFilter/FilterButton.js | 6 +++--- src/components/repos/RepoButton.js | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/eln/elnFilter/FilterButton.js b/src/components/eln/elnFilter/FilterButton.js index 0f0e9dd7..fdfd515a 100644 --- a/src/components/eln/elnFilter/FilterButton.js +++ b/src/components/eln/elnFilter/FilterButton.js @@ -1,6 +1,6 @@ import clsx from "clsx"; -import styles from "../Eln.module.css"; +import styles from "../styles"; function FilterButton(props) { const handleClick = () => { @@ -17,9 +17,9 @@ function FilterButton(props) { // Conditional styling for button - let buttonClass = clsx("lbe__filterbutton", { + let buttonClass = clsx(styles.lbeFilterbutton, { [styles["eln__filterbutton--secondary"]]: props.secondary, - "lbe__filterbutton--active": props.active, + [styles.lbeFilterbuttonActive]: props.active, }); return ( diff --git a/src/components/repos/RepoButton.js b/src/components/repos/RepoButton.js index c8def5e4..bb9ff97b 100644 --- a/src/components/repos/RepoButton.js +++ b/src/components/repos/RepoButton.js @@ -3,11 +3,13 @@ import Link from "@docusaurus/Link"; import IconExternalLink from "@theme/Icon/ExternalLink"; +import styles from "../lbe/lbe.module.css"; + function RepoButton(props) { return ( - From c8af244fb66a138e8c179b65215539dd8ff2eb24 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 16:07:11 +0100 Subject: [PATCH 07/20] chore: formatting --- src/components/commons/ShortenDesc.js | 62 +++++++++++++-------------- 1 file changed, 30 insertions(+), 32 deletions(-) diff --git a/src/components/commons/ShortenDesc.js b/src/components/commons/ShortenDesc.js index 1d0ac69f..8f1fd5af 100644 --- a/src/components/commons/ShortenDesc.js +++ b/src/components/commons/ShortenDesc.js @@ -3,41 +3,39 @@ import React, { useState } from "react"; // shorten the description of the experiment up to the next blank, comma or period after 100 characters function ShortenDesc({ desc, length }) { - const [collapsed, setCollapsed] = useState(true); + const [collapsed, setCollapsed] = useState(true); - if (desc.length <= length) { - return {desc}; - } + if (desc.length <= length) { + return {desc}; + } - return ( - - {collapsed ? ( - setCollapsed(!collapsed)} - style={{ cursor: "pointer" }} - > - {desc.slice(0, length) + - desc.slice(length).split(/[\s,\.]/)[0] + - " ..."} + return ( + + {collapsed ? ( + setCollapsed(!collapsed)} + style={{ cursor: "pointer" }} + > + {desc.slice(0, length) + + desc.slice(length).split(/[\s,\.]/)[0] + + " ..."} - - - ) : ( - setCollapsed(!collapsed)} - style={{ cursor: "pointer" }} - > - {desc} - - - )} - - ); + + + ) : ( + setCollapsed(!collapsed)} + style={{ cursor: "pointer" }} + > + {desc} + + + )} + + ); } export default ShortenDesc; From bf73d2487f459d5725e07fa82a3636551987d697 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 16:08:13 +0100 Subject: [PATCH 08/20] feat: add styles for authorTrigger button in ShortenDesc component --- src/components/commons/ShortenDesc.js | 8 ++++---- src/components/commons/ShortenDesc.module.css | 8 ++++++++ 2 files changed, 12 insertions(+), 4 deletions(-) create mode 100644 src/components/commons/ShortenDesc.module.css diff --git a/src/components/commons/ShortenDesc.js b/src/components/commons/ShortenDesc.js index 8f1fd5af..3fd8e1fc 100644 --- a/src/components/commons/ShortenDesc.js +++ b/src/components/commons/ShortenDesc.js @@ -1,5 +1,7 @@ import React, { useState } from "react"; +import styles from "./ShortenDesc.module.css"; + // shorten the description of the experiment up to the next blank, comma or period after 100 characters function ShortenDesc({ desc, length }) { @@ -21,7 +23,7 @@ function ShortenDesc({ desc, length }) { desc.slice(length).split(/[\s,\.]/)[0] + " ..."} - + ) : ( {desc} - + )} diff --git a/src/components/commons/ShortenDesc.module.css b/src/components/commons/ShortenDesc.module.css new file mode 100644 index 00000000..6ba8d61a --- /dev/null +++ b/src/components/commons/ShortenDesc.module.css @@ -0,0 +1,8 @@ +.authorTrigger { + border: none; + background: none; + scale: 90%; + color: var(--ifm-color-primary); + padding: 0 0.5em; + margin: 0; +} From 9b390a8f07b066d45ac6e760dd798ecc175eafda Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 16:10:16 +0100 Subject: [PATCH 09/20] chore: formatting --- src/components/eln/Eln.module.css | 156 +++++++++++++++--------------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/src/components/eln/Eln.module.css b/src/components/eln/Eln.module.css index 24a2f225..4b06294c 100644 --- a/src/components/eln/Eln.module.css +++ b/src/components/eln/Eln.module.css @@ -1,126 +1,126 @@ /********** ELN-Finder ************/ .eln { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; } /* Search / Filter section */ .eln__searchfilter { - display: flex; - flex-direction: row; - width: 100%; - padding: 0.75rem; - border: 1px dashed var(--ifm-color-primary); - margin-bottom: 0.5rem; + display: flex; + flex-direction: row; + width: 100%; + padding: 0.75rem; + border: 1px dashed var(--ifm-color-primary); + margin-bottom: 0.5rem; } .eln__searchfilter__text { - translate: 0 20%; - min-width: 240px; + translate: 0 20%; + min-width: 240px; } .eln__searchfilter__buttons { - flex-grow: 1; + flex-grow: 1; } .eln__searchfilter__search { - display: flex; - flex-direction: column; - padding: 0.5rem 0; + display: flex; + flex-direction: column; + padding: 0.5rem 0; } .eln__searchfilter__search > span { - text-align: center; + text-align: center; } .eln__searchfilter__search > em { - color: var(--ifm-color-primary); - text-align: center; + color: var(--ifm-color-primary); + text-align: center; } .eln__searchfilter__search__button { - position: absolute; - right: 1.5rem; - top: 50%; - transform: translate(0, -50%); - padding: 0; - background: none; - border: none; - line-height: 1rem; + position: absolute; + right: 1.5rem; + top: 50%; + transform: translate(0, -50%); + padding: 0; + background: none; + border: none; + line-height: 1rem; } .eln__card { - width: 49.5%; - padding: 0.75rem; - border: 1px dashed var(--ifm-color-primary); - margin-bottom: 0.5rem; - transition: all var(--n4c-transform-time) ease-in-out; + width: 49.5%; + padding: 0.75rem; + border: 1px dashed var(--ifm-color-primary); + margin-bottom: 0.5rem; + transition: all var(--n4c-transform-time) ease-in-out; } .eln__card__header { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } .eln__card__desc { - padding: 0.5rem; + padding: 0.5rem; } @media screen and (max-width: 1400px) { - .eln { - display: flex; - flex-direction: column; - } - - .eln__searchfilter { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - padding: 0.75rem; - border: 1px dashed var(--ifm-color-primary); - margin-bottom: 0.75rem; - } - - .eln__searchfilter__text, - .eln__searchfilter__buttons { - width: 100%; - translate: 0; - } - - .eln__searchfilter__search { - display: flex; - flex-direction: row; - align-items: center; - } - - .eln__card { - width: 100%; - padding: 0.75rem; - border: 1px dashed var(--ifm-color-primary); - margin-bottom: 0.75rem; - transition: all var(--n4c-transform-time) ease-in-out; - } + .eln { + display: flex; + flex-direction: column; + } + + .eln__searchfilter { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + padding: 0.75rem; + border: 1px dashed var(--ifm-color-primary); + margin-bottom: 0.75rem; + } + + .eln__searchfilter__text, + .eln__searchfilter__buttons { + width: 100%; + translate: 0; + } + + .eln__searchfilter__search { + display: flex; + flex-direction: row; + align-items: center; + } + + .eln__card { + width: 100%; + padding: 0.75rem; + border: 1px dashed var(--ifm-color-primary); + margin-bottom: 0.75rem; + transition: all var(--n4c-transform-time) ease-in-out; + } } .eln__card__link { - display: flex; - padding: 0.5rem; + display: flex; + padding: 0.5rem; } .eln__licenseChip--opensource { - background-color: var(--ifm-color-primary); - color: white; - font-weight: bold; + background-color: var(--ifm-color-primary); + color: white; + font-weight: bold; } .eln__filterbutton--secondary { - background-color: var(--ifm-breadcrumb-item-background-active); - color: var(--ifm-color-primary); - font-weight: unset; + background-color: var(--ifm-breadcrumb-item-background-active); + color: var(--ifm-color-primary); + font-weight: unset; } From d6d4fb8a411a5e6295feed25af8cdbba9ee9a641 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 16:17:26 +0100 Subject: [PATCH 10/20] refactor: classnames in camelcase for better code readability refactor: classnames in camelcase for better code readability refactor: classnames in camelcase for better code readability refactor: classnames in camelcase for better code readability --- src/components/eln/Eln.module.css | 36 ++++++++++---------- src/components/eln/ElnCard.js | 8 ++--- src/components/eln/elnFilter/ElnFilter.js | 12 +++---- src/components/eln/elnFilter/FilterButton.js | 2 +- src/components/eln/elnFilter/TextSearch.js | 4 +-- 5 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/components/eln/Eln.module.css b/src/components/eln/Eln.module.css index 4b06294c..d7c48a3c 100644 --- a/src/components/eln/Eln.module.css +++ b/src/components/eln/Eln.module.css @@ -9,7 +9,7 @@ /* Search / Filter section */ -.eln__searchfilter { +.elnSearchfilter { display: flex; flex-direction: row; width: 100%; @@ -18,31 +18,31 @@ margin-bottom: 0.5rem; } -.eln__searchfilter__text { +.elnSearchfilterText { translate: 0 20%; min-width: 240px; } -.eln__searchfilter__buttons { +.elnSearchfilterButtons { flex-grow: 1; } -.eln__searchfilter__search { +.elnSearchfilterSearch { display: flex; flex-direction: column; padding: 0.5rem 0; } -.eln__searchfilter__search > span { +.elnSearchfilterSearch > span { text-align: center; } -.eln__searchfilter__search > em { +.elnSearchfilterSearch > em { color: var(--ifm-color-primary); text-align: center; } -.eln__searchfilter__search__button { +.elnSearchfilterSearchButton { position: absolute; right: 1.5rem; top: 50%; @@ -53,7 +53,7 @@ line-height: 1rem; } -.eln__card { +.elnCard { width: 49.5%; padding: 0.75rem; border: 1px dashed var(--ifm-color-primary); @@ -61,13 +61,13 @@ transition: all var(--n4c-transform-time) ease-in-out; } -.eln__card__header { +.elnCardHeader { display: flex; justify-content: space-between; align-items: center; } -.eln__card__desc { +.elnCardDesc { padding: 0.5rem; } @@ -77,7 +77,7 @@ flex-direction: column; } - .eln__searchfilter { + .elnSearchfilter { display: flex; flex-direction: column; align-items: center; @@ -87,19 +87,19 @@ margin-bottom: 0.75rem; } - .eln__searchfilter__text, - .eln__searchfilter__buttons { + .elnSearchfilterText, + .elnSearchfilterButtons { width: 100%; translate: 0; } - .eln__searchfilter__search { + .elnSearchfilterSearch { display: flex; flex-direction: row; align-items: center; } - .eln__card { + .elnCard { width: 100%; padding: 0.75rem; border: 1px dashed var(--ifm-color-primary); @@ -108,18 +108,18 @@ } } -.eln__card__link { +.elnCardLink { display: flex; padding: 0.5rem; } -.eln__licenseChip--opensource { +.elnLicenseChipOpensource { background-color: var(--ifm-color-primary); color: white; font-weight: bold; } -.eln__filterbutton--secondary { +.elnFilterbuttonSecondary { background-color: var(--ifm-breadcrumb-item-background-active); color: var(--ifm-color-primary); font-weight: unset; diff --git a/src/components/eln/ElnCard.js b/src/components/eln/ElnCard.js index 0561f66f..3896dc47 100644 --- a/src/components/eln/ElnCard.js +++ b/src/components/eln/ElnCard.js @@ -7,8 +7,8 @@ import styles from "./styles"; function ElnCard({ eln, filter, setFilter }) { return ( -
-
+
+

{eln.name}

-
+
{eln.subDisc && eln.subDisc.length > 0 && ( -
+
{eln.subDisc.map((subdisc, idx) => { let isActive = filter.subDisc === subdisc; return ( diff --git a/src/components/eln/elnFilter/ElnFilter.js b/src/components/eln/elnFilter/ElnFilter.js index daf3388d..84abb1ec 100644 --- a/src/components/eln/elnFilter/ElnFilter.js +++ b/src/components/eln/elnFilter/ElnFilter.js @@ -3,7 +3,7 @@ import React from "react"; import TextSearch from "./TextSearch"; import FilterButton from "./FilterButton"; -import styles from "../Eln.module.css"; +import styles from "../styles"; // Assemble buttons for filtering section @@ -39,7 +39,7 @@ function ButtonFilters({ allSubDisc, allLicenses, filter, setFilter }) { return ( {subDiscButtons.length > 0 && ( -
+
Filter by subdisciplines

{subDiscButtons.map((subDisc, idx) => ( @@ -55,7 +55,7 @@ function ButtonFilters({ allSubDisc, allLicenses, filter, setFilter }) {

)} -
+
Filter by license

{licenseButtons.map((license, idx) => ( @@ -82,11 +82,11 @@ function ElnFilter({ resultOutput, }) { return ( -

-
+
+
-
+
diff --git a/src/components/eln/elnFilter/FilterButton.js b/src/components/eln/elnFilter/FilterButton.js index fdfd515a..0578c08c 100644 --- a/src/components/eln/elnFilter/FilterButton.js +++ b/src/components/eln/elnFilter/FilterButton.js @@ -18,7 +18,7 @@ function FilterButton(props) { // Conditional styling for button let buttonClass = clsx(styles.lbeFilterbutton, { - [styles["eln__filterbutton--secondary"]]: props.secondary, + [styles.elnFilterbuttonSecondary]: props.secondary, [styles.lbeFilterbuttonActive]: props.active, }); diff --git a/src/components/eln/elnFilter/TextSearch.js b/src/components/eln/elnFilter/TextSearch.js index 4afdd2b0..ef6ef2d6 100644 --- a/src/components/eln/elnFilter/TextSearch.js +++ b/src/components/eln/elnFilter/TextSearch.js @@ -7,7 +7,7 @@ function TextSearch({ resultOutput, filter, setFilter }) { }); return ( -
+
{filter.text && ( - ); +function RepoButton({ name, url }) { + return ( + + ); } // Handles text input -function TextSearch({lbeState, setLbeState, resultOutput}) { - const handleChange = (e) => - setLbeState( - e.target.value === "" - ? { - repo: "All", - subd: "All", - journal: "All", - switch: "subd", - } - : { - search: e.target.value, - switch: "search", - }, - [e.target.value], - ); - - return ( -
- {" "} -   {resultOutput} -
- ); +function TextSearch({ lbeState, setLbeState, resultOutput }) { + const handleChange = (e) => + setLbeState( + e.target.value === "" + ? { + repo: "All", + subd: "All", + journal: "All", + switch: "subd", + } + : { + search: e.target.value, + switch: "search", + }, + [e.target.value], + ); + + return ( +
+ {" "} +   {resultOutput} +
+ ); } // Function for handling button clicks -function HandleClick({name, newState, setLbeState}) { - if (name == "All") { - setLbeState({ - journal: "All", - subd: "All", - repo: "All", - switch: "subd", - }); - } else { - setLbeState(newState); - } +function HandleClick({ name, newState, setLbeState }) { + if (name == "All") { + setLbeState({ + journal: "All", + subd: "All", + repo: "All", + switch: "subd", + }); + } else { + setLbeState(newState); + } } // Function for filtering buttons function FilterButton({ - type, - name, - numbered, - funnel, - title, - lbeState, - setLbeState, + type, + name, + numbered, + funnel, + title, + lbeState, + setLbeState, }) { - // type and name are strings, numbered is boolean - - // Initialize variables - - var buttonClass = styles.lbeFilterbutton; - var number = 0; - var label = ""; - - // Define how the state object should be set when clicked - - var newState = {[type]: name, switch: type}; - - // Styling of active button - - if (name === lbeState[type]) { - buttonClass = - styles.lbeFilterbutton + " " + styles.lbeFilterbuttonActive; - } - - // Determine number (when needed) - - if (numbered) { - if (name === "All") { - number = lbeTable.length; - } else { - number = lbeTable - .map((m) => JSON.stringify(m[filterAttr[type]])) - .filter((m) => m.includes(name)).length; - } - label = name + " (" + number + ")"; - } else { - label = name; - } - - return ( - - ); + // type and name are strings, numbered is boolean + + // Initialize variables + + var buttonClass = styles.lbeFilterbutton; + var number = 0; + var label = ""; + + // Define how the state object should be set when clicked + + var newState = { [type]: name, switch: type }; + + // Styling of active button + + if (name === lbeState[type]) { + buttonClass = styles.lbeFilterbutton + " " + styles.lbeFilterbuttonActive; + } + + // Determine number (when needed) + + if (numbered) { + if (name === "All") { + number = lbeTable.length; + } else { + number = lbeTable + .map((m) => JSON.stringify(m[filterAttr[type]])) + .filter((m) => m.includes(name)).length; + } + label = name + " (" + number + ")"; + } else { + label = name; + } + + return ( + + ); } -function LbeChip({title}) { - return ( - - - - ); +function LbeChip({ title }) { + return ( + + + + ); } -export {RepoButton, TextSearch, FilterButton, LbeChip}; +export { RepoButton, TextSearch, FilterButton, LbeChip }; From 5364e5ffea87a732ef780ad3b0509a5c903b76cf Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 16:50:24 +0100 Subject: [PATCH 13/20] refactor: replace string concatenation with clsx for className management --- src/components/BulletBox.js | 4 +++- src/components/IntroButton.js | 12 +++++++----- src/components/N4CFeatures.js | 3 ++- src/components/lbe/LbeElements.js | 5 +++-- src/components/repos/RepoButton.js | 3 ++- src/pages/index.js | 11 +++++++---- 6 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/components/BulletBox.js b/src/components/BulletBox.js index 1e2f5996..e4531556 100644 --- a/src/components/BulletBox.js +++ b/src/components/BulletBox.js @@ -1,3 +1,5 @@ +import clsx from "clsx"; + function BulletContainer({ children }) { return
{children}
; } @@ -7,7 +9,7 @@ function BulletBox({ children, secondary }) { return (
{children} diff --git a/src/components/IntroButton.js b/src/components/IntroButton.js index 1ea56e22..7ea9dbe7 100644 --- a/src/components/IntroButton.js +++ b/src/components/IntroButton.js @@ -1,17 +1,19 @@ -import React from "react"; import useBaseUrl from "@docusaurus/useBaseUrl"; import styles from "./N4CFeatures.module.css"; +import clsx from "clsx"; export default function IntroButton(props) { return ( -
+
diff --git a/src/components/N4CFeatures.js b/src/components/N4CFeatures.js index 04beb372..aeb403bc 100644 --- a/src/components/N4CFeatures.js +++ b/src/components/N4CFeatures.js @@ -3,6 +3,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; import Translate from "@docusaurus/Translate"; import styles from "./N4CFeatures.module.css"; +import clsx from "clsx"; const features = { entry: [ @@ -107,7 +108,7 @@ const features = { function Feature({ title, svg, link, style }) { return ( -
+
{link ? ( - diff --git a/src/components/repos/RepoButton.js b/src/components/repos/RepoButton.js index bb9ff97b..308aaf32 100644 --- a/src/components/repos/RepoButton.js +++ b/src/components/repos/RepoButton.js @@ -4,12 +4,13 @@ import Link from "@docusaurus/Link"; import IconExternalLink from "@theme/Icon/ExternalLink"; import styles from "../lbe/lbe.module.css"; +import clsx from "clsx"; function RepoButton(props) { return ( - diff --git a/src/pages/index.js b/src/pages/index.js index 9829479f..34d13c63 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,6 +6,7 @@ import N4CFeatures from "../components/N4CFeatures"; import Translate from "@docusaurus/Translate"; import styles from "./index.module.css"; +import clsx from "clsx"; export default function Home() { const { siteConfig } = useDocusaurusContext(); @@ -18,11 +19,13 @@ export default function Home() {
-

{siteConfig.title}

+

+ {siteConfig.title} +

-
+

A place for all knowledge regarding Research Data Management @@ -30,10 +33,10 @@ export default function Home() {

-
+
Get started From 3fefe970c1f340f592b5a2c8622a5820b0535341 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 16:54:44 +0100 Subject: [PATCH 14/20] chore: deprecate currently unused components --- docs/10_domains/30_pharmaceutical_chemistry.mdx | 1 - src/components/{ => deprecated}/KbTagCloud.js | 0 src/components/{ => deprecated}/Methods.js | 0 3 files changed, 1 deletion(-) rename src/components/{ => deprecated}/KbTagCloud.js (100%) rename src/components/{ => deprecated}/Methods.js (100%) diff --git a/docs/10_domains/30_pharmaceutical_chemistry.mdx b/docs/10_domains/30_pharmaceutical_chemistry.mdx index eb0e7aa6..1e8efc59 100644 --- a/docs/10_domains/30_pharmaceutical_chemistry.mdx +++ b/docs/10_domains/30_pharmaceutical_chemistry.mdx @@ -3,7 +3,6 @@ title: "Medicinal / Pharmaceutical Chemistry" slug: "/pharmaceutical_chemistry" --- -import Methods from "@site/src/components/Methods.js"; import { LbeChip } from "@site/src/components/lbe/LbeElements.js"; import ElnFinderPharm from "@site/src/components/eln/ElnFinderPharm.js"; diff --git a/src/components/KbTagCloud.js b/src/components/deprecated/KbTagCloud.js similarity index 100% rename from src/components/KbTagCloud.js rename to src/components/deprecated/KbTagCloud.js diff --git a/src/components/Methods.js b/src/components/deprecated/Methods.js similarity index 100% rename from src/components/Methods.js rename to src/components/deprecated/Methods.js From 7a2ee607e2210cb0dfc1b763e3536a80ad0fc6a8 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 17:10:42 +0100 Subject: [PATCH 15/20] chore: move deprecated methods table styles to a separate file --- src/css/custom.css | 36 ------------------------------------ src/css/deprecated.css | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 36 deletions(-) create mode 100644 src/css/deprecated.css diff --git a/src/css/custom.css b/src/css/custom.css index 189af505..a2db82cc 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -410,39 +410,3 @@ table { table thead tr { border-bottom: 1px solid var(--ifm-color-primary); } - -/********** Methods Table ************/ - -.methods__searchfilter { - padding: 10px; - margin: 15px 0px; - border: 1px dashed var(--ifm-color-primary); - display: flex; -} - -.methods__searchfilter__row { - align-items: center; - flex-wrap: wrap; -} - -.methods__searchfilter__filter { - width: calc(8 / 12 * 100%); - padding: 0 var(--ifm-spacing-horizontal); -} - -.methods__searchfilter__search { - width: calc(4 / 12 * 100%); - padding: 0var (--ifm-spacing-horizontal); -} - -@media screen and (max-width: 1350px) { - .methods__searchfilter__filter { - width: unset; - padding: 0 var(--ifm-spacing-horizontal); - } - - .methods__searchfilter__search { - width: unset; - padding: var(--ifm-spacing-horizontal); - } -} diff --git a/src/css/deprecated.css b/src/css/deprecated.css new file mode 100644 index 00000000..482304ed --- /dev/null +++ b/src/css/deprecated.css @@ -0,0 +1,35 @@ +/********** Methods Table ************/ + +/* .methods__searchfilter { + padding: 10px; + margin: 15px 0px; + border: 1px dashed var(--ifm-color-primary); + display: flex; +} + +.methods__searchfilter__row { + align-items: center; + flex-wrap: wrap; +} + +.methods__searchfilter__filter { + width: calc(8 / 12 * 100%); + padding: 0 var(--ifm-spacing-horizontal); +} + +.methods__searchfilter__search { + width: calc(4 / 12 * 100%); + padding: 0var (--ifm-spacing-horizontal); +} + +@media screen and (max-width: 1350px) { + .methods__searchfilter__filter { + width: unset; + padding: 0 var(--ifm-spacing-horizontal); + } + + .methods__searchfilter__search { + width: unset; + padding: var(--ifm-spacing-horizontal); + } +} */ From 479d07d8780fb214d0bec0c3b56b514a0456aff2 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 17:12:45 +0100 Subject: [PATCH 16/20] refactor: move all css files to css folder --- src/components/eln/styles.js | 6 ------ .../chemotion => css}/ChemotionCarousel.module.css | 0 .../chemotion => css}/ChemotionLifecycle.module.css | 0 src/{components/eln => css}/Eln.module.css | 2 ++ src/{components/commons => css}/FloatImage.module.css | 0 src/{components => css}/N4CFeatures.module.css | 0 src/{components/commons => css}/ShortenDesc.module.css | 0 src/{components/lbe => css}/lbe.module.css | 0 8 files changed, 2 insertions(+), 6 deletions(-) delete mode 100644 src/components/eln/styles.js rename src/{components/chemotion => css}/ChemotionCarousel.module.css (100%) rename src/{components/chemotion => css}/ChemotionLifecycle.module.css (100%) rename src/{components/eln => css}/Eln.module.css (98%) rename src/{components/commons => css}/FloatImage.module.css (100%) rename src/{components => css}/N4CFeatures.module.css (100%) rename src/{components/commons => css}/ShortenDesc.module.css (100%) rename src/{components/lbe => css}/lbe.module.css (100%) diff --git a/src/components/eln/styles.js b/src/components/eln/styles.js deleted file mode 100644 index 952781bb..00000000 --- a/src/components/eln/styles.js +++ /dev/null @@ -1,6 +0,0 @@ -import elnStyles from "./Eln.module.css"; -import lbeStyles from "../lbe/lbe.module.css"; - -const styles = { ...elnStyles, ...lbeStyles }; - -export default styles; diff --git a/src/components/chemotion/ChemotionCarousel.module.css b/src/css/ChemotionCarousel.module.css similarity index 100% rename from src/components/chemotion/ChemotionCarousel.module.css rename to src/css/ChemotionCarousel.module.css diff --git a/src/components/chemotion/ChemotionLifecycle.module.css b/src/css/ChemotionLifecycle.module.css similarity index 100% rename from src/components/chemotion/ChemotionLifecycle.module.css rename to src/css/ChemotionLifecycle.module.css diff --git a/src/components/eln/Eln.module.css b/src/css/Eln.module.css similarity index 98% rename from src/components/eln/Eln.module.css rename to src/css/Eln.module.css index c34937bb..ef139f9e 100644 --- a/src/components/eln/Eln.module.css +++ b/src/css/Eln.module.css @@ -1,3 +1,5 @@ +@import "./lbe.module.css"; + /********** ELN-Finder ************/ .eln { diff --git a/src/components/commons/FloatImage.module.css b/src/css/FloatImage.module.css similarity index 100% rename from src/components/commons/FloatImage.module.css rename to src/css/FloatImage.module.css diff --git a/src/components/N4CFeatures.module.css b/src/css/N4CFeatures.module.css similarity index 100% rename from src/components/N4CFeatures.module.css rename to src/css/N4CFeatures.module.css diff --git a/src/components/commons/ShortenDesc.module.css b/src/css/ShortenDesc.module.css similarity index 100% rename from src/components/commons/ShortenDesc.module.css rename to src/css/ShortenDesc.module.css diff --git a/src/components/lbe/lbe.module.css b/src/css/lbe.module.css similarity index 100% rename from src/components/lbe/lbe.module.css rename to src/css/lbe.module.css From 30ee3bad6175a13351b8e7fd3b40933c1fdf3dd5 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 17:15:37 +0100 Subject: [PATCH 17/20] chore: formatting --- src/components/chemotion/ChemotionCarousel.js | 102 +++++++++--------- .../repos => css}/DecisionTree.module.css | 0 2 files changed, 51 insertions(+), 51 deletions(-) rename src/{components/repos => css}/DecisionTree.module.css (100%) diff --git a/src/components/chemotion/ChemotionCarousel.js b/src/components/chemotion/ChemotionCarousel.js index cfe5a4fb..c95740d9 100644 --- a/src/components/chemotion/ChemotionCarousel.js +++ b/src/components/chemotion/ChemotionCarousel.js @@ -1,61 +1,61 @@ -import {Carousel} from "nuka-carousel"; +import { Carousel } from "nuka-carousel"; import style from "./ChemotionCarousel.module.css"; -import {useCarousel} from "nuka-carousel"; +import { useCarousel } from "nuka-carousel"; function CustomDots() { - const {totalPages, currentPage, goToPage} = useCarousel(); + const { totalPages, currentPage, goToPage } = useCarousel(); - const className = (index) => { - let value = style.chemotionCarouselDot; - if (currentPage === index) { - value += " " + style.chemotionCarouselDotActive; - } - return value; - }; + const className = (index) => { + let value = style.chemotionCarouselDot; + if (currentPage === index) { + value += " " + style.chemotionCarouselDotActive; + } + return value; + }; - return ( -
- {[...Array(totalPages)].map((_, index) => ( - goToPage(index)} - className={className(index)} - > - • - - ))} -
- ); + return ( +
+ {[...Array(totalPages)].map((_, index) => ( + goToPage(index)} + className={className(index)} + > + • + + ))} +
+ ); } -function ChemotionCarousel({icon, images}) { - return ( -
- {icon.alt} -
- } - > - {images.map((image, index) => ( - {image.alt} - ))} - -
-
- ); +function ChemotionCarousel({ icon, images }) { + return ( +
+ {icon.alt} +
+ } + > + {images.map((image, index) => ( + {image.alt} + ))} + +
+
+ ); } export default ChemotionCarousel; diff --git a/src/components/repos/DecisionTree.module.css b/src/css/DecisionTree.module.css similarity index 100% rename from src/components/repos/DecisionTree.module.css rename to src/css/DecisionTree.module.css From 6a2afa5724a81da8b51122f0b65818643d19ef90 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Mon, 12 Jan 2026 17:33:39 +0100 Subject: [PATCH 18/20] refactor: all css imports pointed to css folder --- src/components/IntroButton.js | 2 +- src/components/N4CFeatures.js | 2 +- src/components/chemotion/ChemotionCarousel.js | 16 +- .../chemotion/ChemotionLifecycle.js | 325 +++---- src/components/commons/FloatImage.js | 2 +- src/components/commons/ShortenDesc.js | 2 +- src/components/eln/ElnCard.js | 2 +- src/components/eln/ElnFinder.js | 3 +- src/components/eln/ElnFinderPharm.js | 2 +- src/components/eln/ElnStyles.js | 9 + src/components/eln/elnFilter/ElnFilter.js | 2 +- src/components/eln/elnFilter/FilterButton.js | 3 +- src/components/eln/elnFilter/TextSearch.js | 2 +- src/components/lbe/Authors.js | 64 +- src/components/lbe/FilterSection.js | 128 ++- src/components/lbe/Lbe.js | 272 +++--- src/components/lbe/LbeBody.js | 2 +- src/components/lbe/LbeElements.js | 2 +- src/components/lbe/ShortenButtons.js | 94 +- src/components/repos/DecisionTree.js | 824 +++++++++--------- src/components/repos/RepoButton.js | 2 +- src/css/Eln.module.css | 2 +- 22 files changed, 856 insertions(+), 906 deletions(-) create mode 100644 src/components/eln/ElnStyles.js diff --git a/src/components/IntroButton.js b/src/components/IntroButton.js index 7ea9dbe7..5c05bb8c 100644 --- a/src/components/IntroButton.js +++ b/src/components/IntroButton.js @@ -1,6 +1,6 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; -import styles from "./N4CFeatures.module.css"; +import styles from "@site/src/css/N4CFeatures.module.css"; import clsx from "clsx"; export default function IntroButton(props) { diff --git a/src/components/N4CFeatures.js b/src/components/N4CFeatures.js index aeb403bc..43e40ebb 100644 --- a/src/components/N4CFeatures.js +++ b/src/components/N4CFeatures.js @@ -2,7 +2,7 @@ import Link from "@docusaurus/Link"; import useBaseUrl from "@docusaurus/useBaseUrl"; import Translate from "@docusaurus/Translate"; -import styles from "./N4CFeatures.module.css"; +import styles from "@site/src/css/N4CFeatures.module.css"; import clsx from "clsx"; const features = { diff --git a/src/components/chemotion/ChemotionCarousel.js b/src/components/chemotion/ChemotionCarousel.js index c95740d9..be8acf77 100644 --- a/src/components/chemotion/ChemotionCarousel.js +++ b/src/components/chemotion/ChemotionCarousel.js @@ -1,20 +1,20 @@ import { Carousel } from "nuka-carousel"; -import style from "./ChemotionCarousel.module.css"; +import styles from "@site/src/css/ChemotionCarousel.module.css"; import { useCarousel } from "nuka-carousel"; function CustomDots() { const { totalPages, currentPage, goToPage } = useCarousel(); const className = (index) => { - let value = style.chemotionCarouselDot; + let value = styles.chemotionCarouselDot; if (currentPage === index) { - value += " " + style.chemotionCarouselDotActive; + value += " " + styles.chemotionCarouselDotActive; } return value; }; return ( -
+
{[...Array(totalPages)].map((_, index) => ( +
{icon.alt} -
+
{images.map((image, index) => ( {image.alt} { - return ( -
- - - - - - Experiment - - - Design - - - - - - + return ( +
+ + + + + + Experiment + + + Design + + + + + + - - - - Experiment - - - - + + + + Experiment + + + + - - - - Analysis - - - - + + + + Analysis + + + + - - - - Data Collection & - - - Processing - - - - + + + + Data Collection & + + + Processing + + + + - - - - Data - - - Publication - - - - + + + + Data + + + Publication + + + + - - - - Re-use - - - - - + + + + Re-use + + + + + - + - - -
- ); + + +
+ ); }; export default ChemotionLifecycle; diff --git a/src/components/commons/FloatImage.js b/src/components/commons/FloatImage.js index 58d6d616..7d57f5e7 100644 --- a/src/components/commons/FloatImage.js +++ b/src/components/commons/FloatImage.js @@ -1,7 +1,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; import Link from "@docusaurus/Link"; -import styles from "./FloatImage.module.css"; +import styles from "@site/src/css/FloatImage.module.css"; function FloatImage({ url, alt, ...props }) { // Object for custom styles diff --git a/src/components/commons/ShortenDesc.js b/src/components/commons/ShortenDesc.js index 3fd8e1fc..0b0bf49c 100644 --- a/src/components/commons/ShortenDesc.js +++ b/src/components/commons/ShortenDesc.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; -import styles from "./ShortenDesc.module.css"; +import styles from "@site/src/css/ShortenDesc.module.css"; // shorten the description of the experiment up to the next blank, comma or period after 100 characters diff --git a/src/components/eln/ElnCard.js b/src/components/eln/ElnCard.js index 3896dc47..4f3d9b17 100644 --- a/src/components/eln/ElnCard.js +++ b/src/components/eln/ElnCard.js @@ -3,7 +3,7 @@ import RepoButton from "@site/src/components/repos/RepoButton"; import FilterButton from "./elnFilter/FilterButton.js"; import ShortenDesc from "../commons/ShortenDesc.js"; -import styles from "./styles"; +import styles from "@site/src/components/eln/ElnStyles.js"; function ElnCard({ eln, filter, setFilter }) { return ( diff --git a/src/components/eln/ElnFinder.js b/src/components/eln/ElnFinder.js index 2cbc6834..741c5fdc 100644 --- a/src/components/eln/ElnFinder.js +++ b/src/components/eln/ElnFinder.js @@ -6,8 +6,7 @@ import ElnStatus from "./ElnStatus"; import ElnFilter from "./elnFilter/ElnFilter"; import ElnStack from "./ElnStack"; -import styles from "./styles"; - +import styles from "@site/src/components/eln/ElnStyles.js"; // const elnData = require("@site/static/assets/eln_test.json"); function ElnFinder(props) { diff --git a/src/components/eln/ElnFinderPharm.js b/src/components/eln/ElnFinderPharm.js index 8dbb4cd8..eb78302e 100644 --- a/src/components/eln/ElnFinderPharm.js +++ b/src/components/eln/ElnFinderPharm.js @@ -6,7 +6,7 @@ import ElnStatus from "./ElnStatus"; import ElnFilter from "./elnFilter/ElnFilter"; import ElnStack from "./ElnStack"; -import styles from "./styles"; +import styles from "@site/src/components/eln/ElnStyles.js"; // const elnData = require("@site/static/assets/eln_test.json"); diff --git a/src/components/eln/ElnStyles.js b/src/components/eln/ElnStyles.js new file mode 100644 index 00000000..5a4a0d33 --- /dev/null +++ b/src/components/eln/ElnStyles.js @@ -0,0 +1,9 @@ +import elnStyles from "@site/src/css/Eln.module.css"; +import lbeStyles from "@site/src/css/lbe.module.css"; + +const styles = { + ...elnStyles, + ...lbeStyles, +}; + +export default styles; diff --git a/src/components/eln/elnFilter/ElnFilter.js b/src/components/eln/elnFilter/ElnFilter.js index 84abb1ec..47333215 100644 --- a/src/components/eln/elnFilter/ElnFilter.js +++ b/src/components/eln/elnFilter/ElnFilter.js @@ -3,7 +3,7 @@ import React from "react"; import TextSearch from "./TextSearch"; import FilterButton from "./FilterButton"; -import styles from "../styles"; +import styles from "@site/src/components/eln/ElnStyles.js"; // Assemble buttons for filtering section diff --git a/src/components/eln/elnFilter/FilterButton.js b/src/components/eln/elnFilter/FilterButton.js index 0578c08c..6363072e 100644 --- a/src/components/eln/elnFilter/FilterButton.js +++ b/src/components/eln/elnFilter/FilterButton.js @@ -1,7 +1,6 @@ +import styles from "@site/src/components/eln/ElnStyles.js"; import clsx from "clsx"; -import styles from "../styles"; - function FilterButton(props) { const handleClick = () => { if (props.label === "All") { diff --git a/src/components/eln/elnFilter/TextSearch.js b/src/components/eln/elnFilter/TextSearch.js index ef6ef2d6..8dfc2d08 100644 --- a/src/components/eln/elnFilter/TextSearch.js +++ b/src/components/eln/elnFilter/TextSearch.js @@ -1,4 +1,4 @@ -import styles from "../Eln.module.css"; +import styles from "@site/src/components/eln/ElnStyles.js"; function TextSearch({ resultOutput, filter, setFilter }) { const handleChange = (e) => diff --git a/src/components/lbe/Authors.js b/src/components/lbe/Authors.js index d38c2c53..73f07799 100644 --- a/src/components/lbe/Authors.js +++ b/src/components/lbe/Authors.js @@ -1,43 +1,43 @@ -import React, {useState} from "react"; +import React, { useState } from "react"; // Import CSS -import styles from "./lbe.module.css"; +import styles from "@site/src/css/lbe.module.css"; // Function for expandible author list -function Authors({authors, length}) { - const [listOpen, ToggleListOpen] = useState(false); // Define state for author list, default "false" - var shortlist = authors.split(", ", length).join(", "); // List of authors with elements given by length +function Authors({ authors, length }) { + const [listOpen, ToggleListOpen] = useState(false); // Define state for author list, default "false" + var shortlist = authors.split(", ", length).join(", "); // List of authors with elements given by length - // If there are less than {length} authors, do not display button + // If there are less than {length} authors, do not display button - if (shortlist == authors) { - return {authors}; - } else if (listOpen) { - return ( - - {authors}{" "} - - - ); - } else - return ( - - {shortlist}, ...{" "} - - - ); + if (shortlist == authors) { + return {authors}; + } else if (listOpen) { + return ( + + {authors}{" "} + + + ); + } else + return ( + + {shortlist}, ...{" "} + + + ); } export default Authors; diff --git a/src/components/lbe/FilterSection.js b/src/components/lbe/FilterSection.js index 06605156..b24a4710 100644 --- a/src/components/lbe/FilterSection.js +++ b/src/components/lbe/FilterSection.js @@ -2,81 +2,79 @@ import React from "react"; // Custom functions -import {TextSearch, FilterButton} from "./LbeElements.js"; +import { TextSearch, FilterButton } from "./LbeElements.js"; // Import CSS -import styles from "./lbe.module.css"; +import styles from "@site/src/css/lbe.module.css"; // Assemble buttons for filtering section -function LbeButtons({repos, subdiscs, journals, lbeState, setLbeState}) { - return ( - -
-

Filter by repositories

-

- {repos.map((props, idx) => ( - - ))} -

-
-
-

Filter by subdisciplines

-

- {subdiscs.map((props, idx) => ( - - ))} -

-
-
-

Filter by journals

-

- {journals.map((props, idx) => ( - - ))} -

-
- - ); +function LbeButtons({ repos, subdiscs, journals, lbeState, setLbeState }) { + return ( + +
+

Filter by repositories

+

+ {repos.map((props, idx) => ( + + ))} +

+
+
+

Filter by subdisciplines

+

+ {subdiscs.map((props, idx) => ( + + ))} +

+
+
+

Filter by journals

+

+ {journals.map((props, idx) => ( + + ))} +

+
+ + ); } function FilterSection({ - repos, - subdiscs, - journals, - lbeState, - setLbeState, - resultOutput, + repos, + subdiscs, + journals, + lbeState, + setLbeState, + resultOutput, }) { - return ( -
-
- - -
-
- ); + return ( +
+
+ + +
+
+ ); } export default FilterSection; diff --git a/src/components/lbe/Lbe.js b/src/components/lbe/Lbe.js index 12e3084e..30e3f7e4 100644 --- a/src/components/lbe/Lbe.js +++ b/src/components/lbe/Lbe.js @@ -1,5 +1,5 @@ -import React, {useState, useEffect} from "react"; -import {useLocation} from "react-router-dom"; +import React, { useState, useEffect } from "react"; +import { useLocation } from "react-router-dom"; // Custom functions @@ -8,149 +8,145 @@ import LbeBody from "./LbeBody.js"; // Import CSS -import styles from "./lbe.module.css"; +import styles from "@site/src/css/lbe.module.css"; // Import global data -import {lbeTable} from "./Data.js"; +import { lbeTable } from "./Data.js"; // Main function function Lbe() { - // Get URL params - const location = useLocation(); - const queryParameters = new URLSearchParams(location.search); - const queryText = queryParameters.get("text"); - const querySubd = queryParameters.get("subd"); - const queryDoi = queryParameters.get("doi"); - - // Define React state object - const [lbeState, setLbeState] = useState({}); - - // Conditions for initial states - - if (queryText !== null) { - useEffect(() => { - setLbeState({ - search: queryText, - switch: "text", - }); - }, []); - } else if (querySubd !== null) { - useEffect(() => { - setLbeState({ - subd: querySubd, - switch: "subd", - }); - }, []); - } else if (queryDoi !== null) { - useEffect(() => { - setLbeState({ - switch: "doi", - }); - }, []); - } else { - useEffect(() => { - setLbeState({ - repo: "All", - subd: "All", - journal: "All", - switch: "subd", - }); - }, []); - } - - // Get list of subdisciplines - var subdiscs = Array.from( - new Set(lbeTable.map((obj) => obj.subdiscipline).flat()), - ).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: "base"})); - subdiscs.unshift("All"); // Add "All" option at the beginning - - // Get list of tags - var categories = Array.from( - new Set(lbeTable.map((obj) => obj.tags).flat()), - ).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: "base"})); - categories.unshift("All"); // Add "All" option at the beginning - - // Get list of journals - var journals = Array.from(new Set(lbeTable.map((obj) => obj.journal))).sort( - (a, b) => a.localeCompare(b, undefined, {sensitivity: "base"}), - ); - journals.unshift("All"); // Add "All" option at the beginning - - // Get list of repos - var repos = Array.from( - new Set( - lbeTable.map((obj) => obj.linkdata.map((obj) => obj.name)).flat(), - ), - ).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: "base"})); - repos.unshift("All"); // Add "All" option at the beginning - - var result = []; - - // Render all datasets if "All" is selected - - if (lbeState.repo == "All" || lbeState.subd == "All") { - result = lbeTable; - } else { - // Determine result set based on lbeState.switch states - switch (lbeState.switch) { - case "tag": - result = lbeTable.filter((n) => n.tags.includes(tagFilter)); - break; - case "repo": - result = lbeTable.filter((n) => - n.linkdata.map((n) => n.name).includes(lbeState.repo), - ); - break; - case "subd": - result = lbeTable.filter((n) => - n.subdiscipline.includes(lbeState.subd), - ); - break; - case "journal": - result = lbeTable.filter((n) => - n.journal.includes(lbeState.journal), - ); - break; - case "search": - result = lbeTable.filter((obj) => - JSON.stringify(obj) - .toLowerCase() - .includes(lbeState.search.toLowerCase()), - ); // Squash object with JSON.stringify() for better searchability - if (lbeState.search == "") { - var resultOutput = ""; - } else if (result.length == 1) { - var resultOutput = result.length + " entry found..."; - } else { - var resultOutput = result.length + " entries found..."; - } - break; - case "doi": - result = lbeTable.filter((n) => n.linkpub.includes(queryDoi)); - } - } - - if (lbeState.switch !== "search") { - result.sort((a, b) => b.pubyear - a.pubyear); - } - - return ( -
- - -
- ); + // Get URL params + const location = useLocation(); + const queryParameters = new URLSearchParams(location.search); + const queryText = queryParameters.get("text"); + const querySubd = queryParameters.get("subd"); + const queryDoi = queryParameters.get("doi"); + + // Define React state object + const [lbeState, setLbeState] = useState({}); + + // Conditions for initial states + + if (queryText !== null) { + useEffect(() => { + setLbeState({ + search: queryText, + switch: "text", + }); + }, []); + } else if (querySubd !== null) { + useEffect(() => { + setLbeState({ + subd: querySubd, + switch: "subd", + }); + }, []); + } else if (queryDoi !== null) { + useEffect(() => { + setLbeState({ + switch: "doi", + }); + }, []); + } else { + useEffect(() => { + setLbeState({ + repo: "All", + subd: "All", + journal: "All", + switch: "subd", + }); + }, []); + } + + // Get list of subdisciplines + var subdiscs = Array.from( + new Set(lbeTable.map((obj) => obj.subdiscipline).flat()), + ).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" })); + subdiscs.unshift("All"); // Add "All" option at the beginning + + // Get list of tags + var categories = Array.from( + new Set(lbeTable.map((obj) => obj.tags).flat()), + ).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" })); + categories.unshift("All"); // Add "All" option at the beginning + + // Get list of journals + var journals = Array.from(new Set(lbeTable.map((obj) => obj.journal))).sort( + (a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }), + ); + journals.unshift("All"); // Add "All" option at the beginning + + // Get list of repos + var repos = Array.from( + new Set(lbeTable.map((obj) => obj.linkdata.map((obj) => obj.name)).flat()), + ).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" })); + repos.unshift("All"); // Add "All" option at the beginning + + var result = []; + + // Render all datasets if "All" is selected + + if (lbeState.repo == "All" || lbeState.subd == "All") { + result = lbeTable; + } else { + // Determine result set based on lbeState.switch states + switch (lbeState.switch) { + case "tag": + result = lbeTable.filter((n) => n.tags.includes(tagFilter)); + break; + case "repo": + result = lbeTable.filter((n) => + n.linkdata.map((n) => n.name).includes(lbeState.repo), + ); + break; + case "subd": + result = lbeTable.filter((n) => + n.subdiscipline.includes(lbeState.subd), + ); + break; + case "journal": + result = lbeTable.filter((n) => n.journal.includes(lbeState.journal)); + break; + case "search": + result = lbeTable.filter((obj) => + JSON.stringify(obj) + .toLowerCase() + .includes(lbeState.search.toLowerCase()), + ); // Squash object with JSON.stringify() for better searchability + if (lbeState.search == "") { + var resultOutput = ""; + } else if (result.length == 1) { + var resultOutput = result.length + " entry found..."; + } else { + var resultOutput = result.length + " entries found..."; + } + break; + case "doi": + result = lbeTable.filter((n) => n.linkpub.includes(queryDoi)); + } + } + + if (lbeState.switch !== "search") { + result.sort((a, b) => b.pubyear - a.pubyear); + } + + return ( +
+ + +
+ ); } export default Lbe; diff --git a/src/components/lbe/LbeBody.js b/src/components/lbe/LbeBody.js index de5a757a..1a34f9d9 100644 --- a/src/components/lbe/LbeBody.js +++ b/src/components/lbe/LbeBody.js @@ -7,7 +7,7 @@ import { Details } from "@site/src/theme/common/Details"; // Import CSS -import styles from "./lbe.module.css"; +import styles from "@site/src/css/lbe.module.css"; // Function for single lbe dataset block diff --git a/src/components/lbe/LbeElements.js b/src/components/lbe/LbeElements.js index e5cb5d78..3b436041 100644 --- a/src/components/lbe/LbeElements.js +++ b/src/components/lbe/LbeElements.js @@ -6,7 +6,7 @@ import Funnel from "@site/static/img/funnel.svg"; // Import CSS -import styles from "./lbe.module.css"; +import styles from "@site/src/css/lbe.module.css"; import clsx from "clsx"; // Import global data diff --git a/src/components/lbe/ShortenButtons.js b/src/components/lbe/ShortenButtons.js index 8059db70..41ce0db9 100644 --- a/src/components/lbe/ShortenButtons.js +++ b/src/components/lbe/ShortenButtons.js @@ -1,58 +1,56 @@ -import React, {useState} from "react"; +import React, { useState } from "react"; -import {RepoButton} from "./LbeElements"; +import { RepoButton } from "./LbeElements"; -import styles from "./lbe.module.css"; +import styles from "@site/src/css/lbe.module.css"; function ShortenButtons(props) { - const [less, setLess] = useState(true); + const [less, setLess] = useState(true); - let number = props.number || 3; - let items = props.items || []; + let number = props.number || 3; + let items = props.items || []; - if (items.length <= number) { - return ( - - {items.map((item, idx) => ( - - ))} - - ); - } + if (items.length <= number) { + return ( + + {items.map((item, idx) => ( + + ))} + + ); + } - return ( - - {less ? ( - - {items.map((item, idx) => - idx < number ? ( - - ) : null, - )} - setLess(!less)} - style={{cursor: "pointer"}} - > - show all ⏵ - - - ) : ( - - {items.map((item, idx) => ( - - ))} - setLess(!less)} - style={{cursor: "pointer"}} - > - ⏴ collapse - - - )} - - ); + return ( + + {less ? ( + + {items.map((item, idx) => + idx < number ? : null, + )} + setLess(!less)} + style={{ cursor: "pointer" }} + > + show all ⏵ + + + ) : ( + + {items.map((item, idx) => ( + + ))} + setLess(!less)} + style={{ cursor: "pointer" }} + > + ⏴ collapse + + + )} + + ); } export default ShortenButtons; diff --git a/src/components/repos/DecisionTree.js b/src/components/repos/DecisionTree.js index 53dcdcea..937e06d2 100644 --- a/src/components/repos/DecisionTree.js +++ b/src/components/repos/DecisionTree.js @@ -1,446 +1,436 @@ import React from "react"; import Link from "@docusaurus/Link"; -import styles from "./DecisionTree.module.css"; +import styles from "@site/src/css/DecisionTree.module.css"; const DecisionTree = () => { - return ( - - - - - - - What type of data do you have? - - - - - - - - - - intermolecular and - - - supramolecular - - - interactions of - - - molecular systems - - - - - - - SupraBank - - - - + return ( + + + + + + + What type of data do you have? + + + - - - + + + + + + intermolecular and + + + supramolecular + + + interactions of + + + molecular systems + + + + + + + SupraBank + + + + - - - enzyme kinetics data - - - - - - - STRENDA - - - DB - - - - + + + - - - - - - multidisciplinary - - - - - - - RADAR4Chem - - - - + + + enzyme kinetics data + + + + + + + STRENDA + + + DB + + + + - - + + + + + + multidisciplinary + + + + + + + RADAR4Chem + + + + - + + - - - simulations - - + - - - - - NOMAD - - - - + + + simulations + + - - + + + + + NOMAD + + + + - + + - - > - - crystal structures of - - - molecular organic and - - - molecular inorganic - - - compounds - - + + + crystal structures of + + + molecular organic and + + + molecular inorganic + + + compounds + + - - - - - CSD - - - - + + + + + CSD + + + + - - + + - - - - inorganic crystal - - - structures - - - - - - - ICSD - - - - + + + + inorganic crystal + + + structures + + + + + + + ICSD + + + + - - - - - - molecules and their - - - properties, - - - identification, reactions - - - and experimental - - - investigations - - + + + + + + molecules and their + + + properties, + + + identification, reactions + + + and experimental + + + investigations + + - - + + - - - - nuclear magnetic - - - resonance (NMR) - - + + + + nuclear magnetic + + + resonance (NMR) + + - - - - - Chemotion - - - Repository - - - - - - - - nmrXiv - - - - + + + + + Chemotion + + + Repository + + + + + + + + nmrXiv + + + + - - + + - - - - mass spectrometry - - - reference spectra - - + + + + mass spectrometry + + + reference spectra + + - - - - - MassBank EU - - - - - - - ); + + + + + MassBank EU + + + + + + + ); }; export default DecisionTree; diff --git a/src/components/repos/RepoButton.js b/src/components/repos/RepoButton.js index 308aaf32..0c88c5a6 100644 --- a/src/components/repos/RepoButton.js +++ b/src/components/repos/RepoButton.js @@ -3,7 +3,7 @@ import Link from "@docusaurus/Link"; import IconExternalLink from "@theme/Icon/ExternalLink"; -import styles from "../lbe/lbe.module.css"; +import styles from "@site/src/css/lbe.module.css"; import clsx from "clsx"; function RepoButton(props) { diff --git a/src/css/Eln.module.css b/src/css/Eln.module.css index ef139f9e..a4545f1f 100644 --- a/src/css/Eln.module.css +++ b/src/css/Eln.module.css @@ -1,4 +1,4 @@ -@import "./lbe.module.css"; +@import "@site/src/css/lbe.module.css"; /********** ELN-Finder ************/ From 9e58843607664751f7d814e18d1c223f9255b424 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 12 Jan 2026 16:45:16 +0000 Subject: [PATCH 19/20] Initial plan From dca727aea2d7e41177c8beca90daa11fdb4d190b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 12 Jan 2026 16:48:50 +0000 Subject: [PATCH 20/20] Remove .js extensions from ElnStyles imports and fix unused variables Co-authored-by: jliermann <40795855+jliermann@users.noreply.github.com> --- src/components/eln/ElnCard.js | 2 +- src/components/eln/ElnFinder.js | 4 +--- src/components/eln/ElnFinderPharm.js | 4 +--- src/components/eln/elnFilter/ElnFilter.js | 2 +- src/components/eln/elnFilter/FilterButton.js | 2 +- src/components/eln/elnFilter/TextSearch.js | 2 +- 6 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/eln/ElnCard.js b/src/components/eln/ElnCard.js index 4f3d9b17..8c50852f 100644 --- a/src/components/eln/ElnCard.js +++ b/src/components/eln/ElnCard.js @@ -3,7 +3,7 @@ import RepoButton from "@site/src/components/repos/RepoButton"; import FilterButton from "./elnFilter/FilterButton.js"; import ShortenDesc from "../commons/ShortenDesc.js"; -import styles from "@site/src/components/eln/ElnStyles.js"; +import styles from "@site/src/components/eln/ElnStyles"; function ElnCard({ eln, filter, setFilter }) { return ( diff --git a/src/components/eln/ElnFinder.js b/src/components/eln/ElnFinder.js index 741c5fdc..25e077d9 100644 --- a/src/components/eln/ElnFinder.js +++ b/src/components/eln/ElnFinder.js @@ -6,14 +6,13 @@ import ElnStatus from "./ElnStatus"; import ElnFilter from "./elnFilter/ElnFilter"; import ElnStack from "./ElnStack"; -import styles from "@site/src/components/eln/ElnStyles.js"; +import styles from "@site/src/components/eln/ElnStyles"; // const elnData = require("@site/static/assets/eln_test.json"); function ElnFinder(props) { // State for ELN data const [elnData, setElnData] = useState(null); - const [error, setError] = useState(null); // State for filtering @@ -31,7 +30,6 @@ function ElnFinder(props) { console.log(data); }) .catch((error) => { - setError(error); console.error(error); }); }, []); diff --git a/src/components/eln/ElnFinderPharm.js b/src/components/eln/ElnFinderPharm.js index eb78302e..89821c10 100644 --- a/src/components/eln/ElnFinderPharm.js +++ b/src/components/eln/ElnFinderPharm.js @@ -6,7 +6,7 @@ import ElnStatus from "./ElnStatus"; import ElnFilter from "./elnFilter/ElnFilter"; import ElnStack from "./ElnStack"; -import styles from "@site/src/components/eln/ElnStyles.js"; +import styles from "@site/src/components/eln/ElnStyles"; // const elnData = require("@site/static/assets/eln_test.json"); @@ -14,7 +14,6 @@ function ElnFinderPharm(props) { // State for ELN data const [elnData, setElnData] = useState(null); - const [error, setError] = useState(null); // State for filtering @@ -32,7 +31,6 @@ function ElnFinderPharm(props) { console.log(data); }) .catch((error) => { - setError(error); console.error(error); }); }, []); diff --git a/src/components/eln/elnFilter/ElnFilter.js b/src/components/eln/elnFilter/ElnFilter.js index 47333215..789f8f7b 100644 --- a/src/components/eln/elnFilter/ElnFilter.js +++ b/src/components/eln/elnFilter/ElnFilter.js @@ -3,7 +3,7 @@ import React from "react"; import TextSearch from "./TextSearch"; import FilterButton from "./FilterButton"; -import styles from "@site/src/components/eln/ElnStyles.js"; +import styles from "@site/src/components/eln/ElnStyles"; // Assemble buttons for filtering section diff --git a/src/components/eln/elnFilter/FilterButton.js b/src/components/eln/elnFilter/FilterButton.js index 6363072e..92b0ee7b 100644 --- a/src/components/eln/elnFilter/FilterButton.js +++ b/src/components/eln/elnFilter/FilterButton.js @@ -1,4 +1,4 @@ -import styles from "@site/src/components/eln/ElnStyles.js"; +import styles from "@site/src/components/eln/ElnStyles"; import clsx from "clsx"; function FilterButton(props) { diff --git a/src/components/eln/elnFilter/TextSearch.js b/src/components/eln/elnFilter/TextSearch.js index 8dfc2d08..442504be 100644 --- a/src/components/eln/elnFilter/TextSearch.js +++ b/src/components/eln/elnFilter/TextSearch.js @@ -1,4 +1,4 @@ -import styles from "@site/src/components/eln/ElnStyles.js"; +import styles from "@site/src/components/eln/ElnStyles"; function TextSearch({ resultOutput, filter, setFilter }) { const handleChange = (e) =>