Page MenuHomec4science

page.js
No OneTemporary

File Metadata

Created
Thu, Jul 3, 06:17
'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 {useEffect, useState} from "react";
import TabulatorTable from "@/app/components/tabulatorTable/TabulatorTable";
import TabulatorExample from "@/app/components/TabulatorExample/TabulatorExample";
import throttle from 'lodash/throttle';
export default function Test() {
const [searchData, setSearchData] = useState(null);
const [tableColumnsInRightOrder, setTableColumnsInRightOrder] = useState([]);
const [toolTipVisible, setToolTipVisible] = useState(false);
const [tooltipPosition, setTooltipPosition] = useState({top: 0, left: 0});
const [toolTipContent, setToolTipContent] = useState(null);
const [tableReceived, setTableReceived] = useState([]);
const [format, setFormat] = useState('json');
const [searchEntity, setSearchEntity] = useState('Courses');
const [typeOfTable, setTypeOfTable] = useState('Courses');
const [meanMethod, setMeanMethod] = useState('geometric');
const [loadgraph, setLoadgraph] = useState(false);
const [data, setData] = useState([]);
const updateToolTipPosition_basedOnMouseMove = throttle((event) => {
const {clientX: left, clientY: top} = event;
setTooltipPosition({top, left});
}, 100);
useEffect(() => {
document.addEventListener('mousemove', updateToolTipPosition_basedOnMouseMove);
return () => {
document.removeEventListener('mousemove', updateToolTipPosition_basedOnMouseMove);
};
}, []);
useEffect(() => {
console.log("searchData Top Level", searchData);
console.log('tableReceived', tableReceived)
}, [searchData]);
const handleSearchData = (data) => {
console.log("data", data)
setSearchData(data);
setTableColumnsInRightOrder(
data['tableColumnsInRightOrder'].filter(function (d) {
return !['CourseCode', 'SectionCode', 'School', 'Level', 'SCIPERprofessors', 'Summary', 'Professors', 'Title', 'courseCode', 'id'].includes(d)
}))
setTableReceived(data['table'])
console.log("data Top Level", data)
};
return (
<div className="container" style={{display: 'flex', flexDirection: 'column'}}>
<Header
englishTutorialURL={'https://youtu.be/x8sp1veIp1E'}
frenchTutorialURL={'https://youtu.be/YyIGo-g755I'}/>
<SearchBar
handleSearchData={handleSearchData}></SearchBar>
<ToolTip
toolTipVisible={toolTipVisible}
top={tooltipPosition.top}
left={tooltipPosition.left}
content={toolTipContent}
></ToolTip>
<ConceptBoxes
conceptsToAddBoxes={tableColumnsInRightOrder}
setTableColumnsInRightOrder={setTableColumnsInRightOrder}
setToolTipVisible={setToolTipVisible}
updateToolTipPosition_basedOnMouseMove={updateToolTipPosition_basedOnMouseMove}
setToolTipContent={setToolTipContent}
// style={{display: 'block'}}
>
</ConceptBoxes>
{/*<div style={{ clear: 'both' }}></div>*/}
<TabulatorExample data={tableReceived}
tableColumnsInRightOrder={tableColumnsInRightOrder}
typeOfTable='courses'
// style={{display: 'block'}}
></TabulatorExample>
<ForceGraph></ForceGraph>
</div>
)
}

Event Timeline