Page MenuHomec4science
Files F100152473

page.js
No OneTemporary
Actions

File Metadata

Created
Tue, Jan 28, 14:14

page.js
View Options

'use client'
import Header from '../components/header/Header';
import SearchBar from "@/app/components/searchBar/SearchBar";
import ConceptBoxes from "@/app/components/conceptBoxes/ConceptBoxes";
import ForceGraph from "@/app/components/ForceGraph/ForceGraph";
import ToolTip from "@/app/components/toolTip/ToolTip";
import {useState, useLayoutEffect, useRef, useEffect} from "react";
import TabulatorTable from "@/app/components/TabulatorTable/TabulatorTable";
import SemanticMap from "@/app/components/SemanticMap/SemanticMap";
import freeTextSearch from "@/app/utils/utils";
export default function Test() {
// console.log("rendering page")
const [searchData, setSearchData] = useState({
'tableColumnsInRightOrder': [],
'table': [],
'conceptsToAddBoxes': [],
'conceptsOfPeople': {}
});
const [searchTerm, setSearchTerm] = useState('');
const [tableColumnsInRightOrder, setTableColumnsInRightOrder] = useState([]);
const [searchEntity, setSearchEntity] = useState('courses');
const [activeFilters, setActiveFilters] = useState({});
const [toolTipVisible, setToolTipVisible] = useState(false);
const [toolTipContent, setToolTipContent] = useState(null);
const [dataDisplayed, setDataDisplayed] = useState([]);
const [renderForceGraph, setRenderForceGraph] = useState(true)
const graphRef = useRef();
const [scrollYPosition, setScrollYPosition] = useState(0);
const handleRemoveNode = (nodeName) => {
graphRef.current.removeNode(nodeName);
};
useEffect(() => {
console.log('datadisplayed', dataDisplayed)
}, [dataDisplayed])
// useEffect(() => {
// const handleScroll = () => {
// setScrollYPosition(window.scrollY);
// };
//
// window.addEventListener('scroll', handleScroll);
//
// return () => {
// window.removeEventListener('scroll', handleScroll);
// };
// }, []);
// useEffect(() => {
// if (searchData !== null) {
// setTimeout(() => {
// window.scrollTo(0, scrollYPosition);
// console.log("Restored scroll position: ", scrollYPosition);
// }, 1);
// }
// }, [searchData]);
// receives data from server and sets it in state searchData
const handleSearchData = (data) => {
// setSearchExecuted(prev => !prev)
console.log("data", data)
data['tableColumnsInRightOrder'] = data['tableColumnsInRightOrder'].filter(function (d) {
return !['CourseCode', 'SectionCode', 'School', 'Level', 'SCIPERprofessors', 'Summary', 'Professors', 'Title', 'courseCode', 'id'].includes(d)
})
setSearchData(data);
};
return (
<div className="round-card page-content-table table-responsive padding-20">
<div className="container" style={{display: 'flex', flexDirection: 'column', minHeight: '120vh'}}>
<Header
englishTutorialURL={'https://youtu.be/x8sp1veIp1E'}
frenchTutorialURL={'https://youtu.be/YyIGo-g755I'}/>
<SearchBar
handleSearchData={handleSearchData}
setSearchEntity={setSearchEntity}
searchEntity={searchEntity}
conceptsOrVectors={'concepts'}
freeTextSearch={freeTextSearch}
setRenderForceGraph={setRenderForceGraph}
searchData={searchData}
setSearchData={setSearchData}
searchTerm={searchTerm}
setSearchTerm={setSearchTerm}
></SearchBar>
<ToolTip
toolTipVisible={toolTipVisible}
toolTipContent={toolTipContent}
></ToolTip>
<ConceptBoxes
tableColumnsInRightOrder={tableColumnsInRightOrder}
setToolTipVisible={setToolTipVisible}
setToolTipContent={setToolTipContent}
searchData={searchData}
setSearchData={setSearchData}
searchEntity={searchEntity}
freeTextSearch={freeTextSearch}
setRenderForceGraph={setRenderForceGraph}
removeNodeInGraph={handleRemoveNode}
>
</ConceptBoxes>
<TabulatorTable searchData={searchData}
searchEntity={searchEntity}
setToolTipVisible={setToolTipVisible}
setToolTipContent={setToolTipContent}
activeFilters={activeFilters}
setDataDisplayed={setDataDisplayed}
conceptsOrVectors={'concepts'}
searchTerm={searchTerm}
></TabulatorTable>
<ForceGraph
dataDisplayed={dataDisplayed}
searchEntity={searchEntity}
tableColumns={searchData['tableColumnsInRightOrder']}
searchData={searchData}
setSearchData={setSearchData}
renderForceGraph={renderForceGraph}
setRenderForceGraph={setRenderForceGraph}
ref={graphRef}
></ForceGraph>
<SemanticMap
dataDisplayed={dataDisplayed}
searchEntity={searchEntity}
></SemanticMap>
</div>
</div>
)
}

Event Timeline

c4science · Help