hierarchical-estimates-visu.../lib/slider.js

151 lines
4.0 KiB
JavaScript

/* Imports */
import { Slider, Rail, Handles, Tracks, Ticks } from "react-compound-slider";
import React, { useState } from 'react';
// https://sghall.github.io/react-compound-slider/#/getting-started/tutorial
/* Definitions */
const sliderStyle = { // Give the slider some width
position: 'relative',
width: '40em',
height: 40,
border: '5em',
}
const railStyle = {
position: 'absolute',
width: '100%',
height: 15,
marginTop: 32.5,
borderRadius: 5,
backgroundColor: 'lightgrey',
}
/* Support functions */
function Handle({
handle: { id, value, percent },
getHandleProps,
displayFunction,
handleWidth
}) {
return (
<>
<div className="justify-center text-center text-gray-600 text-xs">
{displayFunction(value)}
</div>
<div
style={{
left: `${percent}%`,
position: 'absolute',
marginLeft: -10,
marginTop: 2.5,
zIndex: 2,
width: 30,
height: 30,
cursor: 'pointer',
borderRadius: '0%',
backgroundColor: '#374151',
color: '#374151',
}}
{...getHandleProps(id)}
>
</div>
</>
)
}
function Track({ source, target, getTrackProps }) {
return (
<div
style={{
position: 'absolute',
height: 17.5,
zIndex: 1,
marginTop: 8.25,
backgroundColor: ' #3B82F6',
borderRadius: 5,
cursor: 'pointer',
left: `${source.percent}%`,
width: `${target.percent - source.percent}%`,
}}
{...getTrackProps() /* this will set up events if you want it to be clickeable (optional) */}
/>
)
}
/* Body */
// Two functions, essentially identical.
export function SliderElement({ onChange, value, displayFunction, domain }) {
let toLogDomain = (arr) => [Math.log(arr[0]) / Math.log(10), Math.log(arr[1]) / Math.log(10)]
return (
<Slider
rootStyle={sliderStyle /* inline styles for the outer div. Can also use className prop. */}
domain={toLogDomain([1 / domain, domain])}
values={[value]}
step={0.0001}
onChange={onChange}
reversed={true}
>
<Rail>
{({ getRailProps }) => (
<div style={railStyle} {...getRailProps()} />
)}
</Rail>
<Handles>
{({ handles, getHandleProps }) => (
<div className="slider-handles">
{handles.map(handle => (
<Handle
key={handle.id}
handle={handle}
getHandleProps={getHandleProps}
displayFunction={displayFunction}
handleWidth={"15em"}
/>
))}
</div>
)}
</Handles>
<Tracks right={false}>
{({ tracks, getTrackProps }) => (
<div className="slider-tracks">
{tracks.map(({ id, source, target }) => (
<Track
key={id}
source={source}
target={target}
getTrackProps={getTrackProps}
/>
))}
</div>
)}
</Tracks>
</Slider>
)
}
export function SubmitSliderButton({ posList, binaryComparisons, sliderValue, reasoning, toComparePair, nextStepSlider }) {
// This element didn't necessarily have to exist, but it made it easier for debugging purposes
let onClick = (event) => {
//event.preventDefault();
let obj = { posList, binaryComparisons, sliderValue, reasoning, element1: toComparePair[1], element2: toComparePair[0] }
//
console.log("input@SubmitSliderButton")
console.log(obj)
if (!!Number(sliderValue) && sliderValue >= 0) {
nextStepSlider(obj)
} else if (!!Number(sliderValue) && sliderValue < 0) {
alert("Negative numbers not yet allowed")
} else {
alert("Your input is not a number")
}
}
return (<button
className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5"
onClick={onClick}>
Submit
</button>)
}