Homec4science
Diffusion webapp_nextjs (master) Browse

R13029/app/components/ForceGraph/ForceGraph_bu.js
8e00ed1ceed9master

Last Change
Raw File

ForceGraph_bu.js
View Options

'use client'
import {useState} from "react";
function ShowGraphButton() {
return (
<div className="row">
<div className="col-12">
<button id="showGraphButton" className="btn btn-primary" style={{display: 'none'}}>Show Graph</button>
</div>
</div>
)
}
function Controlers() {
[nConceptsVisible, setNConceptsVisible] = useState(100);
[nPeopleVisible, setNPeopleVisible] = useState(1);
[sizeNodes, setSizeNodes] = useState(100);
[nodePlacement, setNodePlacement] = useState('No_circle');
const handleInputConceptsVisible = (event) => {
setNConceptsVisible(event.target.value);
};
const handleInputPeopleVisible = (event) => {
setNPeopleVisible(event.target.value);
};
const handleInputSizeNodes = (event) => {
setSizeNodes(event.target.value);
};
return (
<div id="controlers">
<div id="zoom">
Zoom
<button id="zoomIn" className="zoomButton">+</button>
<button id="zoomOut" className="zoomButton">-</button>
</div>
<hr/>
<label className="form-label" htmlFor="nConceptsVisible"> Number of nodes </label>
<div className="slidecontainer">
<button id="nConceptsVisibleMinus" className="rangeControllerButtonConcept">-
</button>
<button id="nConceptsVisiblePlus" className="rangeControllerButtonConcept">+
</button>
<input type="range"
value={nConceptsVisible}
min="0"
max="100"
onInput={handleInputConceptsVisible}
style={{width: '60%'}}
id="nConceptsVisible"
className="conceptRange"
></input>
<output>100%</output>
</div>
<div className="slidecontainer">
<button id="nPeopleVisibleMinus" className="rangeControllerButtonPeople">-</button>
<button id="nPeopleVisiblePlus" className="rangeControllerButtonPeople">+</button>
<input type="range"
value={nPeopleVisible}
min="0"
max="100"
onInput={handleInputPeopleVisible}
style={{width: '60%'}}
id="nPeopleVisible"
className="peopleRange"
></input>
<output>{nPeopleVisible}%</output>
</div>
<hr/>
<label className="form-label" htmlFor="conceptSize"> Node Size </label>
<div className="slidecontainer">
<button id="sizeConceptsMinus" className="rangeControllerButtonGeneral">-
</button>
<button id="sizeConceptsPlus" className="rangeControllerButtonGeneral">+
</button>
<input type="range"
value={sizeNodes}
min="1"
max="100"
onInput={handleInputSizeNodes}
style={{width: '60%'}}
id="conceptSize"
className="nodeSizeRange"
></input>
<output>50%</output>
</div>
<hr/>
<div>
<input type="radio" className="radio" name="Circle" value="People_on_circle"
id="People_on_circle"
checked={nodePlacement === 'People_on_circle'}
onChange={() => setSelectedOption('People_on_circle')}
></input>
<label htmlFor="People_on_circle"> People on circle</label>
<br/>
<input type="radio" className="radio" name="Circle"
value="Concepts_on_circle"
id="Concepts_on_circle"
checked={nodePlacement === 'Concepts_on_circle'}
onChange={() => setSelectedOption('Concepts_on_circle')}
></input>
<label htmlFor="Concepts_on_circle">Concepts on circle</label>
<br/>
<input type="radio" className="radio" name="Circle"
value="No_circle" id="No_circle"
checked={nodePlacement === 'No_circle'}
onChange={() => setSelectedOption('No_circle')}
>
</input>
<label htmlFor="No_circle">No circle</label>
</div>
<hr/>
<div>
<input type="checkbox" className="checkbox" name="links"
value="showLinks" id="showLinks" checked></input>
<label htmlFor="showLinks"> Show Links</label>
</div>
<div>
<button id="runFreezeSimulation">Recompute positionning</button>
</div>
</div>
)
}
export default function ForceGraph_bu() {
return <div>
<ShowGraphButton></ShowGraphButton>
<br/>
<div className="container" id="chartContainer" style={{display: 'none'}}>
<div className="row">
<div className="col-3">
</div>
<div id="col9ForSVG" className="col-9">
<div id="chart">
</div>
</div>
</div>
</div>
</div>
}
c4science · Help