Skip to content

Commit

Permalink
Code update on 18.10.2024
Browse files Browse the repository at this point in the history
  • Loading branch information
@g-nardiello
g-nardiello committed Oct 18, 2024
1 parent f2f2620 commit 20bf567
Show file tree
Hide file tree
Showing 12 changed files with 774 additions and 87 deletions.
175 changes: 147 additions & 28 deletions app/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,84 @@
'use client';

import { Box, Button, ButtonIcon, SearchIcon, Input, InputField, Icon, Text, Link } from '@gluestack-ui/themed';
import { UserRound } from 'lucide-react';
import React from 'react';
import { Search, UserRound } from 'lucide-react';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
import Select, { components } from 'react-select';

interface Concept {
value: string;
label: string;
}

const Navbar: React.FC = () => {
const [concepts, setConcepts] = useState<Concept[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [selectedTerm, setSelectedTerm] = useState('');
const router = useRouter();

const fetchConcepts = async () => {
try {
setLoading(true);
setError(null);
const response = await fetch('/api/getAllConceptMap');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();

if (!data.allConceptMap || Object.keys(data.allConceptMap).length === 0) {
throw new Error('No concepts found in the response');
}

const conceptsArray: Concept[] = Object.entries(data.allConceptMap).map(([key, value]) => ({
value: key,
label: String(value),
}));

conceptsArray.sort((a, b) => a.label.localeCompare(b.label));

setConcepts(conceptsArray);
} catch (error) {
console.error('Errore durante il fetch dei concetti:', error);
setError('Failed to load concepts. Please try again later.');
} finally {
setLoading(false);
}
};

useEffect(() => {
fetchConcepts();
}, []);

const handleNavigation = (selectedOption: Concept | null) => {
if (selectedOption) {
const parts = selectedOption.value.split('/');

if (parts.length >= 3) {
const vocabulary = parts[parts.length - 2];
const term = parts[parts.length - 1];

router.push(`/${vocabulary}/${term}`);
} else {
console.warn("URL non valido: ", selectedOption.value);
router.push(selectedOption.value);
}
}
};

const DropdownIndicator = (props: any) => {
return (
<components.DropdownIndicator {...props}>
<Search
size={16}
onClick={() => handleNavigation(props.selectProps.value)}
/>
</components.DropdownIndicator>
);
};

return (
<Box
flexDirection='row'
Expand All @@ -27,35 +101,80 @@ const Navbar: React.FC = () => {

<Text fontSize={16} ml={40} color='red' alignContent='center' fontWeight='$semibold'>Pilot Project</Text>
</Box>
<Box w='33%' alignItems='center' justifyContent='center' flexDirection='row' display='none'>
<Button
size="sm"
variant="link"
action="primary"
isDisabled={false}
isFocusVisible={false}
mr={5}
>
<ButtonIcon as={SearchIcon} color='black' width={20} height={20} />
</Button>
<Input
variant="outline"
size="sm"
isDisabled={false}
isInvalid={false}
isReadOnly={false}
w='100%'
borderColor='#dee2e6'
>
<InputField placeholder="Search..." />
</Input>
</Box>
{loading ? (
<Text>Loading concepts...</Text>
) : error ? (
<Text color="red">{error}</Text>
) : (
<Box w={'33%'}>
<Select
value={concepts.find(option => option.value === selectedTerm)}
onChange={(selectedOption) => {
setSelectedTerm(selectedOption ? selectedOption.value : '');
handleNavigation(selectedOption);
}}
onKeyDown={(event) => {
if (event.key === 'Enter' && selectedTerm) {
const selectedOption = concepts.find(option => option.value === selectedTerm);
handleNavigation(selectedOption || null);
}
}}
options={concepts}
placeholder="Search term"
isSearchable={true}
classNamePrefix="react-select"
menuPortalTarget={document.body}
components={{ DropdownIndicator }}
styles={{
control: (provided) => ({
...provided,
fontSize: '14px',
color: 'black',
width: '100%'
}),
singleValue: (provided) => ({
...provided,
fontSize: '12px',
color: 'black',
}),
placeholder: (provided) => ({
...provided,
fontSize: '12px',
color: 'black',
fontWeight: 'bold'
}),
option: (provided) => ({
...provided,
fontSize: '14px',
color: 'black',
}),
menu: (provided) => ({
...provided,
}),
dropdownIndicator: (provided) => ({
...provided,
color: '#999',
'&:hover': {
color: '#666',
},
cursor: 'pointer',
}),
input: (provided) => ({
...provided,
color: 'black',
fontSize: '14px',
fontWeight: 'bold'
}),
}}
/>
</Box>

<Box w='33%' alignItems='flex-end' display='none'>
<Icon as={UserRound} width={30} height={30} strokeWidth={1} />
)}
<Box w='33%' alignItems='flex-end' /* display='none' */>
{/* <Icon as={UserRound} width={30} height={30} strokeWidth={1} /> */}
</Box>
</Box>
);
}

export default Navbar;
export default Navbar;
36 changes: 27 additions & 9 deletions app/components/VocabolaryTerm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ import { BreadCrumbsData } from '../models/breadCrumbsInterface';
interface VocabolaryTermProps {
termData: TermData | null;
breadCrumbsData: BreadCrumbsData;
allConceptMap: Map<string, string>;
}

const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsData }) => {
const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsData, allConceptMap }) => {
/**
* Extracts the label or identifier from a URL by manipulating the URL string.
*
Expand All @@ -23,6 +24,17 @@ const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsDa
const parts = url.replace('#', '/').split('/');
return parts.pop();
};
const getTermLabel = (term: string, isBadge: boolean) => {
console.log(allConceptMap);
if (!allConceptMap || allConceptMap.size === 0) {
return "Map is not available";
}
if (isBadge) {
return allConceptMap.get(term) || `[${extractLabel(term)}]`;
} else {
return allConceptMap.get(term) || term;
}
};
/**
* Retrieve the path of images based on the label indicating the language
*/
Expand Down Expand Up @@ -147,9 +159,12 @@ const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsDa
<AccordionContent bgColor='$white' ml={15}>
{termData.relatedTerms.Broader.length > 0 ? (
termData.relatedTerms.Broader.map(term => (
<Link href={`/${termData.vocabulary}/${extractLabel(term)}`} mb={1} key={term}>
<LinkText color='black' textDecorationLine='none'>• {extractLabel(term)}</LinkText>
</Link>
<Box flexDirection='row'>
<Text>•</Text>
<Link href={`/${termData.vocabulary}/${extractLabel(term)}`} mb={1} key={term}>
<LinkText color='#7c7c7c' textDecorationLine='none'> {getTermLabel(term, false)}</LinkText>
</Link>
</Box>
))
) : (
<Text color='$secondary300'>No Broader concepts...</Text>
Expand All @@ -174,9 +189,12 @@ const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsDa
<AccordionContent bgColor='$white' ml={15}>
{termData.relatedTerms.Narrower.length > 0 ? (
termData.relatedTerms.Narrower.map(term => (
<Link href={`/${termData.vocabulary}/${extractLabel(term)}`} mb={1} key={term}>
<LinkText color='black' textDecorationLine='none'>• {extractLabel(term)}</LinkText>
</Link>
<Box flexDirection='row'>
<Text>•</Text>
<Link href={`/${termData.vocabulary}/${extractLabel(term)}`} mb={1} key={term}>
<LinkText color='#7c7c7c' textDecorationLine='none'> {getTermLabel(term, false)}</LinkText>
</Link>
</Box>
))
) : (
<Text color='$secondary300'>No Narrowers concepts...</Text>
Expand Down Expand Up @@ -206,14 +224,14 @@ const VocabolaryTerm: React.FC<VocabolaryTermProps> = ({ termData, breadCrumbsDa
<Text>•</Text>
<Badge bg='#e0e0e0' variant='muted' borderRadius="$full" ml={2} mr={2}>
<BadgeText color='#7c7c7c' fontSize={12} fontWeight={'$bold'} mb={1}>
{extractLabel(predicate)}
{getTermLabel(predicate, true)}
</BadgeText>
</Badge>
<Box ml={4}>
{term.startsWith('http') ? (
<Link href={`${term}`} mb={1} key={`${predicate}-${index}`}>
<Text fontSize={14} color="#7c7c7c" textDecorationLine="none">
{term}
{getTermLabel(term, false)}
</Text>
</Link>
) : (
Expand Down
3 changes: 3 additions & 0 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ export default function RootLayout({
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<meta name="description" content="Developed by Nards IT"></meta>
<meta name="author" content="Nards IT"></meta>
<link rel="author" href="https://nards.it"></link>
</head>
<body className={inter.className}>
<Providers>
Expand Down
2 changes: 1 addition & 1 deletion app/lib/QueryApiClient.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ class QueryExecutor {
.setQuery(sparqlQuery)
.setQueryType(QueryType.SELECT)
.setResponseType(RDFMimeType.SPARQL_RESULTS_XML)
.setLimit(100);
.setLimit(10000);

const queryStream = await repository.query(payload);
const results: any[] = [];
Expand Down
7 changes: 6 additions & 1 deletion app/lib/getConfigQuery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,16 @@ function getQueryConfig(vocabulary) {

const queryBreadcrumbs = config[vocabulary].queryBreadcrumbs;
const queryVocabolo = config[vocabulary].queryVocabolo;
const queryLabelOfAllConcept = config[vocabulary].prefLabelOfAllConcept;
const labelLanguageOrder = config.labelLanguageOrder;

return {
queryBreadcrumbs,
queryVocabolo
queryVocabolo,
queryLabelOfAllConcept,
labelLanguageOrder
};
}

module.exports = { getQueryConfig };

Loading

0 comments on commit 20bf567

Please sign in to comment.