Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F120283493
page.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
Thu, Jul 3, 06:17
Size
3 KB
Mime Type
text/x-java
Expires
Sat, Jul 5, 06:17 (1 d, 16 h)
Engine
blob
Format
Raw Data
Handle
27166530
Attached To
R13029 webapp_nextjs
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 {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
Log In to Comment