Gu UI 3680 hide open in jupyter notebook button from plot if already in jupyter notebook

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nasa-terra/components",
   "description": "A collection of NASA Earthdata components",
-  "version": "0.0.166",
+  "version": "0.0.171",
   "homepage": "https://github.com/nasa/terra-ui-components",
   "author": "NASA GES DISC <https://disc.gsfc.nasa.gov>",
   "license": "MIT",

packages/create-terra-ui-app/boilerplates/nextjs/framework.js

@@ -67,7 +67,7 @@ export async function create(nextTask, outputDir, boilerplatesDir, appName) {
             "import { setBasePath } from '@nasa-terra/components/dist/utilities/base-path.js'"
 
         // Create the setBasePath call with comments (with newline before it)
-        const setBasePathCall = `\n/**\n * Sets the base path to the Terra UI CDN\n *\n * If you'd rather host the assets locally, you should setup a build task to copy the assets locally and\n * set the base path to your local public folder\n * (see https://terra-ui.netlify.app/frameworks/react/#installation for more information)\n */\nsetBasePath('https://cdn.jsdelivr.net/npm/@nasa-terra/[email protected].166/cdn/')`
+        const setBasePathCall = `\n/**\n * Sets the base path to the Terra UI CDN\n *\n * If you'd rather host the assets locally, you should setup a build task to copy the assets locally and\n * set the base path to your local public folder\n * (see https://terra-ui.netlify.app/frameworks/react/#installation for more information)\n */\nsetBasePath('https://cdn.jsdelivr.net/npm/@nasa-terra/[email protected].171/cdn/')`
 
         // Reconstruct the file: CSS import at top, then existing content with setBasePath import and call inserted
         const newLines = [...lines]

pyproject.toml

@@ -5,7 +5,7 @@ build-backend = "hatchling.build"
 [project]
 name = "terra_ui_components"
 dependencies = ["anywidget>=0.9"]
-version = "0.0.166"
+version = "0.0.171"
 readme = "README.md"
 description = "NASA Terra UI Components Library"
 requires-python = ">=3.8"

src/components/data-subsetter/notebooks/subsetter-notebook.ts

@@ -21,7 +21,7 @@ export function getNotebook(host: TerraDataSubsetter) {
         {
             id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
             cell_type: 'code',
-            source: '%pip install -q "terra_ui_components==0.0.166" "anywidget==0.9.15"',
+            source: '%pip install -q "terra_ui_components==0.0.171" "anywidget==0.9.15"',
             metadata: {
                 trusted: true,
             },

src/components/plot-toolbar/notebooks/time-averaged-map-notebook.ts

@@ -21,7 +21,7 @@ export function getTimeAveragedMapNotebook(host: TerraPlotToolbar) {
         {
             id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
             cell_type: 'code',
-            source: '%pip install -q "terra_ui_components==0.0.166" "anywidget==0.9.15" "pandas" "rasterio" "matplotlib"',
+            source: '%pip install -q "terra_ui_components==0.0.171" "anywidget==0.9.15" "pandas" "rasterio" "matplotlib"',
             metadata: {
                 trusted: true,
             },

src/components/plot-toolbar/notebooks/time-series-notebook.ts

@@ -21,7 +21,7 @@ export function getTimeSeriesNotebook(host: TerraPlotToolbar) {
         {
             id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
             cell_type: 'code',
-            source: '%pip install -q "terra_ui_components==0.0.166" "anywidget==0.9.15" "pandas"',
+            source: '%pip install -q "terra_ui_components==0.0.171" "anywidget==0.9.15" "pandas"',
             metadata: {
                 trusted: true,
             },

src/components/plot-toolbar/plot-toolbar.component.ts

@@ -68,6 +68,11 @@ export default class TerraPlotToolbar extends TerraElement {
     @property({ type: Number }) opacity = 1
     @property({ type: Boolean, attribute: 'show-citation' }) showCitation: boolean =
         false
+    /**
+     * Option hides the Jupyter notebook button in the plot toolbar. Option is set by parent component (time series, time average-map) if Jupyter notebook environemnt is detected.
+     */
+    @property({ type: Boolean, attribute: 'show-jupyter' }) showJupyter: boolean =
+        true
 
     /**
      * if you include an application citation, it will be displayed in the citation panel alongside the dataset citation
@@ -331,30 +336,32 @@ export default class TerraPlotToolbar extends TerraElement {
                                       font-size="1em"
                                   ></terra-icon>
                               </terra-button>
+                              ${this.showJupyter
+                                  ? html`
+                                        <terra-button
+                                            outline
+                                            aria-expanded=${this.activeMenuItem === 'jupyter'}
+                                            aria-controls="menu"
+                                            aria-haspopup="true"
+                                            class="toggle square-button"
+                                            variant="warning"
+                                            @mouseenter=${this.#handleActiveMenuItem}
+                                            @click=${this.#handleActiveMenuItem}
+                                            data-menu-name="jupyter"
+                                        >
+                                            <span class="sr-only"
+                                                >Open in Jupyter Notebook for
+                                                ${this.catalogVariable.dataFieldLongName}</span
+                                            >
 
-                              <terra-button
-                                  outline
-                                  aria-expanded=${this.activeMenuItem === 'jupyter'}
-                                  aria-controls="menu"
-                                  aria-haspopup="true"
-                                  class="toggle square-button"
-                                  variant="warning"
-                                  @mouseenter=${this.#handleActiveMenuItem}
-                                  @click=${this.#handleActiveMenuItem}
-                                  data-menu-name="jupyter"
-                              >
-                                  <span class="sr-only"
-                                      >Open in Jupyter Notebook for
-                                      ${this.catalogVariable.dataFieldLongName}</span
-                                  >
-
-                                  <terra-icon
-                                      name="outline-code-bracket"
-                                      library="heroicons"
-                                      font-size="1.5em"
-                                  ></terra-icon>
-                              </terra-button>
-
+                                            <terra-icon
+                                                name="outline-code-bracket"
+                                                library="heroicons"
+                                                font-size="1.5em"
+                                            ></terra-icon>
+                                        </terra-button>
+                                    `
+                                  : nothing}
                               ${this.dataType == 'geotiff'
                                   ? html`
                                         <terra-button

src/components/time-average-map/time-average-map.component.ts

@@ -187,7 +187,18 @@ export default class TerraTimeAverageMap extends TerraElement {
         )
     }
 
+    /**
+     * Show or hide the Jupyter notebook button in the plot toolbar.
+     */
+    showJupyter?: boolean;
+
     async firstUpdated() {
+
+        //* Detect if time avg map component is running in a Jupyter notebook.
+        if (this.showJupyter === undefined) {
+            this.showJupyter = !this.#isNotebookEnv();
+        }
+
         this.#controller = new TimeAvgMapController(this)
         // Initialize the base layer open street map
         this.intializeMap()
@@ -237,6 +248,19 @@ export default class TerraTimeAverageMap extends TerraElement {
         )
     }
 
+    #isNotebookEnv(): boolean {
+        const w = window as any;
+
+        return (
+            typeof w.Jupyter !== "undefined" ||
+            typeof w.IPython !== "undefined" ||
+            typeof w.google?.colab !== "undefined" ||
+            typeof w.__jupyterlab !== "undefined" ||
+            document.querySelector(".jp-Notebook") !== null ||
+            document.querySelector(".jupyter-widgets") !== null
+        );
+    }
+
     #handleMapError = (event: CustomEvent) => {
         const { status, code, message, context } = event.detail
 
@@ -1194,6 +1218,7 @@ export default class TerraTimeAverageMap extends TerraElement {
                               @show-opacity-value=${this.#handleOpacityChange}
                               @show-color-map=${this.#handleColorMapChange}
                               @show-check-box-toggle=${this.#handleCheckBoxToggle}
+                              .showJupyter=${this.showJupyter}
                               .pixelValue=${this.pixelValue}
                               .pixelCoordinates=${this.pixelCoordinates}
                               show-date-range

src/components/time-series/time-series.component.ts

@@ -172,6 +172,11 @@ export default class TerraTimeSeries extends TerraElement {
 
     _fetchVariableTask = getFetchVariableTask(this)
 
+    /**
+     * Show or hide the Jupyter notebook button in the plot toolbar.
+     */
+    showJupyter?: boolean;
+
     connectedCallback(): void {
         super.connectedCallback()
 
@@ -180,6 +185,10 @@ export default class TerraTimeSeries extends TerraElement {
             this.#handleQuotaError as EventListener
         )
 
+        //* Detect if time series component is running in a Jupyter notebook.
+        if (this.showJupyter === undefined) {
+            this.showJupyter = !this.#isNotebookEnv();
+        }
         //* instantiate the time series contoller maybe with a token
         this.#timeSeriesController = new TimeSeriesController(this)
     }
@@ -223,6 +232,19 @@ export default class TerraTimeSeries extends TerraElement {
         )
     }
 
+    #isNotebookEnv(): boolean {
+        const w = window as any;
+
+        return (
+            typeof w.Jupyter !== "undefined" ||
+            typeof w.IPython !== "undefined" ||
+            typeof w.google?.colab !== "undefined" ||
+            typeof w.__jupyterlab !== "undefined" ||
+            document.querySelector(".jp-Notebook") !== null ||
+            document.querySelector(".jupyter-widgets") !== null
+        );
+    }
+
     #handleQuotaError = (event: CustomEvent) => {
         const { status, code, message, context } = event.detail
 
@@ -307,6 +329,7 @@ export default class TerraTimeSeries extends TerraElement {
                                     .cacheKey=${this.#timeSeriesController.getCacheKey()}
                                     .variableEntryId=${this.variableEntryId}
                                     .showCitation=${this.showCitation}
+                                    .showJupyter=${this.showJupyter}
                                     .mobileView=${this.mobileView}
                                     .productLabel=${this.productLabel}
                                 >
@@ -369,7 +392,6 @@ export default class TerraTimeSeries extends TerraElement {
                           </terra-alert>
                       `
                     : ''}
-
                 <terra-plot
                     exportparts="base:plot__base, plot-title:plot__title"
                     .data=${this.#timeSeriesController.lastTaskValue ??

src/terra_ui_components/base.py

@@ -16,12 +16,12 @@ def get_autoloader(cls):
         return f"""
         const terraStyles = document.createElement('link')
         terraStyles.rel = 'stylesheet'
-        terraStyles.href = 'https://cdn.jsdelivr.net/npm/@nasa-terra/[email protected].166/cdn/themes/horizon.css'
+        terraStyles.href = 'https://cdn.jsdelivr.net/npm/@nasa-terra/[email protected].171/cdn/themes/horizon.css'
         //terraStyles.href = "http://localhost:4000/dist/themes/horizon.css"
         document.head.appendChild(terraStyles)
 
         const terraAutoloader = document.createElement('script')
-        terraAutoloader.src = "https://cdn.jsdelivr.net/npm/@nasa-terra/[email protected].166/cdn/terra-ui-components-autoloader.js"
+        terraAutoloader.src = "https://cdn.jsdelivr.net/npm/@nasa-terra/[email protected].171/cdn/terra-ui-components-autoloader.js"
         //terraAutoloader.src = "http://localhost:4000/dist/terra-ui-components-autoloader.js"
         terraAutoloader.type = 'module'
         document.head.appendChild(terraAutoloader)