hierarchical-estimates-visualizer/lib/slider.js

/* 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,
  dontPushSubmitButtonAnyMore,
}) {
  // This element didn't necessarily have to exist, but it made it easier for debugging purposes
  let onClick = (event) => {
    if (!dontPushSubmitButtonAnyMore) {
      //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={
        !dontPushSubmitButtonAnyMore
          ? "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"
          : "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5"
      }
      onClick={onClick}
    >
      Submit
    </button>
  );
}