From 04324b781ad69c18fe48c376a118447660c4d3fd Mon Sep 17 00:00:00 2001 From: Bianca Date: Mon, 25 Mar 2024 15:28:19 -0600 Subject: [PATCH] button css --- frontend/components/Basket/Basket.js | 7 +- .../ResultTable/TableButtons.js | 3 +- .../Search/StandardSearch/StandardSearch.js | 8 ++ frontend/components/Viewing/MetadataInfo.js | 47 +++---- .../Viewing/PageJSON/Types/Model3.json | 63 +++++++++ frontend/components/Viewing/ViewHeader.js | 56 ++++++-- frontend/pages/advanced-search.js | 122 ++++++++++++++++++ frontend/styles/view.module.css | 25 ++++ 8 files changed, 293 insertions(+), 38 deletions(-) create mode 100644 frontend/components/Viewing/PageJSON/Types/Model3.json create mode 100644 frontend/pages/advanced-search.js diff --git a/frontend/components/Basket/Basket.js b/frontend/components/Basket/Basket.js index bbd59c49..1c3ef995 100644 --- a/frontend/components/Basket/Basket.js +++ b/frontend/components/Basket/Basket.js @@ -17,6 +17,7 @@ import Table from '../Reusable/Table/Table'; import TableButton from '../Reusable/TableButton'; import BasketItem from './BasketItem'; import CreateCollection from './CreateCollection'; +import { useTheme } from '../Admin/Theme'; const searchable = ['name', 'displayId', 'type', 'description']; @@ -37,6 +38,7 @@ export default function Basket() { const [buttonEnabled, setButtonEnabled] = useState(false); const [itemsToAddToCollection, setItemsToAddToCollection] = useState([]); const [createCollectionMode, setCreateCollectionMode] = useState(false); + const { theme } = useTheme(); useEffect(() => { dispatch(restoreBasket()); @@ -71,7 +73,7 @@ export default function Basket() { setShowBasket(true)} /> @@ -160,6 +162,7 @@ export default function Basket() { item={item} selected={selected} setSelected={setSelected} + theme={theme} /> )} /> @@ -272,4 +275,4 @@ const sortMethods = { compareStrings(submission1.type, submission2.type), version: (submission1, submission2) => compareStrings(submission1.version, submission2.version) -}; +}; \ No newline at end of file diff --git a/frontend/components/Search/StandardSearch/ResultTable/TableButtons.js b/frontend/components/Search/StandardSearch/ResultTable/TableButtons.js index 48d57247..f4c64531 100644 --- a/frontend/components/Search/StandardSearch/ResultTable/TableButtons.js +++ b/frontend/components/Search/StandardSearch/ResultTable/TableButtons.js @@ -36,7 +36,8 @@ export default function TableButtons(properties) { dispatch(addToBasket(itemsChecked)); }} > - + Add to Basket diff --git a/frontend/components/Search/StandardSearch/StandardSearch.js b/frontend/components/Search/StandardSearch/StandardSearch.js index 4e928054..7b69f0b7 100644 --- a/frontend/components/Search/StandardSearch/StandardSearch.js +++ b/frontend/components/Search/StandardSearch/StandardSearch.js @@ -11,6 +11,7 @@ import Options from '../AdvancedSearch/Options'; const { publicRuntimeConfig } = getConfig(); import SearchHeader from '../SearchHeader/SearchHeader'; import { processUrl } from '../../Admin/Registries'; +import { useTheme } from '../../Admin/Theme'; import { countloader, @@ -28,7 +29,10 @@ import ResultTable from './ResultTable/ResultTable'; * This component handles a basic 'string search' from users on sbh, * otherwise known as a standard search */ + + export default function StandardSearch() { + const { theme} = useTheme(); const query = useSelector(state => state.search.query); const offset = useSelector(state => state.search.offset); const limit = useSelector(state => state.search.limit); @@ -226,6 +230,10 @@ if (isError) { className={advStyles.searchbutton} role="button" onClick={constructSearch} + style={{ + backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333 + color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff + }} > - {isEditingThisItem ? ( - // Edit mode -
- handleEditMetadata(index, e.target.value, label)} - /> - - -
- ) : ( - // Display mode - - {processedSource} - - )} + {isEditingThisItem ? ( + // Edit mode +
+ handleEditMetadata(index, e.target.value, label)} + /> + + +
+ ) : ( + // Display mode + + {processedSource} + + )} + {(label === "Source" || label === "Type" || label === "Role") && data && ( @@ -425,8 +426,8 @@ export default function MetadataInfo({ title, link, label, icon, specific, uri, value={newMetadata} onChange={(e) => setNewMetadata(e.target.value)} /> - - + diff --git a/frontend/components/Viewing/PageJSON/Types/Model3.json b/frontend/components/Viewing/PageJSON/Types/Model3.json new file mode 100644 index 00000000..0a0326ba --- /dev/null +++ b/frontend/components/Viewing/PageJSON/Types/Model3.json @@ -0,0 +1,63 @@ + +{ + + "type": "http://sbols.org/v3#Model", + "prefixes": [ + "PREFIX rdf: ", + "PREFIX dcterms: ", + "PREFIX dc: ", + "PREFIX sbh: ", + "PREFIX prov: ", + "PREFIX sbol: ", + "PREFIX xsd: ", + "PREFIX rdfs: ", + "PREFIX purl: " + ], + "metadata": [ + { + "title": "Language", + "icon": "faVials", + "rootPredicate": "sbol:language", + "sections": [ + { + "title": "lang", + "predicates": [ + ], + "link": "$" + } + ] + }, + { + "title": "Framework", + "rootPredicate": "sbol:framework", + "icon": "faVials", + "sections": [ + { + "title": "framework", + "predicates": [], + "link": "$", + "stripAfter": "/" + } + ] + }, + { + "title": "Model File", + "rootPredicate": "sbol:source", + "icon": "faVials", + "sections": [ + { + "title": "mfile", + "predicates": [], + "link": "$" + } + ] + } + ], + "tables": [], + "pages": [ + "Details", + "Other Properties", + "Member of these Collections", + "Attachments" + ] + } \ No newline at end of file diff --git a/frontend/components/Viewing/ViewHeader.js b/frontend/components/Viewing/ViewHeader.js index 7c0bdb56..05ed56c2 100644 --- a/frontend/components/Viewing/ViewHeader.js +++ b/frontend/components/Viewing/ViewHeader.js @@ -24,6 +24,10 @@ export default function ViewHeader(properties) { const [displayedDescription, setDisplayedDescription] = useState(properties.description); const [isEditingDescription, setIsEditingDescription] = useState(false); const [editedDescription, setEditedDescription] = useState(properties.description); + // State variables for handling similar, twins, and uses results + const [similarData, setSimilarData] = useState(null); + const [twinsData, setTwinsData] = useState(null); + const [usesData, setUsesData] = useState(null); var displayTitle = properties.type; if (properties.type.includes('#')) { @@ -49,6 +53,34 @@ export default function ViewHeader(properties) { var isOwner = isUriOwner(objectUri, username); console.log(objectUri); + /* + const url = `${getUrl(objectType, 'objectType')}${getUrl( + creator, + 'dc:creator' + )}${getUrl(role, 'sbol2:role')}${getUrl( + sbolType, + 'sbol2:type' + )}${collectionUrls}${getUrl( + created[0].startDate, + 'createdAfter', + true + )}${getUrl(created[0].endDate, 'createdBefore', true)}${getUrl( + modifed[0].startDate, + 'modifedAfter', + true + )}${getUrl( + modifed[0].endDate, + 'modifedBefore', + true + )}${constructExtraFilters()}`; + setUrl(url); + + /// this is for the table? +
+ + +
+ */ const similar = () => { axios.get(`${objectUri}/similar`, { @@ -58,7 +90,7 @@ export default function ViewHeader(properties) { } }) .then(response => { - console.log(response.data); + setSimilarData(response.data) }) .catch(error => { console.error('Error fetching similar: ', error); @@ -72,7 +104,7 @@ export default function ViewHeader(properties) { } }) .then(response => { - console.log(response.data); + setTwinsData(response.data); }) .catch(error => { console.error('Error fetching twins: ', error); @@ -86,7 +118,7 @@ export default function ViewHeader(properties) { } }) .then(response => { - console.log(response.data); + setUsesData(response.data); }) .catch(error => { console.error('Error fetching uses: ', error); @@ -212,8 +244,8 @@ export default function ViewHeader(properties) { value={editedTitle} onChange={(e) => setEditedTitle(e.target.value)} /> - - + + ) : (
@@ -259,17 +291,17 @@ export default function ViewHeader(properties) {
-
0 ? "Find all records with terms in common with this description" : ""}> {isEditingDescription ? (
- setEditedDescription(e.target.value)} /> - - + +
) : (
@@ -305,13 +337,13 @@ export default function ViewHeader(properties) {
{properties.search.similar && ( - + )} {properties.search.twins && ( - + )} {properties.search.uses && ( - + )}
diff --git a/frontend/pages/advanced-search.js b/frontend/pages/advanced-search.js new file mode 100644 index 00000000..6ab3c072 --- /dev/null +++ b/frontend/pages/advanced-search.js @@ -0,0 +1,122 @@ +import { faHatWizard } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { useRouter } from 'next/router'; +import { useState } from 'react'; + +import Options from '../components/Search/AdvancedSearch/Options'; +import SearchHeader from '../components/Search/SearchHeader/SearchHeader'; +import TopLevel from '../components/TopLevel'; +import styles from '../styles/advancedsearch.module.css'; + +export default function AdvancedSearch() { + const [creator, setCreator] = useState(''); + const [created, setCreated] = useState([ + { + startDate: null, + endDate: null, + key: 'selection' + } + ]); + const [modifed, setModified] = useState([ + { + startDate: null, + endDate: null, + key: 'selection' + } + ]); + const [keyword, setKeyword] = useState(''); + const [objectType, setObjectType] = useState(''); + const [role, setRole] = useState(''); + const [sbolType, setSbolType] = useState(''); + const [collections, setCollections] = useState([]); + const [extraFilters, setExtraFilters] = useState([]); + + const router = useRouter(); + + const constructSearch = () => { + let collectionUrls = ''; + for (const collection of collections) { + collectionUrls += getUrl(collection.value, 'collection'); + } + const url = `/search/${getUrl(objectType, 'objectType')}${getUrl( + creator, + 'dc:creator' + )}${getUrl(role, 'sbol2:role')}${getUrl( + sbolType, + 'sbol2:type' + )}${collectionUrls}${getUrl( + created[0].startDate, + 'createdAfter', + true + )}${getUrl(created[0].endDate, 'createdBefore', true)}${getUrl( + modifed[0].startDate, + 'modifedAfter', + true + )}${getUrl( + modifed[0].endDate, + 'modifedBefore', + true + )}${constructExtraFilters()}`; + router.push(url); + }; + + const constructExtraFilters = () => { + let url = ''; + for (const filter of extraFilters) { + if (filter.filter && filter.value) + url += getUrl(filter.value, filter.filter); + } + return url; + }; + + const getUrl = (value, term, isDate = false) => { + if (value) { + if (!isDate) return `${term}=<${encodeURIComponent(value)}>&`; + return `${term}=${encodeURIComponent(value.toISOString().slice(0, 10))}&`; + } + return ''; + }; + + return ( + +
+ +
+
+ + +
{ + constructSearch(); + }} + > + +
Search
+
+
+
+
+ + ); +} diff --git a/frontend/styles/view.module.css b/frontend/styles/view.module.css index ce6c9c1d..65d5ddd7 100644 --- a/frontend/styles/view.module.css +++ b/frontend/styles/view.module.css @@ -410,6 +410,18 @@ cursor: pointer; } +.saveANDcancel { + background-color: #D25627; /* This is a vibrant orange color */ + color: #fff; /* White text for good contrast */ + border: none; /* Remove default border */ + cursor: pointer; /* Add cursor pointer for better UX */ + font-family: 'Kardia Fit', sans-serif; + font-weight: 600; + margin: 0.5rem 0.2rem 0.5rem 0.5rem; + padding: 0.5rem; + border-radius: 0.3rem 0.3rem 0.3rem 0.3rem; +} + .description div { margin-top: 0.5rem; padding-left: 0.5rem; @@ -418,6 +430,7 @@ font-size: 1rem; cursor: pointer; width: fit-content; + } .description { @@ -1094,4 +1107,16 @@ margin-left: 5px; /* Adds a bit of space between the title and the icon */ } +.simANDTwinbutton { + background-color: #D25627; /* This is a vibrant orange color */ + color: #fff; /* White text for good contrast */ + border: none; /* Remove default border */ + cursor: pointer; /* Add cursor pointer for better UX */ + font-family: 'Kardia Fit', sans-serif; + font-weight: 600; + margin: 0.5rem 0.2rem 0.5rem 0.5rem; + padding: 0.5rem; + border-radius: 0.3rem 0.3rem 0.3rem 0.3rem; +} +