From 010b6fc851e07d657da29f9fa89dda90419ca18a Mon Sep 17 00:00:00 2001 From: Zain Ali Date: Fri, 6 Oct 2023 16:27:03 +0200 Subject: [PATCH] Tooltip Start --- src/javascript/components/App.jsx | 5 + src/javascript/components/CVGPlot.jsx | 26 +++- .../components/CalculationTable.jsx | 15 +- src/javascript/components/Chart.jsx | 35 ++++- src/javascript/components/GenerateCSV.jsx | 137 ++++-------------- src/javascript/components/Intro.jsx | 27 +++- .../components/MultiStepProgressBar.jsx | 43 ------ src/javascript/components/NavBar.jsx | 23 ++- src/javascript/components/Results.jsx | 28 +++- src/javascript/components/SpectraTable.jsx | 19 ++- src/javascript/components/Upload.jsx | 21 ++- src/stylesheets/custom.css | 57 +++++++- 12 files changed, 263 insertions(+), 173 deletions(-) diff --git a/src/javascript/components/App.jsx b/src/javascript/components/App.jsx index 18ce698..5b43f9f 100644 --- 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 index 728f17a..2417476 100644 --- a/src/javascript/components/CVGPlot.jsx +++ b/src/javascript/components/CVGPlot.jsx @@ -14,7 +14,7 @@ * If not, see . * */ -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 }) => { diff --git a/src/javascript/components/CalculationTable.jsx b/src/javascript/components/CalculationTable.jsx index 77d661a..6d40f13 100644 --- 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 = ({
Download CSV + + Download Data as CSV +
diff --git a/src/javascript/components/Chart.jsx b/src/javascript/components/Chart.jsx index 3a34f42..93e8c01 100644 --- 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 = ({
Reference spectrum
-
@@ -171,16 +184,30 @@ const Chart = ({ diff --git a/src/javascript/components/GenerateCSV.jsx b/src/javascript/components/GenerateCSV.jsx index 75245a9..f085e4f 100644 --- 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 = () => { Download Sample CSV + + Download Sample CSV +

To download example SPDX sample file courtsey Mike Grather, @@ -124,9 +138,16 @@ const GenerateCSV = () => { Download Sample SPDX + + Download Sample SPDX +

Please note that the accuracy of calculations implemented @@ -140,115 +161,17 @@ const GenerateCSV = () => {

- + Next + + Upload Spectrum and Generate Report +

- //
- //
- //

Format instructions

- - //

- // Generate a CSV file containing the spectral power distribution of all - // of the measurements taken during the experiment. - //

- - //

Specification

- - //

- // 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: - //

- - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - //
ColumnRequired?Description
1Yes - // 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 ...). - //
2Yes - // First measurement spectral (ir)radiance in µW/mW/W per - // mm²/cm²/m² (per sr) - //
3No - // Second measurement spectral (ir)radiance in µW/mW/W per - // mm²/cm²/m² (per sr) - //
.........
NNo - // Nth measurement spectral (ir)radiance in µW/mW/W per mm²/cm²/m² - // (per sr) - //
- - //

Example

- - // 
-    //           
-    //             {`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
-    // `}
-    //           
-    //
- - // - - //

- // Please note that the accuracy of calculations implemented here depends - // on the uncertainties present in the uploaded data. For more - // information, please see the about page. - //

- - //

- // - // Next - // - //

- //
- //
); }; diff --git a/src/javascript/components/Intro.jsx b/src/javascript/components/Intro.jsx index c936af0..e2984b6 100644 --- 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 = () => {

For further information about purpose, calculated quantities, and key references, please see{" "} - + the About page + + Go to About Page + .

@@ -59,9 +73,16 @@ const Intro = () => {

Start Now + + Start Now + diff --git a/src/javascript/components/MultiStepProgressBar.jsx b/src/javascript/components/MultiStepProgressBar.jsx index 25114cd..5bc62b9 100644 --- a/src/javascript/components/MultiStepProgressBar.jsx +++ b/src/javascript/components/MultiStepProgressBar.jsx @@ -26,49 +26,6 @@ const MultiStepProgressBar = ({ page }) => { } return ( - // - // - // {({ accomplished, index }) => ( - //
onPageNumberClick("1")} - // > - // {index + 1} - //
- // )} - // - // - // {({ accomplished, index }) => ( - //
onPageNumberClick("2")} - // > - // {index + 1} - //
- // )} - // - // - // {({ accomplished, index }) => ( - //
onPageNumberClick("3")} - // > - // {index + 1} - //
- // ) - // } - // - // - // {({ accomplished, index }) => ( - //
onPageNumberClick("4")} - // > - // {index + 1} - //
- // )} - // - //
{ @@ -7,6 +8,21 @@ const NavBar = ({ location }) => { 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 (
@@ -46,6 +62,11 @@ const NavBar = ({ location }) => { About +
  • + +
    • diff --git a/src/javascript/components/Results.jsx b/src/javascript/components/Results.jsx index 2cd6e22..97488ee 100644 --- a/src/javascript/components/Results.jsx +++ b/src/javascript/components/Results.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { HashLink } from "react-router-hash-link"; import PropTypes from "prop-types"; import CalculationTable from "./CalculationTable"; @@ -21,6 +21,16 @@ const Results = ({ }) => { const originalButtonText = "Copy to clipboard"; const [buttonText, setButtonText] = useState(originalButtonText); + const [isActive, setIsActive] = useState(false); + + useEffect(() => { + const tooltipTutorial = localStorage.getItem("tooltip_tutorial"); + if (tooltipTutorial === "1") { + setIsActive(true); + } else { + setIsActive(false); + } + }); if (selectedRows.length === 0) { return null; @@ -137,22 +147,34 @@ const Results = ({
    {!powerMode && ( )}
    Request DOI + + Request DOI +
    diff --git a/src/javascript/components/SpectraTable.jsx b/src/javascript/components/SpectraTable.jsx index 311b49f..3d9d391 100644 --- a/src/javascript/components/SpectraTable.jsx +++ b/src/javascript/components/SpectraTable.jsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from "react"; +import React, { useState, useMemo, useEffect } from "react"; import PropTypes from "prop-types"; import SpectraCSV from "./SpectraCSV"; import { asExponential, radianceOrIrradianceSIUnit } from "../helpers"; @@ -76,6 +76,16 @@ const SpectraTable = ({ }) => { const [exponentialNotation, setExponentialNotation] = useState(true); const [displayAllRows, setDisplayAllRows] = useState(false); + const [isActive, setIsActive] = useState(false); + + useEffect(() => { + const tooltipTutorial = localStorage.getItem("tooltip_tutorial"); + if (tooltipTutorial === "1") { + setIsActive(true); + } else { + setIsActive(false); + } + }); const spectraDownloadUrl = useMemo( () => SpectraCSV({ radianceOrIrradiance, selectedRows }), @@ -132,10 +142,15 @@ const SpectraTable = ({
    diff --git a/src/javascript/components/Upload.jsx b/src/javascript/components/Upload.jsx index b675fe4..f41503b 100644 --- a/src/javascript/components/Upload.jsx +++ b/src/javascript/components/Upload.jsx @@ -46,10 +46,16 @@ const Upload = () => { ) ); }; - + const [isActive, setIsActive] = useState(false); useEffect(() => { // code to run after render goes here document.title = "luox: Upload spectrum and generate report"; + const tooltipTutorial = localStorage.getItem("tooltip_tutorial"); + if (tooltipTutorial === "1") { + setIsActive(true); + } else { + setIsActive(false); + } }); return ( @@ -60,7 +66,10 @@ const Upload = () => {

    Upload spectrum and generate report

    -