Add a link to download the notebook

This link includes the current parameters so that the user can pick up what they're looking at in their own JupyterLab. Add the download icon from fontawesome.
lsst-sqre · Apr 12, 2024 · 0574c00 · 0574c00
1 parent 2adb0af
commit 0574c00
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 0 deletions.
diff --git a/.changeset/calm-items-think.md b/.changeset/calm-items-think.md
@@ -0,0 +1,5 @@
+---
+'squareone': minor
+---
+
+Users can now download the Jupyter Notebook (ipynb) file that they are viewing, with the current parameters filled in. This enables further interactive exploration.
diff --git a/apps/squareone/src/components/TimesSquareGitHubPagePanel/IpynbDownloadLink.js b/apps/squareone/src/components/TimesSquareGitHubPagePanel/IpynbDownloadLink.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export default function IpynbDownloadLink({ url, sourcePath }) {
+  // get the filename from the sourcePath
+  const filename = sourcePath.split('/').pop();
+
+  return (
+    <StyledP>
+      <a href={url} title={filename} download={filename}>
+        <StyledFontAwesomeIcon icon="download" /> Download notebook
+      </a>
+    </StyledP>
+  );
+}
+
+const StyledP = styled.p`
+  margin-top: 2rem;
+`;
+
+const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
+  margin-right: 0.2em;
+  font-size: 1em;
+  color: ${(props) => props.color || 'inherit'};
+`;
diff --git a/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js b/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js
@@ -11,12 +11,15 @@ import Head from 'next/head';
 import Error from 'next/error';
 
 import useTimesSquarePage from '../../hooks/useTimesSquarePage';
+import { TimesSquareUrlParametersContext } from '../TimesSquareUrlParametersProvider';
 import TimesSquareParameters from '../TimesSquareParameters';
 import ExecStats from './ExecStats';
 import GitHubEditLink from './GitHubEditLink';
+import IpynbDownloadLink from './IpynbDownloadLink';
 
 export default function TimesSquareGitHubPagePanel({}) {
   const { publicRuntimeConfig } = getConfig();
+  const { urlQueryString } = React.useContext(TimesSquareUrlParametersContext);
   const pageData = useTimesSquarePage();
 
   if (pageData.loading) {
@@ -28,6 +31,8 @@ export default function TimesSquareGitHubPagePanel({}) {
 
   const { title, description } = pageData;
 
+  const ipynbDownloadUrl = `${pageData.renderedIpynbUrl}?${urlQueryString}`;
+
   return (
     <PagePanelContainer>
       <Head>
@@ -46,6 +51,11 @@ export default function TimesSquareGitHubPagePanel({}) {
 
         <TimesSquareParameters />
 
+        <IpynbDownloadLink
+          url={ipynbDownloadUrl}
+          sourcePath={pageData.github.sourcePath}
+        />
+
         <ExecStats />
       </div>
     </PagePanelContainer>

diff --git a/apps/squareone/src/styles/icons.js b/apps/squareone/src/styles/icons.js
@@ -13,6 +13,7 @@ import {
   faCircleCheck,
   faCircleMinus,
   faCodeCommit,
+  faDownload,
 } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 
@@ -25,4 +26,5 @@ library.add(faCircleXmark);
 library.add(faCircleCheck);
 library.add(faCircleMinus);
 library.add(faCodeCommit);
+library.add(faDownload);
 library.add(faGithub);