Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F98650970
SearchBar.js
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Wed, Jan 15, 07:01
Size
10 KB
Mime Type
text/x-java
Expires
Fri, Jan 17, 07:01 (2 d)
Engine
blob
Format
Raw Data
Handle
23620511
Attached To
R13029 webapp_nextjs
SearchBar.js
View Options
'use client'
import React, {useEffect, useState} from 'react';
import './searchBar.css'
import freeTextSearch from "@/app/utils/utils";
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import autocomplete from "tabulator-tables/src/js/modules/Edit/defaults/editors/autocomplete";
import {getAutocompleteSuggestions} from "@/app/utils/utils";
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import SearchIcon from '@mui/icons-material/Search'; // Material-UI Icons
import {callbackAddConceptsToBoxes} from "@/app/utils/utils";
function SearchButton({
searchTerm,
setSearchTerm,
handleSearchData,
searchEntity,
nResults,
conceptsOrVectors,
setRenderForceGraph,
searchData,
setSearchData
}) {
return (
<div className='btn-group2'>
<button
type="button"
id="submit"
style={{height: '80%', width: '100%', backgroundColor: 'rgba(191,0,0,255)'}}
onClick={() => {
setRenderForceGraph(true)
freeTextSearch(
searchTerm,
nResults,
searchEntity,
handleSearchData,
conceptsOrVectors,
searchData,
setSearchData);
}
}
>
<i className="fa fa-search"></i>
</button>
<button
id="removeConceptsButton"
style={{height: '20%', backgroundColor: 'rgba(120,0,0,255)'}}
onClick={() => setSearchTerm('')}
>
Reset Search
</button>
</div>
)
}
function RadioButtons({setSearchEntity, searchEntity}) {
return (
<div>
<input type="radio" className="radio" name="searchEntity" value="research" id="research"
checked={searchEntity === 'research'}
onChange={() => setSearchEntity('research')}/>
<label htmlFor="research">People (research)</label>
<input type="radio" className="radio" name="searchEntity" value="teaching" id="teaching"
checked={searchEntity === 'teaching'}
onChange={() => setSearchEntity('teaching')}/>
<label htmlFor="teaching">People (teaching)</label>
<input type="radio" className="radio" name="searchEntity" value="courses" id="courses"
checked={searchEntity === 'courses'}
onChange={() => setSearchEntity('courses')}
/>
<label htmlFor="courses">Courses</label>
<input type="radio" className="radio" name="searchEntity" value="labs" id="labs"
checked={searchEntity === 'labs'}
onChange={() => setSearchEntity('labs')}
/>
<label htmlFor="labs">Labs</label>
<input type="radio" className="radio" name="searchEntity" value="publications" id="publications"
checked={searchEntity === 'publications'}
onChange={() => setSearchEntity('publications')}
/>
<label htmlFor="publications">Publications</label>
</div>
)
}
function NResultsSelector({setNResults, nResults}) {
// const [numResults, setNumResults] = useState(30);
// console.log("nResults", nResults)
const handleChange = (event) => {
setNResults(event.target.value);
};
return (
<div style={{display: 'flex', alignItems: 'center'}}>
<label htmlFor="numResults">Number of results: </label>
<input
type="number"
id="numResults"
name="numResults"
value={String(nResults)}
min="1"
style={{width: '70px', marginLeft: '10px'}}
onChange={handleChange}
/>
</div>
);
}
const SearchBar = ({
handleSearchData,
setSearchEntity,
searchEntity,
conceptsOrVectors,
freeTextSearch,
setRenderForceGraph,
searchData,
setSearchData,
searchTerm,
setSearchTerm
}) => {
const [searchText, setSearchText] = useState('');
const [nResults, setNResults] = useState(30);
const [suggestions, setSuggestions] = useState([]); // State for autocomplete suggestions
console.log('searchBar searchData',searchData)
const handleSearchClick = () => {
console.log('handleSearchClick', searchData)
setRenderForceGraph(true)
console.log('handleSearchClick searchTerm', searchTerm)
if(searchTerm[0] === '#' || searchTerm[0] === '+'){
console.log('#detected')
// console.log('searchTerm', searchTerm,
// 'nResults', nResults,
// 'searchEntity', searchEntity,
// 'callbackAddConceptsToBoxes', callbackAddConceptsToBoxes,
// 'conceptsOrVectors', conceptsOrVectors,
// 'searchData', searchData,
// 'setSearchData', setSearchData)
freeTextSearch(
searchTerm,
nResults,
searchEntity,
callbackAddConceptsToBoxes,
conceptsOrVectors,
searchData,
setSearchData
);
}
else{
console.log('no # detected')
freeTextSearch(
searchTerm,
nResults,
searchEntity,
handleSearchData,
conceptsOrVectors,
searchData,
setSearchData
);
}
}
// do search if searchEntity changes
useEffect(() => {
if (searchTerm) {
freeTextSearch(
searchTerm,
nResults,
searchEntity,
handleSearchData,
conceptsOrVectors
);
}
}, [searchEntity]);
useEffect(() => {
if (searchTerm && (searchTerm.startsWith('#') || searchTerm.startsWith('+'))) {
getAutocompleteSuggestions(searchTerm, searchEntity)
.then(response => response.json())
.then(data => {
setSuggestions(data.data); // Use server response directly
})
.catch(error => console.error("Error fetching data:", error));
} else {
setSuggestions([]); // Clear suggestions otherwise
}
}, [searchTerm, searchEntity]);
return (
<div className="col-12">
<div className="row">
{/*<textarea*/}
{/* value={searchTerm}*/}
{/* onChange={(e) => setSearchTerm(e.target.value)}*/}
{/* placeholder="Start with # to search for concepts,*/}
{/* Start with + to search for categories,*/}
{/* Otherwise a concept extraction is performed automatically."*/}
{/* id="textarea"*/}
{/* name="query"*/}
{/* cols="30"*/}
{/* rows="10"*/}
{/*></textarea>*/}
<Box display="flex" alignItems="center" gap={1} width={'100%'} sx={{
width: '100%',
height: 100,
borderRadius: 1,
}}>
<Autocomplete
sx={{width: '100%'}}
freeSolo
options={suggestions.map(option => option.label)} // Assuming your suggestions have a 'label' field
onInputChange={(event, newValue) => setSearchTerm(newValue)}
inputValue={searchTerm}
filterOptions={(options) => options}
// renderInput={(params) => (
// <TextField {...params}
// placeholder="Start typing..."
// variant="outlined"
// />
// )}
renderInput={(params) => (
<TextField
{...params}
// id="textarea" // Apply the styles by setting the id
placeholder="Start typing..."
variant="outlined"
fullWidth // Optional, for full width
/>
)}
/>
<Button
variant="contained"
// color="primary"
style={{ backgroundColor: '#c80000' }}
onClick={handleSearchClick}
>
<SearchIcon />
</Button>
</Box>
{/*<SearchButton*/}
{/* searchTerm={searchTerm}*/}
{/* setSearchTerm={setSearchTerm}*/}
{/* handleSearchData={handleSearchData}*/}
{/* searchEntity={searchEntity}*/}
{/* nResults={nResults}*/}
{/* conceptsOrVectors={conceptsOrVectors}*/}
{/* setRenderForceGraph={setRenderForceGraph}*/}
{/* searchData={searchData}*/}
{/* setSearchData={setSearchData}*/}
{/*>*/}
{/*</SearchButton>*/}
</div>
<div className="row">
<RadioButtons
setSearchEntity={setSearchEntity}
searchEntity={searchEntity}>
</RadioButtons>
</div>
{/* Conditionally render NResultsSelector */}
{conceptsOrVectors === 'vectors' && (
<div className="row">
<NResultsSelector
setNResults={setNResults}
nResults={nResults}>
</NResultsSelector>
</div>
)}
<button id="showConceptBoxesButton" className="btn btn-primary" style={{display: 'none'}}>Hide Concepts
</button>
<div className="row">
<div id="selected-id"></div>
</div>
</div>
);
}
;
export default React.memo(SearchBar);
Event Timeline
Log In to Comment