Tooltip Task

luox-app · Sep 27, 2023 · 7af470d · 7af470d
1 parent 3958870
commit 7af470d
Show file tree

Hide file tree

Showing 12 changed files with 210 additions and 69 deletions.
diff --git a/src/javascript/components/App.jsx b/src/javascript/components/App.jsx
@@ -16,6 +16,11 @@ let homeActive = false;
 if (window.location.pathname === "/") {
  homeActive = true;
 }
+const tooltipTutorial = localStorage.getItem("tooltip_tutorial");
+if (tooltipTutorial === null) {
+ localStorage.setItem("tooltip_tutorial", "0");
+ localStorage.setItem("tooltip_btn_text", "Enable Tooltips");
+}
 
 const App = () => {
  return (

diff --git a/src/javascript/components/CVGPlot.jsx b/src/javascript/components/CVGPlot.jsx
@@ -14,7 +14,7 @@
  * If not, see <https://www.gnu.org/licenses/>.
  * */
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import Plot from "react-plotly.js";
 import Pagination from "react-js-pagination";
@@ -86,10 +86,20 @@ const downloadChart = (downloadType) => {
 
 const CVGPlot = ({ measurementLabels, refHAB }) => {
  const [activePage, setCurrentPage] = useState(1);
+ const [isActive, setIsActive] = useState(false);
  const handlePageChange = (pageNumber) => {
  setCurrentPage(pageNumber);
  };
 
+ useEffect(() => {
+ const tooltipTutorial = localStorage.getItem("tooltip_tutorial");
+ if (tooltipTutorial === "1") {
+ setIsActive(true);
+ } else {
+ setIsActive(false);
+ }
+ });
+
  const spectraName = measurementLabels[activePage - 1];
  const binLines = drawBinDividers();
  const rgbValues = [
@@ -329,16 +339,26 @@ const CVGPlot = ({ measurementLabels, refHAB }) => {
  <Button
  variant="primary"
  onClick={() => downloadChart("png")}
- className="btn-sm my-1"
+ className="btn-sm my-1 tooltip"
  >
  Download Chart as PNG
+ <span
+ className={isActive ? "tooltiptext" : "tooltiptext displayNone"}
+ >
+ Download Chart as PNG
+ </span>
  </Button>
  <Button
  variant="success"
  onClick={() => downloadChart("svg")}
- className="btn-sm mx-3 my-1"
+ className="btn-sm mx-3 my-1 tooltip"
  >
  Download Chart as SVG
+ <span
+ className={isActive ? "tooltiptext" : "tooltiptext displayNone"}
+ >
+ Download Chart as SVG
+ </span>
  </Button>
  </div>
  </section>

diff --git a/src/javascript/components/CalculationTable.jsx b/src/javascript/components/CalculationTable.jsx
@@ -88,7 +88,7 @@ const CalculationTable = ({
  const [exponentialNotation, setExponentialNotation] = useState(false);
  const [advanced, setAdvanced] = useState(false);
  const [tm30display, setTm30display] = useState(false);
-
+ const [isActive, setIsActive] = useState(false);
  const [
  calculationTableDownloadUrl,
  setCalculationTableDownloadUrl,
@@ -164,6 +164,12 @@ const CalculationTable = ({
  radianceOrIrradiance === "radiance" ? "EDL (cd/m²)" : "EDI (lx)";
 
  useEffect(() => {
+ const tooltipTutorial = localStorage.getItem("tooltip_tutorial");
+ if (tooltipTutorial === "1") {
+ setIsActive(true);
+ } else {
+ setIsActive(false);
+ }
  const getIntermediateVals = (indexVals, keySet) => {
  let heading = "";
  const displayArray = [];
@@ -289,10 +295,15 @@ const CalculationTable = ({
  <div className="col text-right">
  <a
  download="download-calc.csv"
- className="btn btn-outline-secondary"
+ className="btn btn-outline-secondary tooltip"
  href={calculationTableDownloadUrl}
  >
  Download CSV
+ <span
+ className={isActive ? "tooltiptext" : "tooltiptext displayNone"}
+ >
+ Download Data as CSV
+ </span>
  </a>
  </div>
  </div>

diff --git a/src/javascript/components/Chart.jsx b/src/javascript/components/Chart.jsx
@@ -38,8 +38,14 @@ const Chart = ({
  });
  }
  };
-
+ const [isActive, setIsActive] = useState(false);
  useEffect(() => {
+ const tooltipTutorial = localStorage.getItem("tooltip_tutorial");
+ if (tooltipTutorial === "1") {
+ setIsActive(true);
+ } else {
+ setIsActive(false);
+ }
  let chart;
  if (chartRef.current) {
  chart = createChart(
@@ -128,7 +134,7 @@ const Chart = ({
  <h5>Reference spectrum</h5>
  <form>
  <div className="form-group">
- <label htmlFor="referenceSpectraSelect">
+ <label htmlFor="referenceSpectraSelect" className="tooltip">
  Reference spectra
  <select
  className="form-control"
@@ -144,6 +150,13 @@ const Chart = ({
  </option>
  ))}
  </select>
+ <span
+ className={
+ isActive ? "tooltiptext" : "tooltiptext displayNone"
+ }
+ >
+ Select a specific reference spectrum from options
+ </span>
  </label>
  </div>
  </form>
@@ -171,16 +184,30 @@ const Chart = ({
  <Button
  variant="primary"
  onClick={() => downloadChart("png")}
- className="btn-sm my-1"
+ className="btn-sm my-1 tooltip"
  >
  Download Chart as PNG
+ <span
+ className={
+ isActive ? "tooltiptext" : "tooltiptext displayNone"
+ }
+ >
+ Download Chart as PNG
+ </span>
  </Button>
  <Button
  variant="success"
  onClick={() => downloadChart("svg")}
- className="btn-sm mx-3 my-1"
+ className="btn-sm mx-3 my-1 tooltip"
  >
  Download Chart as SVG
+ <span
+ className={
+ isActive ? "tooltiptext" : "tooltiptext displayNone"
+ }
+ >
+ Download Chart as SVG
+ </span>
  </Button>
  </div>
  </div>

diff --git a/src/javascript/components/GenerateCSV.jsx b/src/javascript/components/GenerateCSV.jsx
@@ -1,10 +1,17 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import MultiStepProgressBar from "./MultiStepProgressBar";
 
 const GenerateCSV = () => {
+ const [isActive, setIsActive] = useState(false);
  useEffect(() => {
  document.title = "luox: Format instructions";
+ const tooltipTutorial = localStorage.getItem("tooltip_tutorial");
+ if (tooltipTutorial === "1") {
+ setIsActive(true);
+ } else {
+ setIsActive(false);
+ }
  });
 
  return (
@@ -115,7 +122,13 @@ const GenerateCSV = () => {
  className="btn btn-sm btn-primary tooltip"
  >
  Download Sample CSV
- <span className="tooltiptext">Download Sample CSV</span>
+ <span
+ className={
+ isActive ? "tooltiptext" : "tooltiptext displayNone"
+ }
+ >
+ Download Sample CSV
+ </span>
  </a>
  <p className="mt-3">
  To download example SPDX sample file courtsey Mike Grather,
@@ -128,7 +141,13 @@ const GenerateCSV = () => {
  className="btn btn-sm btn-primary tooltip"
  >
  Download Sample SPDX
- <span className="tooltiptext">Download Sample SPDX</span>
+ <span
+ className={
+ isActive ? "tooltiptext" : "tooltiptext displayNone"
+ }
+ >
+ Download Sample SPDX
+ </span>
  </a>
  <p className="pt-3 text-start">
  Please note that the accuracy of calculations implemented
@@ -144,7 +163,9 @@ const GenerateCSV = () => {
  <p className="mb-5 text-center">
  <Link to="/upload" className="btn btn-primary tooltip">
  Next
- <span className="tooltiptext">
+ <span
+ className={isActive ? "tooltiptext" : "tooltiptext displayNone"}
+ >
  Upload Spectrum and Generate Report
  </span>
  </Link>

diff --git a/src/javascript/components/Intro.jsx b/src/javascript/components/Intro.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import WellcomeLogo from "../../images/wellcome-logo.png";
 import SllLogo from "../../images/society-of-light-and-lighting-logo.png";
 import UooLogo from "../../images/university-of-oxford-logo.svg";
@@ -7,8 +7,15 @@ import IesLogo from "../../images/illuminating-engineering-society-logo.png";
 import NRCLogo from "../../images/nrc-signature-e-kr.jpg";
 
 const Intro = () => {
+ const [isActive, setIsActive] = useState(false);
  useEffect(() => {
  document.title = "luox: Home";
+ const tooltipTutorial = localStorage.getItem("tooltip_tutorial");
+ if (tooltipTutorial === "1") {
+ setIsActive(true);
+ } else {
+ setIsActive(false);
+ }
  });
 
  return (
@@ -42,8 +49,15 @@ const Intro = () => {
  <p className="animate__animated animate__fadeInUp">
  For further information about purpose, calculated quantities,
  and key references, please see{" "}
- <a href="/about" title="About page">
+ <a href="/about" title="About page" className="tooltip">
  the About page
+ <span
+ className={
+ isActive ? "tooltiptext" : "tooltiptext displayNone"
+ }
+ >
+ Go to About Page
+ </span>
  </a>
  .
  </p>
@@ -62,7 +76,13 @@ const Intro = () => {
  className="btn-get-started animate__animated animate__fadeInUp tooltip"
  >
  Start Now
- <span className="tooltiptext">Start Now</span>
+ <span
+ className={
+ isActive ? "tooltiptext" : "tooltiptext displayNone"
+ }
+ >
+ Start Now
+ </span>
  </a>
  </div>
  </div>

diff --git a/src/javascript/components/MultiStepProgressBar.jsx b/src/javascript/components/MultiStepProgressBar.jsx
@@ -26,49 +26,6 @@ const MultiStepProgressBar = ({ page }) => {
  }
 
  return (
- // <ProgressBar percent={stepPercentage}>
- // <Step label="Start">
- // {({ accomplished, index }) => (
- // <div
- // className={`indexedStep ${accomplished ? "accomplished" : null}`}
- // onClick={() => onPageNumberClick("1")}
- // >
- // {index + 1}
- // </div>
- // )}
- // </Step>
- // <Step>
- // {({ accomplished, index }) => (
- // <div
- // className={`indexedStep ${accomplished ? "accomplished" : null}`}
- // onClick={() => onPageNumberClick("2")}
- // >
- // {index + 1}
- // </div>
- // )}
- // </Step>
- // <Step>
- // {({ accomplished, index }) => (
- // <div
- // className={`indexedStep ${accomplished ? "accomplished" : null}`}
- // onClick={() => onPageNumberClick("3")}
- // >
- // {index + 1}
- // </div>
- // )
- // }
- // </Step>
- // <Step>
- // {({ accomplished, index }) => (
- // <div
- // className={`indexedStep ${accomplished ? "accomplished" : null}`}
- // onClick={() => onPageNumberClick("4")}
- // >
- // {index + 1}
- // </div>
- // )}
- // </Step>
- // </ProgressBar>
  <div className="progressBarDiv">
  <StepProgressBar
  startingStep={startingStep}

diff --git a/src/javascript/components/NavBar.jsx b/src/javascript/components/NavBar.jsx
@@ -1,12 +1,28 @@
-import React from "react";
+import React, { useState } from "react";
 import ReactRouterPropTypes from "react-router-prop-types";
+import { Button } from "react-bootstrap";
 import luoxIcon from "../../images/icon.svg";
 
 const NavBar = ({ location }) => {
  const isHome = location.pathname === "/";
  const isFormatInfo = location.pathname === "/format-info";
  const isUpload = location.pathname === "/upload";
  const isAbout = location.pathname === "/about";
+ const tooltipTutorial = localStorage.getItem("tooltip_tutorial");
+ const tooltipText = localStorage.getItem("tooltip_btn_text");
+ const [tooltipBtnText, setTooltipBtnText] = useState(tooltipText);
+ const changeTooltipTutorial = () => {
+ if (tooltipTutorial === "1") {
+ localStorage.setItem("tooltip_tutorial", "0");
+ localStorage.setItem("tooltip_btn_text", "Enable Tooltips");
+ setTooltipBtnText("Enable Tooltips");
+ } else {
+ localStorage.setItem("tooltip_tutorial", "1");
+ localStorage.setItem("tooltip_btn_text", "Disable Tooltips");
+ setTooltipBtnText("Disable Tooltips");
+ }
+ window.location.reload();
+ };
  return (
  <div className="container d-flex justify-content-between align-items-center">
  <div className="logo">
@@ -46,6 +62,11 @@ const NavBar = ({ location }) => {
  About
  </a>
  </li>
+ <li>
+ <Button variant="primary" onClick={changeTooltipTutorial}>
+ {tooltipBtnText}
+ </Button>
+ </li>
  </ul>
  <i className="bi bi-list mobile-nav-toggle" />
  </nav>