From 3c26a9060690ec1f024b31db044c9fa663af9e3c Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Thu, 28 Mar 2024 11:32:06 -0400 Subject: [PATCH] Move creating pagePanel, pageNav to TimesSquareApp This makes sure these components are create *inside* the TimesSquareUrlParametersContext. Using that context, the TimesSquareApp is able to determine what panels and navs are appropriate. --- .../TimesSquareApp/TimesSquareApp.js | 21 +- .../TimesSquareGitHubPagePanel.js | 4 +- .../TimesSquareNotebookViewer.js | 4 +- .../TimesSquareParameters.js | 4 +- .../TimesSquareParametersProvider/index.js | 2 - .../TimesSquareUrlParametersProvider.js} | 37 ++-- .../TimesSquareUrlParametersProvider/index.js | 2 + .../[owner]/[repo]/[commit]/[...tsSlug].js | 20 +- .../pages/times-square/github/[...tsSlug].js | 19 +- .../squareone/src/pages/times-square/index.js | 194 +++++++++--------- 10 files changed, 155 insertions(+), 152 deletions(-) delete mode 100644 apps/squareone/src/components/TimesSquareParametersProvider/index.js rename apps/squareone/src/components/{TimesSquareParametersProvider/TimesSquareParametersProvider.js => TimesSquareUrlParametersProvider/TimesSquareUrlParametersProvider.js} (66%) create mode 100644 apps/squareone/src/components/TimesSquareUrlParametersProvider/index.js diff --git a/apps/squareone/src/components/TimesSquareApp/TimesSquareApp.js b/apps/squareone/src/components/TimesSquareApp/TimesSquareApp.js index 512c2763..83479eec 100644 --- a/apps/squareone/src/components/TimesSquareApp/TimesSquareApp.js +++ b/apps/squareone/src/components/TimesSquareApp/TimesSquareApp.js @@ -8,7 +8,10 @@ import React from 'react'; import styled from 'styled-components'; import Sidebar from './Sidebar'; -import { TimesSquareParametersContext } from '../TimesSquareParametersProvider'; +import { TimesSquareUrlParametersContext } from '../TimesSquareUrlParametersProvider'; +import TimesSquareMainGitHubNav from '../TimesSquareMainGitHubNav'; +import TimesSquarePrGitHubNav from '../TimesSquarePrGitHubNav'; +import TimesSquareGitHubPagePanel from '../TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel'; const StyledLayout = styled.div` display: flex; @@ -22,9 +25,19 @@ const StyledLayout = styled.div` } `; -export default function TimesSquareApp({ children, pageNav, pagePanel }) { - const paramsContext = React.useContext(TimesSquareParametersContext); - console.log('paramsContext in TimesSquareApp:', paramsContext); +export default function TimesSquareApp({ children }) { + const { tsSlug, owner, repo, commit, githubSlug } = React.useContext( + TimesSquareUrlParametersContext + ); + + const pageNav = commit ? ( + + ) : ( + + ); + + const pagePanel = tsSlug ? : null; + return ( diff --git a/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js b/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js index 293f2ef9..7b96484f 100644 --- a/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js +++ b/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js @@ -12,11 +12,11 @@ import Error from 'next/error'; import useTimesSquarePage from '../../hooks/useTimesSquarePage'; import TimesSquareParameters from '../TimesSquareParameters'; -import TimesSquareParametersContext from '../TimesSquareParametersProvider'; +import TimesSquareUrlParametersContext from '../TimesSquareUrlParametersProvider'; export default function TimesSquareGitHubPagePanel({}) { const { publicRuntimeConfig } = getConfig(); - const { tsPageUrl } = React.useContext(TimesSquareParametersContext); + const { tsPageUrl } = React.useContext(TimesSquareUrlParametersContext); const pageData = useTimesSquarePage(tsPageUrl); if (pageData.loading) { diff --git a/apps/squareone/src/components/TimesSquareNotebookViewer/TimesSquareNotebookViewer.js b/apps/squareone/src/components/TimesSquareNotebookViewer/TimesSquareNotebookViewer.js index c1ab640c..b45242c1 100644 --- a/apps/squareone/src/components/TimesSquareNotebookViewer/TimesSquareNotebookViewer.js +++ b/apps/squareone/src/components/TimesSquareNotebookViewer/TimesSquareNotebookViewer.js @@ -7,7 +7,7 @@ import React from 'react'; import styled from 'styled-components'; import useHtmlStatus from './useHtmlStatus'; -import { TimesSquareParametersContext } from '../TimesSquareParametersProvider'; +import { TimesSquareUrlParametersContext } from '../TimesSquareUrlParametersProvider'; const StyledIframe = styled.iframe` /* --shadow-color: 0deg 0% 74%; @@ -23,7 +23,7 @@ const StyledIframe = styled.iframe` export default function TimesSquareNotebookViewer({}) { const { tsPageUrl, notebookParameters, displaySettings } = React.useContext( - TimesSquareParametersContext + TimesSquareUrlParametersContext ); const htmlStatus = useHtmlStatus( tsPageUrl, diff --git a/apps/squareone/src/components/TimesSquareParameters/TimesSquareParameters.js b/apps/squareone/src/components/TimesSquareParameters/TimesSquareParameters.js index 0bcd2591..1be720b5 100644 --- a/apps/squareone/src/components/TimesSquareParameters/TimesSquareParameters.js +++ b/apps/squareone/src/components/TimesSquareParameters/TimesSquareParameters.js @@ -7,7 +7,7 @@ import Button, { RedGhostButton } from '../Button'; import StringInput from './StringInput'; import ParameterInput from './ParameterInput'; -import { TimesSquareParametersContext } from '../TimesSquareParametersProvider'; +import { TimesSquareUrlParametersContext } from '../TimesSquareUrlParametersProvider'; import useTimesSquarePage from '../../hooks/useTimesSquarePage'; // Create input components based on the parameter's JSON schema @@ -38,7 +38,7 @@ export default function TimesSquareParameters({}) { tsPageUrl, displaySettings, notebookParameters: userParameters, - } = React.useContext(TimesSquareParametersContext); + } = React.useContext(TimesSquareUrlParametersContext); const { parameters } = useTimesSquarePage(tsPageUrl); const ajv = new Ajv({ coerceTypes: true }); diff --git a/apps/squareone/src/components/TimesSquareParametersProvider/index.js b/apps/squareone/src/components/TimesSquareParametersProvider/index.js deleted file mode 100644 index 2ede7897..00000000 --- a/apps/squareone/src/components/TimesSquareParametersProvider/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from './TimesSquareParametersProvider'; -export { default } from './TimesSquareParametersProvider'; diff --git a/apps/squareone/src/components/TimesSquareParametersProvider/TimesSquareParametersProvider.js b/apps/squareone/src/components/TimesSquareUrlParametersProvider/TimesSquareUrlParametersProvider.js similarity index 66% rename from apps/squareone/src/components/TimesSquareParametersProvider/TimesSquareParametersProvider.js rename to apps/squareone/src/components/TimesSquareUrlParametersProvider/TimesSquareUrlParametersProvider.js index 695a31a5..05ea4783 100644 --- a/apps/squareone/src/components/TimesSquareParametersProvider/TimesSquareParametersProvider.js +++ b/apps/squareone/src/components/TimesSquareUrlParametersProvider/TimesSquareUrlParametersProvider.js @@ -1,25 +1,23 @@ /* - * Context provider for the current page's notebook and display parameters. + * Context provider for the current page's notebook and display parameters + * that come from the URL path and query parameters. */ import React from 'react'; import getConfig from 'next/config'; import { useRouter } from 'next/router'; -export const TimesSquareParametersContext = React.createContext(); - -export default function TimesSquareParametersProvider({ children }) { - // const [displayParameters, setDisplayParameters] = React.useState({ - // ts_hide_code: '1', - // }); - // const [notebookParameters, setNotebookParameters] = React.useState({}); +export const TimesSquareUrlParametersContext = React.createContext(); +export default function TimesSquareUrlParametersProvider({ children }) { const { publicRuntimeConfig } = getConfig(); const { timesSquareUrl } = publicRuntimeConfig; const router = useRouter(); - // Get components out of the URL path - const { tsSlug, owner = '', repo = '', commit = '' } = router.query; + // Get components out of the URL path. Only /github-pr/ pages have owner, + // repo, and commit components in the path. In /github/ pages the owner + // and repo are part of tsSlug. + const { tsSlug, owner = null, repo = null, commit = null } = router.query; console.log('tsSlug: ', tsSlug); // Since the page's path is a [...tsSlug], we need to join the parts of the @@ -28,7 +26,9 @@ export default function TimesSquareParametersProvider({ children }) { // notebook name for /github-pr/ pages. const githubSlug = tsSlug.join('/'); - // Construct the URL for the Times Square API endpoint + // Construct the URL for the Times Square API endpoint that gives information + // about the page. GitHub PR pages (github-pr) have different API URLs than + // regular GitHub pages. const tsPageUrl = router.pathname.startsWith('/times-square/github-pr') ? `${timesSquareUrl}/v1/github-pr/${owner}/${repo}/${commit}/${githubSlug}` : `${timesSquareUrl}/v1/github/${githubSlug}`; @@ -55,10 +55,19 @@ export default function TimesSquareParametersProvider({ children }) { console.log('notebookParameters: ', notebookParameters); return ( - {children} - + ); } diff --git a/apps/squareone/src/components/TimesSquareUrlParametersProvider/index.js b/apps/squareone/src/components/TimesSquareUrlParametersProvider/index.js new file mode 100644 index 00000000..514281f4 --- /dev/null +++ b/apps/squareone/src/components/TimesSquareUrlParametersProvider/index.js @@ -0,0 +1,2 @@ +export * from './TimesSquareUrlParametersProvider'; +export { default } from './TimesSquareUrlParametersProvider'; diff --git a/apps/squareone/src/pages/times-square/github-pr/[owner]/[repo]/[commit]/[...tsSlug].js b/apps/squareone/src/pages/times-square/github-pr/[owner]/[repo]/[commit]/[...tsSlug].js index acd4e0a0..5b5c099a 100644 --- a/apps/squareone/src/pages/times-square/github-pr/[owner]/[repo]/[commit]/[...tsSlug].js +++ b/apps/squareone/src/pages/times-square/github-pr/[owner]/[repo]/[commit]/[...tsSlug].js @@ -1,29 +1,17 @@ import getConfig from 'next/config'; -import { useRouter } from 'next/router'; import TimesSquareApp from '../../../../../../components/TimesSquareApp'; import WideContentLayout from '../../../../../../components/WideContentLayout'; -import TimesSquarePrGitHubNav from '../../../../../../components/TimesSquarePrGitHubNav'; import TimesSquareNotebookViewer from '../../../../../../components/TimesSquareNotebookViewer'; -import TimesSquareGitHubPagePanel from '../../../../../../components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel'; -import TimesSquareParametersProvider from '../../../../../../components/TimesSquareParametersProvider'; +import TimesSquareUrlParametersProvider from '../../../../../../components/TimesSquareUrlParametersProvider'; export default function GitHubPrNotebookViewPage({}) { - const router = useRouter(); - const { owner, repo, commit } = router.query; - - const pageNav = ( - - ); - - const pagePanel = ; - return ( - - + + - + ); } diff --git a/apps/squareone/src/pages/times-square/github/[...tsSlug].js b/apps/squareone/src/pages/times-square/github/[...tsSlug].js index 8c1f7e88..691c9b19 100644 --- a/apps/squareone/src/pages/times-square/github/[...tsSlug].js +++ b/apps/squareone/src/pages/times-square/github/[...tsSlug].js @@ -1,26 +1,17 @@ import getConfig from 'next/config'; -import { useRouter } from 'next/router'; import TimesSquareApp from '../../../components/TimesSquareApp'; import WideContentLayout from '../../../components/WideContentLayout'; -import TimesSquareMainGitHubNav from '../../../components/TimesSquareMainGitHubNav'; import TimesSquareNotebookViewer from '../../../components/TimesSquareNotebookViewer'; -import TimesSquareGitHubPagePanel from '../../../components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel'; -import TimesSquareParametersProvider from '../../../components/TimesSquareParametersProvider'; +import TimesSquareUrlParametersProvider from '../../../components/TimesSquareUrlParametersProvider'; export default function GitHubNotebookViewPage({}) { - const router = useRouter(); - const { tsSlug } = router.query; - const githubSlug = tsSlug.join('/'); - - const pageNav = ; - return ( - - + + - + ); } @@ -29,7 +20,7 @@ GitHubNotebookViewPage.getLayout = function getLayout(page) { }; export async function getServerSideProps() { - const { serverRuntimeConfig, publicRuntimeConfig } = getConfig(); + const { publicRuntimeConfig } = getConfig(); // Make the page return a 404 if Times Square is not configured const notFound = publicRuntimeConfig.timesSquareUrl ? false : true; diff --git a/apps/squareone/src/pages/times-square/index.js b/apps/squareone/src/pages/times-square/index.js index 7e9de7e0..162f6f25 100644 --- a/apps/squareone/src/pages/times-square/index.js +++ b/apps/squareone/src/pages/times-square/index.js @@ -2,108 +2,110 @@ import Head from 'next/head'; import getConfig from 'next/config'; import PropTypes from 'prop-types'; -import TimesSquareMainGitHubNav from '../../components/TimesSquareMainGitHubNav'; import TimesSquareApp from '../../components/TimesSquareApp'; import WideContentLayout from '../../components/WideContentLayout'; +import TimesSquareUrlParametersProvider from '../../../components/TimesSquareUrlParametersProvider'; export default function TimesSquareHome({ publicRuntimeConfig }) { - const pageNav = ; - return ( - - - Times Square | {publicRuntimeConfig.siteName} - -

Easily share Jupyter Notebooks on the Rubin Science Platform

-

- Times Square lets you view computed Jupyter Notebooks in your browser, - without spinning up a JupyterLab server. To share a notebook, simply - copy a URL. -

-

- All Times Square pages are computed on the Rubin Science Platform. Any - software (like the LSST Science Pipelines) or data source (such as the - Butler and EFD) available in interactive JupyterLab sessions are - available to Times Square notebooks. -

-

- Times Square is great for sharing engineering and observatory reports, - dashboards, and analyses. -

+ + + + Times Square | {publicRuntimeConfig.siteName} + +

Easily share Jupyter Notebooks on the Rubin Science Platform

+

+ Times Square lets you view computed Jupyter Notebooks in your browser, + without spinning up a JupyterLab server. To share a notebook, simply + copy a URL. +

+

+ All Times Square pages are computed on the Rubin Science Platform. Any + software (like the LSST Science Pipelines) or data source (such as the + Butler and EFD) available in interactive JupyterLab sessions are + available to Times Square notebooks. +

+

+ Times Square is great for sharing engineering and observatory reports, + dashboards, and analyses. +

-

Edit on GitHub...

-

- You can collaboratively maintain collections of notebooks in GitHub - repositories. When you push to the default branch of a repository where - the Times Square’s GitHub App is installed, Times Square syncs and - computes those notebooks on the Rubin Science Platform. Check out{' '} - - lsst-sqre/times-square-demo - {' '} - for an example. -

-

... or upload a notebook directly (coming soon)

-

- Are you working on a notebook and not ready to commit it to GitHub yet - (or ever)? You can directly upload a notebook to your personal - collection of fliers. These are still published and you can - share links to your fliers. Just keep in mind that any notebook that the - team relies on and will use in the long term should get moved over to - GitHub for better collaboration and maintainability. -

-

Tweak parameters on the fly

-

- You can use Jinja2 syntax in Markdown and code cells to{' '} - parameterize Jupyter Notebooks with user inputs. - Parameterizations are great for changing the date in a nightly report, - or changing the input dataset for a basic data analysis. You, and other - users, can change those parameters and see the notebook recomputed - on-the-fly. Notebook parameterizations are shareable: just copy the URL. -

-

In beta

-

- Times Square is currently in beta, meaning that we’re still implementing - basic features and writing documentation. There’s also a chance that we - might need to reset databases. You can try Times Square out, but don’t - rely on it for critical applications just yet. -

-

- Reach out to us on Slack at{' '} - #dm-square if - you have questions. -

-

Behind the scenes

-

The Times Square app is built largely from three components:

-
    -
  • - squareone{' '} - contains the user interface -
    • -
  • - times-square{' '} - is the API service that manages notebooks -
    • -
  • - noteburst is the - API service that runs Jupyter Notebooks on the Rubin Science Platform. -
    • -
-

These documents cover Times Square’s architecture:

- - +

Edit on GitHub...

+

+ You can collaboratively maintain collections of notebooks in GitHub + repositories. When you push to the default branch of a repository + where the Times Square’s GitHub App is installed, Times Square syncs + and computes those notebooks on the Rubin Science Platform. Check out{' '} + + lsst-sqre/times-square-demo + {' '} + for an example. +

+

... or upload a notebook directly (coming soon)

+

+ Are you working on a notebook and not ready to commit it to GitHub yet + (or ever)? You can directly upload a notebook to your personal + collection of fliers. These are still published and you can + share links to your fliers. Just keep in mind that any notebook that + the team relies on and will use in the long term should get moved over + to GitHub for better collaboration and maintainability. +

+

Tweak parameters on the fly

+

+ You can use Jinja2 syntax in Markdown and code cells to{' '} + parameterize Jupyter Notebooks with user inputs. + Parameterizations are great for changing the date in a nightly report, + or changing the input dataset for a basic data analysis. You, and + other users, can change those parameters and see the notebook + recomputed on-the-fly. Notebook parameterizations are shareable: just + copy the URL. +

+

In beta

+

+ Times Square is currently in beta, meaning that we’re still + implementing basic features and writing documentation. There’s also a + chance that we might need to reset databases. You can try Times Square + out, but don’t rely on it for critical applications just yet. +

+

+ Reach out to us on Slack at{' '} + #dm-square if + you have questions. +

+

Behind the scenes

+

The Times Square app is built largely from three components:

+
    +
  • + squareone{' '} + contains the user interface +
    • +
  • + times-square{' '} + is the API service that manages notebooks +
    • +
  • + noteburst is + the API service that runs Jupyter Notebooks on the Rubin Science + Platform. +
    • +
+

These documents cover Times Square’s architecture:

+ + + ); }