Merge pull request #164 from lsst-sqre/tickets/DM-43859

DM-43859: Include link to notebook on GitHub

.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.

.changeset/smart-pandas-deny.md

@@ -0,0 +1,5 @@
+---
+'squareone': minor
+---
+
+Times Square notebook pages show a link to the source notebook on GitHub.

apps/squareone/package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@fontsource/source-sans-pro": "^4.5.11",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lsst-sqre/global-css": "workspace:*",

apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export default function GitHubEditLink({ owner, repository, sourcePath }) {
+  if (!owner || !repository || !sourcePath) {
+    return null;
+  }
+
+  const editUrl = `https://github.com/${owner}/${repository}/blob/main/${sourcePath}`;
+
+  return (
+    <p>
+      <a href={editUrl}>
+        <StyledFontAwesomeIcon icon="fa-brands fa-github" />
+        {owner}/{repository}
+      </a>
+    </p>
+  );
+}
+
+const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
+  margin-right: 0.2em;
+  font-size: 1em;
+  color: ${(props) => props.color || 'inherit'};
+`;

apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import GitHubEditLink from './GitHubEditLink';
+
+export default {
+  component: GitHubEditLink,
+  title: 'Components/TimesSquare/GitHubEditLink',
+  parameters: {
+    viewport: {
+      viewports: {
+        sidebar: {
+          name: 'Sidebar',
+          styles: {
+            width: '280px',
+            height: '900px',
+          },
+        },
+      },
+    },
+    defaultViewport: 'sidebar',
+  },
+};
+
+const Template = (args) => <GitHubEditLink {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  owner: 'lsst-sqre',
+  repository: 'times-square-demo',
+  sourcePath: 'demo.ipynb',
+};

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'};
+`;

apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js

@@ -11,11 +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) {
@@ -27,6 +31,8 @@ export default function TimesSquareGitHubPagePanel({}) {
 
   const { title, description } = pageData;
 
+  const ipynbDownloadUrl = `${pageData.renderedIpynbUrl}?${urlQueryString}`;
+
   return (
     <PagePanelContainer>
       <Head>
@@ -37,8 +43,19 @@ export default function TimesSquareGitHubPagePanel({}) {
         {description && (
           <div dangerouslySetInnerHTML={{ __html: description.html }}></div>
         )}
+        <GitHubEditLink
+          owner={pageData.github.owner}
+          repository={pageData.github.repository}
+          sourcePath={pageData.github.sourcePath}
+        />
+
         <TimesSquareParameters />
 
+        <IpynbDownloadLink
+          url={ipynbDownloadUrl}
+          sourcePath={pageData.github.sourcePath}
+        />
+
         <ExecStats />
       </div>
     </PagePanelContainer>

apps/squareone/src/hooks/useTimesSquarePage.js

@@ -9,6 +9,15 @@ function useTimesSquarePage() {
   const { tsPageUrl } = React.useContext(TimesSquareUrlParametersContext);
   const { data, error } = useSWR(tsPageUrl, fetcher);
 
+  const githubInfo = data
+    ? {
+        owner: data.github.owner ? data.github.owner : null,
+        repository: data.github.repository ? data.github.repository : null,
+        sourcePath: data.github.source_path ? data.github.source_path : null,
+        sidecarPath: data.github.sidecar_path ? data.github.sidecar_path : null,
+      }
+    : { owner: null, repository: null, sourcePath: null, sidecarPath: null };
+
   return {
     error: error,
     loading: !error && !data,
@@ -18,6 +27,8 @@ function useTimesSquarePage() {
     htmlUrl: data ? data.html_url : null,
     htmlStatusUrl: data ? data.html_status_url : null,
     htmlEventsUrl: data ? data.html_events_url : null,
+    renderedIpynbUrl: data ? data.rendered_url : null,
+    github: githubInfo,
   };
 }
 

apps/squareone/src/styles/icons.js

@@ -13,7 +13,9 @@ import {
   faCircleCheck,
   faCircleMinus,
   faCodeCommit,
+  faDownload,
 } from '@fortawesome/free-solid-svg-icons';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
 
 // Add icons to the global Font Awesome library
 library.add(faAngleDown);
@@ -24,3 +26,5 @@ library.add(faCircleXmark);
 library.add(faCircleCheck);
 library.add(faCircleMinus);
 library.add(faCodeCommit);
+library.add(faDownload);
+library.add(faGithub);