Tooltip Start

luox-app · Oct 6, 2023 · 010b6fc · 010b6fc
1 parent 4410061
commit 010b6fc
Show file tree

Hide file tree

Showing 12 changed files with 263 additions and 173 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 (
@@ -112,9 +119,16 @@ const GenerateCSV = () => {
  <a
  download="sample.csv"
  href="/examples/sample.csv"
- className="btn btn-sm btn-primary"
+ className="btn btn-sm btn-primary tooltip"
  >
  Download Sample CSV
+ <span
+ className={
+ isActive ? "tooltiptext" : "tooltiptext displayNone"
+ }
+ >
+ Download Sample CSV
+ </span>
  </a>
  <p className="mt-3">
  To download example SPDX sample file courtsey Mike Grather,
@@ -124,9 +138,16 @@ const GenerateCSV = () => {
  <a
  download="Sample LED-01.spdx"
  href="/examples/Sample LED-01.spdx"
- className="btn btn-sm btn-primary"
+ className="btn btn-sm btn-primary tooltip"
  >
  Download Sample SPDX
+ <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
@@ -140,115 +161,17 @@ const GenerateCSV = () => {
  </div>
  </section>
  <p className="mb-5 text-center">
- <Link to="/upload" className="btn btn-primary">
+ <Link to="/upload" className="btn btn-primary tooltip">
  Next
+ <span
+ className={isActive ? "tooltiptext" : "tooltiptext displayNone"}
+ >
+ Upload Spectrum and Generate Report
+ </span>
  </Link>
  </p>
  </main>
  </>
- // <div className="row">
- // <div className="col-12">
- // <h1 className="my-5">Format instructions</h1>
-
- // <p className="lead my-5">
- // Generate a CSV file containing the spectral power distribution of all
- // of the measurements taken during the experiment.
- // </p>
-
- // <h2 className="mb-3">Specification</h2>
-
- // <p className="mb-3">
- // The first column contains the wavelength in nanometers. The subsequent
- // columns contain the spectral (ir)radiance for each of the measurements
- // taken during the experiment. Your data can contain up to 5
- // measurements:
- // </p>
-
- // <table className="table mb-5">
- // <thead>
- // <tr>
- // <th>Column</th>
- // <th>Required?</th>
- // <th>Description</th>
- // </tr>
- // </thead>
- // <tbody>
- // <tr>
- // <td>1</td>
- // <td>Yes</td>
- // <td>
- // Wavelength in nanometers. This should be restricted to the
- // visible light range (380-780 nm) and contain only integer
- // wavelengths (e.g. 380, 385, 390 ...).
- // </td>
- // </tr>
- // <tr>
- // <td>2</td>
- // <td>Yes</td>
- // <td>
- // First measurement spectral (ir)radiance in µW/mW/W per
- // mm²/cm²/m² (per sr)
- // </td>
- // </tr>
- // <tr>
- // <td>3</td>
- // <td>No</td>
- // <td>
- // Second measurement spectral (ir)radiance in µW/mW/W per
- // mm²/cm²/m² (per sr)
- // </td>
- // </tr>
- // <tr>
- // <td>...</td>
- // <td>...</td>
- // <td>...</td>
- // </tr>
- // <tr>
- // <td>N</td>
- // <td>No</td>
- // <td>
- // Nth measurement spectral (ir)radiance in µW/mW/W per mm²/cm²/m²
- // (per sr)
- // </td>
- // </tr>
- // </tbody>
- // </table>
-
- // <h3>Example</h3>
-
- // <pre>
- // <code>
- // {`Wavelength,Measurement 1,Measurement 2,Measurement 3
- // 380,1.87,1.18,0.82
- // 385,2.36,1.48,1.02
- // ...
- // 775,0.52,0.33,0.28
- // 780,0.43,0.27,0.21
- // `}
- // </code>
- // </pre>
-
- // <ul>
- // <li>
- // <a download="sample.csv" href="/examples/sample.csv">
- // Download example spectral power distribution
- // </a>
- // </li>
- // </ul>
-
- // <p>
- // Please note that the accuracy of calculations implemented here depends
- // on the uncertainties present in the uploaded data. For more
- // information, please see <a href="/about">the about page</a>.
- // </p>
-
- // <p className="my-5">
- // <Link to="/upload" className="btn btn-primary">
- // Next
- // </Link>
- // </p>
- // </div>
- // </div>
  );
 };