stage dev changes

public/index.html

@@ -25,7 +25,7 @@
     />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css"
     />
     <meta name="viewport" content="initial-scale=1, width=device-width" />
     <!--

src/App.js

@@ -136,6 +136,8 @@ function App() {
   const [isFileUploaded, setIsFileUploaded] = useState(false);
   const [showTickSizeInput, setShowTickSizeInput] = useState(false);
   const [tickFontSize, setTickFontSize] = useState(12);
+  const [outputImageWidth, setOutputImageWidth] = useState(120);
+  const [dpi, setDpi] = useState(300);
   const [isFlipped, setIsFlipped] = useState(false);
   const [flipTimeLoading, setFlipTimeLoading] = useState(false);
   const focusMilestone1 = useRef();
@@ -169,6 +171,8 @@ function App() {
   const [showWikiEdDiff, setWikiEdDiff] = useState(false);
   const [isError, setIsError] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
+  const [showDownloadOptions, setShowDownloadOptions] = useState(false);
+  const [includeURL, setIncludeURL] = useState(true);
   const [url, setUrl] = useState("");
   const [highlightMode, setHighlightMode] = useState("diff");
   const [nSharedChars, setNSharedChars] = useState(50);
@@ -256,7 +260,8 @@ function App() {
 
     // save the png:
     saveSvgAsPng.saveSvgAsPng(newSvg, downloadFileName, {
-      scale: 3, // 300 %
+      // TODO: set the scale based on the output size and dpi values:
+      scale: 3, // 300 % 
       backgroundColor: "white",
     });
   };
@@ -319,6 +324,10 @@ function App() {
         setShowTickSizeInput,
         tickFontSize, 
         setTickFontSize,
+        outputImageWidth,
+        setOutputImageWidth,
+        dpi, 
+        setDpi,
         isFlipped,
         setIsFlipped,
         flipTimeLoading,
@@ -346,6 +355,10 @@ function App() {
         setIsError,
         showOptions,
         setShowOptions,
+        showDownloadOptions, 
+        setShowDownloadOptions,
+        includeURL, 
+        setIncludeURL,
         url,
         setUrl,
         highlightMode,

src/components/CorpusMetadata/NavigationAndStats/DownloadData.js

@@ -66,7 +66,7 @@ const DownloadData = ({ data, status }) => {
             >
               <IconButton size="large" variant="text" sx={{ fontSize: "15px" }}>
                 <i
-                  className="fa-solid fa-file-csv"
+                  className="fa-solid fa-table-list"
                   style={{ color: "#2863A5" }}
                 ></i>
               </IconButton>

src/components/CorpusMetadata/NavigationAndStats/index.js

@@ -10,12 +10,14 @@ import {
 } from "../../../services/TextReuseData";
 import { useNavigate } from "react-router-dom";
 import { Checkbox } from "@mui/material";
-import { useState } from "react";
-import { lightSrtFolders, srtFoldersGitHub } from "../../../assets/srtFolders";
+import { useState, useEffect } from "react";
+import { lightSrtFolders, srtFoldersGitHub, srtFolders } from "../../../assets/srtFolders";
+import { buildPairwiseCsvURL } from "../../../utility/Helper"
 
 import { setInitialValues } from "../../../functions/setInitialValues";
 import { getMetadataObject } from "../../../functions/getMetadataObject";
 import { setPairwiseVizData } from "../../../functions/setVisualizationData";
+// import { csv } from "d3";
 
 const NavigationAndStats = () => {
   const {
@@ -45,6 +47,98 @@ const NavigationAndStats = () => {
   const navigate = useNavigate();
   const [displaySelected, setDisplaySelected] = useState(false);
 
+  // Default the URLs to null - if null, no download or visualisation will be possible (and we can show a message):
+  const [pairwiseLiteUrl, setPairwiseLiteUrl] = useState(null);
+  const [pairwiseUrl, setPairwiseUrl] = useState(null);
+  const [pairwiseFileName, setPairwiseFileName] = useState(null);
+
+  // Check if relevant parts have been loaded before we try to build the URLs and check them
+  // If the lite url is 
+  const booksReady =
+    checkedBooks[0]?.release_version?.url &&
+    checkedBooks[1]?.release_version?.url &&
+    releaseCode &&
+    srtFolders[releaseCode];
+
+  useEffect(() => {
+    if (!booksReady) return;
+    const checkSelectedUrls = async () => {
+      console.log(checkedBooks);
+      if (checkedBooks.length !== 2) {
+        // If we have not selected two books, then set these pairwise parameters to null
+        setPairwiseLiteUrl(null);
+        setPairwiseUrl(null);
+        setPairwiseFileName(null);
+        return;
+
+        }
+      else {    
+
+        const book1 = checkedBooks[0];
+        const book2 = checkedBooks[1];
+        const book1Filename = book1?.release_version?.url.split("/").slice(-1)[0];
+        const book1Code = book1Filename.split(".").slice(2).join(".");
+        const book2Filename = book2?.release_version?.url.split("/").slice(-1)[0];
+        const book2Code = book2Filename.split(".").slice(2).join(".");
+
+      // Create URLs for the selected books - if URL returns a response, then we set the variable
+      const LiteUrl = await buildPairwiseCsvURL(releaseCode, book1, book2, true);
+      const fullUrl = await buildPairwiseCsvURL(releaseCode, book1, book2, false);
+      const csvFileName = `${book1Code}_${book2Code}.csv`;
+      setPairwiseFileName(csvFileName);
+
+      // Check the URLs - if they are valid then set the state variables
+      // If the URL is not valid, then set the state variable to null
+      try {
+        const responseLite = await fetch(LiteUrl, { method: 'HEAD' });
+        if (responseLite.ok) {
+          setPairwiseLiteUrl(LiteUrl);
+          } else {
+            setPairwiseLiteUrl(null);
+          }
+        } catch (error) {
+
+            const srtFolder = srtFoldersGitHub[releaseCode];
+            const csvUrl = `${srtFolder}/${book1Code}/${csvFileName}`;
+            const responseGitHub = await fetch(csvUrl, { method: 'HEAD' });
+            if (responseGitHub.ok) {
+              setPairwiseLiteUrl(csvUrl);
+            } else {
+              setPairwiseLiteUrl(null);
+              console.log("No URL found for pairwise Lite data");
+          }
+          };
+      try {
+        const responseFull = await fetch(fullUrl, { method: 'HEAD' });
+        if (responseFull.ok) {
+          setPairwiseUrl(fullUrl);
+          } else {
+            setPairwiseUrl(null);
+          }
+        } catch (error) {
+          console.log("No URL found for pairwise Full data");
+          setPairwiseUrl(null);
+        }
+        }
+      };
+    checkSelectedUrls();
+    }, [checkedBooks, releaseCode, booksReady, pairwiseFileName, pairwiseUrl, pairwiseLiteUrl]);
+
+  // Download the text reuse data from the server - getting the full data file:
+  const downloadTextReuseData = async (downloadUrl) => {
+
+    if (downloadUrl !== null) {
+
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.download = pairwiseFileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } 
+  }
+
+
   // Load the book visualisation from the checked versions in metadata table:
   const loadChartFromSelected = async () => {
     // reset context values:
@@ -73,8 +167,10 @@ const NavigationAndStats = () => {
     const csvFileName = `${book1Code}_${book2Code}.csv`;
     let csvUrl = `${srtFolder}/${book1Code}/${csvFileName}`;
 
+    console.log("PairwiseLitUrl: ", pairwiseLiteUrl);
+
     // Download the pairwise text reuse data from the KITAB webserver:
-    let CSVFile = await downloadCsvData(csvUrl);
+    let CSVFile = await downloadCsvData(pairwiseLiteUrl);
     setLoadedCsvFile(CSVFile);
 
     // if this fails: try to download it from GitHub:
@@ -214,7 +310,12 @@ const NavigationAndStats = () => {
             <Typography ml="10px" color="#fbbf24" sx={{ width: "max-content" }}>
               Select a second book to visualise pairwise text reuse
             </Typography>
+          ) : checkedBooks.length < 3 && pairwiseLiteUrl == null ? (
+            <Typography ml="10px" color="#fbbf24" sx={{ width: "max-content" }}>
+              No text reuse data available for selected books
+            </Typography>
           ) : (
+            <>
             <Box>
               <Tooltip
                 title={
@@ -244,6 +345,69 @@ const NavigationAndStats = () => {
                 </span>
               </Tooltip>
             </Box>
+
+            <Box>
+              <Tooltip
+                title={
+                  checkedBooks.length < 3 ? pairwiseUrl === null ?
+                    "Pairwise File not available for selected books"
+                    : "Download Pairwise File in CSV format"
+                    : "Select 2 books to download a file with pairwise text reuse"
+                }
+                placement="top"
+              >
+                <span>
+                  <IconButton
+                    size="large"
+                    variant="text"
+                    sx={{ fontSize: "15px" }}
+                    disabled={checkedBooks.length < 3 ? false : true}
+                    onClick={() => downloadTextReuseData(pairwiseUrl)}
+                  >
+                    {checkedBooks.length < 3 && pairwiseUrl !== null ? (
+                      <i
+                        className="fa-solid fa-file"
+                        style={{ color: "green" }}
+                      ></i>
+                    ) : (
+                      <i className="fa-solid fa-file"></i>
+                    )}
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Box>
+            <Box>
+              <Tooltip
+                title={
+                  checkedBooks.length < 3 ? pairwiseLiteUrl === null ?
+                    "Lite Pairwise File not available for selected books"
+                    : "Download Lite Pairwise File in CSV format"
+                    : "Select 2 books to download a file with pairwise text reuse"
+                }
+                placement="top"
+              >
+                <span>
+                  <IconButton
+                    size="large"
+                    variant="text"
+                    sx={{ fontSize: "15px" }}
+                    disabled={checkedBooks.length < 3 ? false : true}
+                    onClick={() => downloadTextReuseData(pairwiseLiteUrl)}
+                  >
+                    {checkedBooks.length < 3 && pairwiseLiteUrl !== null ? (
+                      <i
+                        className="fa-solid fa-file-half-dashed"
+                        style={{ color: "green" }}
+                      ></i>
+                    ) : (
+                      <i className="fa-solid fa-file-half-dashed"></i>
+                    )}
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Box>
+          </>
+
           )}
 
           {checkedNotification ? (
@@ -305,7 +469,7 @@ const NavigationAndStats = () => {
       {displaySelected && (
         <Box mb="15px">
           {checkedBooks.map((item, i) => (
-            <Box display="flex" alignItems="center">
+            <Box key={item.id || i} display="flex" alignItems="center">
               <Checkbox
                 sx={{ width: "30px", height: "30px" }}
                 size="small"

src/components/DiffViewer/index.js

@@ -43,7 +43,7 @@ const DiffViewerComponent = () => {
         alignItems={"center"}
         mb={"20px"}
       >
-        <Typography variant="h4">Diff viewer</Typography>
+        <Typography variant="h4">Diff Viewer</Typography>
         <Typography>
           View code on{" "}
           <Link

src/components/Visualisation/Chart/index.jsx

@@ -855,11 +855,6 @@ const Visual = (props) => {
         <VisualizationHeader
           restoreCanvas={restoreCanvas}
           isPairwiseViz={props.isPairwiseViz}
-          downloadFileName={
-            isFlipped
-              ? `KITAB_explore_${releaseCode}_${metaData?.book2?.versionCode}_${metaData?.book1?.versionCode}.png`
-              : `KITAB_explore_${releaseCode}_${metaData?.book1?.versionCode}_${metaData?.book2?.versionCode}.png`
-          }
         />
       </SectionHeaderLayout>
       <Box

src/components/Visualisation/SectionHeader/SectionHeaderLayout.js

@@ -2,11 +2,18 @@ import { Box, Typography } from "@mui/material";
 import React from "react";
 import ToggleButton from "./ToggleButton";
 import BAExtra from "./BookAlignmentHeader/BAExtra";
+import DownloadPanel from "./VisualizationHeader/DownloadPanel";
 import { useContext } from "react";
 import { Context } from "../../../App";
 
 const SectionHeaderLayout = ({ item, children, toggle, setToggle }) => {
-  const { showOptions } = useContext(Context);
+  const { 
+    showOptions, 
+    showDownloadOptions,
+    isFlipped,
+    releaseCode,
+    metaData,
+  } = useContext(Context);
   return (
     <Box mb="20px">
       <Box
@@ -48,6 +55,20 @@ const SectionHeaderLayout = ({ item, children, toggle, setToggle }) => {
         </Box>
       </Box>
       {item.title === "Books" && showOptions && <BAExtra />}
+      {item.title === "Pairwise Visualization" && showDownloadOptions && <DownloadPanel 
+        isPairwiseViz={true}
+        downloadFileName={
+          isFlipped
+            ? `KITAB_explore_${releaseCode}_${metaData?.book2?.versionCode}_${metaData?.book1?.versionCode}.png`
+            : `KITAB_explore_${releaseCode}_${metaData?.book1?.versionCode}_${metaData?.book2?.versionCode}.png`
+        }
+      />}
+      {item.title === "One-to-Many Visualization" && showDownloadOptions && <DownloadPanel 
+        isPairwiseViz={false}
+        downloadFileName={
+          `KITAB_explore_${releaseCode}_${metaData?.book1?.versionCode}_all.png`
+        }
+      />}
     </Box>
   );
 };