PTV-1620/PTV-1845 fix kbaseTabs

RELEASE_NOTES.md

@@ -7,6 +7,7 @@ This is built on the Jupyter Notebook v6.4.12 and IPython 8.5.0 (more notes will
 ## Unreleased
 
 - PTV-1620 - fix problem with Expression Pairwise Correlation creating or displaying large heatmaps and freezing or crashing browser
+- PTV-1620 - fix problem with kbaseTabs showing no tab when a dynamically added tab is closed 
 
 Dependency Changes
 - Python dependency updates

kbase-extension/static/kbase/gallery/README.md

@@ -0,0 +1,44 @@
+# Demos
+
+These demos are static html pages which demonstrate some relatively simple and isolatable aspect of the Narrative. This simple demo system is particularly suitable for ui components.
+
+Demo pages are available from an index page, e.g. `https://ci.kbase.us/narrative/static/kbase/demo/index.html`. The files are located in `kbase-extension/static/kbase/demo`.
+
+## Creating a Demo Page
+
+-   Start from an existing demo page, assuming `template.html` 
+-   Edit the head title appropriate, replacing `TEMPLATE` with the name of the component or file being demoed
+-   edit the `H1` title, similarly
+-   add a section per demo (see below)
+-   add matching rendering code in the `script`
+-   add a link to the demo in the main `index.html` page
+
+## Demo Page Layout
+
+-   header which includes required components:
+    -   javascript
+        -   `require.js` for AMD
+        -   `common.js` for bootstrap AMD configuration
+
+    -   stylesheets
+        -   `style.min.css` for the Jupyter notebook styles (e.g. bootstrap)
+        -   `common.css` for some styles used in demo pages
+        -   `all_concat.css` to include the bulk of the KBase Narrative styles title
+        -   In the title, replace `TEMPLATE` with the class or filename being demoed
+
+-   body
+    -   H1 title describing what is being demoed, replace `TEMPLATE` with the class or filename being demoed
+
+    -   A section for each demo
+        -   `H2` title for each demo
+        -   a sentence or short paragraph to describe the demo
+        -   `div` with class `"Example"` to wrap the demo
+        -   within this, a `div` with a unique id (will match code below) in which to render the demo
+
+    -   script section to invoke the demo
+        -   code must be wrapped in a `require` of `narrative_paths`
+
+        -   code must also be wrapped in a `require` of your component and, optionally, a local data file (or data may be simply included in the script)
+
+        -   each demo will render the component into the div already in the page, by id.
+            -   more complex components which require setup will not be as "simple", of course.

kbase-extension/static/kbase/gallery/common.css

@@ -0,0 +1,20 @@
+.Demo {
+    padding: 1em;
+}
+
+.Demo .Example {
+    border: 3px solid rgb(200, 200, 200);
+    padding: 1em;
+    border-radius: 1em;
+    background: repeating-linear-gradient(
+    45deg,
+    rgba(200, 200, 200, 0.2),
+    rgba(200, 200, 200, 0.2) 10px,
+    rgba(150, 150, 150, 0.2) 10px,
+    rgba(150, 150, 150, 0.2) 20px
+    );
+}
+
+.Demo .Example + .Example {
+    margin-top: 1em;
+}

kbase-extension/static/kbase/gallery/common.js

@@ -0,0 +1,57 @@
+require.config({
+    waitSeconds: 60,
+
+    urlArgs: 'v=20220524153658',
+
+    baseUrl: '/narrative/static/',
+    paths: {
+        'auth/js/main': 'auth/js/main.min',
+        custom: '/narrative/static/kbase/custom',
+        nbextensions: '/narrative/nbextensions',
+        kernelspecs: '/narrative/kernelspecs',
+        underscore: 'components/underscore/underscore-min',
+        backbone: 'components/backbone/backbone-min',
+        jed: 'components/jed/jed',
+        jquery: 'components/jquery/jquery.min',
+        bootstrap: '/narrative/static/ext_components/bootstrap/dist/js/bootstrap.min',
+        bootstraptour: 'components/bootstrap-tour/build/js/bootstrap-tour.min',
+        'jquery-ui': 'components/jquery-ui/jquery-ui.min',
+        moment: 'components/moment/moment',
+        codemirror: 'components/codemirror',
+        termjs: 'components/term.js/src/term',
+        typeahead: 'components/jquery-typeahead/dist/jquery.typeahead',
+    },
+    map: {
+        '*': {
+            jqueryui: 'jquery-ui',
+            contents: 'services/contents',
+        },
+    },
+    shim: {
+        typeahead: {
+            deps: ['jquery'],
+            exports: 'typeahead',
+        },
+        underscore: {
+            exports: '_',
+        },
+        backbone: {
+            deps: ['underscore', 'jquery'],
+            exports: 'Backbone',
+        },
+        bootstrap: {
+            deps: ['jquery'],
+            exports: 'bootstrap',
+        },
+        bootstraptour: {
+            deps: ['bootstrap'],
+            exports: 'Tour',
+        },
+        'jquery-ui': {
+            deps: ['jquery'],
+            exports: '$',
+        },
+    },
+});
+
+document.nbjs_translations = { domain: 'nbjs', locale_data: { nbjs: { '': { domain: 'nbjs' } } } };

kbase-extension/static/kbase/gallery/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link type="text/css" rel="stylesheet" href="/narrative/static/style/style.min.css">
+    <link type="text/css" rel="stylesheet" href="/narrative/static/kbase/gallery/common.css">
+    <link type="text/css" rel="stylesheet" href="/narrative/static/kbase/css/all_concat.css">
+    <meta charset="utf-8">
+    <title>KBase Narrative Demos</title>
+</head>
+<body class="Demo">
+<h1>Demos</h1>
+
+<p>Demonstrations of Narrative components.</p>
+
+<ul>
+    <li>
+        widgets
+        <ul>
+            <li><a href="./widgets/kbaseTabs.html">KBase Tabs</a></li>
+            <li>
+                common
+                <ul>
+                    <li><a href="./widgets/common/AlertMessage.html">Alert Message</a></li>
+                    <li><a href="./widgets/common/ErrorMessage.html">Error Message</a></li>
+                </ul>
+            </li>
+        </ul>
+
+    </li>
+</ul>
+
+
+<p>A <a href="./template.html">TEMPLATE</a> is available to start a new demo page; or simply use one of the existing
+    pages which is closer to your use case.</p>
+</body>
+</html>

kbase-extension/static/kbase/gallery/template.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <script src="/narrative/static/components/requirejs/require.js"></script>
+        <script src="/narrative/static/kbase/gallery/common.js"></script>
+        <link type="text/css" rel="stylesheet" href="/narrative/static/style/style.min.css">
+        <link type="text/css" rel="stylesheet" href="/narrative/static/kbase/gallery/common.css">
+        <link type="text/css" rel="stylesheet" href="/narrative/static/kbase/css/all_concat.css">
+        <meta charset="utf-8">
+        <title>KBase Demo - TEMPLATE</title>
+    </head>
+    <body class="Demo">
+       <h1>TEMPLATE Demo</h1>
+
+       <p><a href="index.html">Index</a></p>
+
+        <!-- Add a section per demo -->
+        <h2>SOME VIEW</h2>
+
+        <p>Briefly describe the view</p>
+
+        <!-- Wrap in this class to provide a consistent framing for demod components -->
+        <div class="Example">
+          <!-- Note that SOMEID1 matches $("#SOMEID1") below -->
+          <div id="SOMEID1"></div>
+        </div>
+
+        <div class="Example">
+          <!-- Note that SOMEID2 matches $("#SOMEID2") below -->
+          <div id="SOMEID2"></div>
+        </div>
+
+
+        <script>
+            // Wrap in narrative_paths in order to get the AMD configuration used by KBase
+            require(['narrative_paths'], () => {
+                // Your demo code will require whatever it needs, as per the usual narrative module patterms
+                // defined in narrative_paths.
+                // You may also include local files for additional support, e.g. data to supply to
+                // your component.
+                // jquery is required here to be complete.
+                require(['jquery', 'widgets/common/AlertMessage', 'json!kbase/gallery/template.json'], ($, $AlertMessage, demoData) => {
+                    // This example is quite simply, but most usages should follow this pattern.
+                    $('#SOMEID1').html($AlertMessage("Hello, this is a template for future demos"));
+
+                    $('#SOMEID2').html($AlertMessage(demoData.template));
+                });
+            });
+        </script>
+    </body>
+</html>

kbase-extension/static/kbase/gallery/template.json

@@ -0,0 +1,3 @@
+{
+  "template": "Hi, I'm some data associated with this demo"
+}

kbase-extension/static/kbase/gallery/widgets/common/AlertMessage.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script src="/narrative/static/components/requirejs/require.js"></script>
+    <script src="/narrative/static/kbase/gallery/common.js"></script>
+    <link type="text/css" rel="stylesheet" href="/narrative/static/style/style.min.css">
+    <link type="text/css" rel="stylesheet" href="/narrative/static/kbase/gallery/common.css">
+    <link type="text/css" rel="stylesheet" href="/narrative/static/kbase/css/all_concat.css">
+    <meta charset="utf-8">
+    <title>KBase Demo - AlertMessage.js</title>
+</head>
+<body class="Demo">
+<h1>AlertMessage Demo</h1>
+
+<p><a href="../../index.html">Index</a></p>
+
+<h2>Default Alert</h2>
+
+<p>By default, the Alert will use the "info" styling</p>
+
+<div class="Example">
+    <div id="alertmessage1"></div>
+</div>
+
+<h2>Info Alert</h2>
+
+<p>Here we explicitly use the "info" message styling</p>
+
+<div class="Example">
+    <div id="alertmessage2"></div>
+</div>
+
+<h2>Warning Alert</h2>
+
+<p>Here we explicitly use the "warning" message styling</p>
+
+<div class="Example">
+    <div id="alertmessage3"></div>
+</div>
+
+<h2>Danger Alert</h2>
+
+<p>Here we explicitly use the "danger", or error, message styling</p>
+
+<div class="Example">
+    <div id="alertmessage4"></div>
+</div>
+
+<h2>Success Alert</h2>
+
+<p>Here we explicitly use the "success" message styling</p>
+
+<div class="Example">
+    <div id="alertmessage5"></div>
+</div>
+
+<script>
+    require(['narrative_paths'], () => {
+        require(['jquery', 'widgets/common/AlertMessage'], ($, $AlertMessage) => {
+            $('#alertmessage1').html($AlertMessage("This is a default alert"));
+
+            $('#alertmessage2').html($AlertMessage("This is an info alert", {type: 'info'}));
+
+            $('#alertmessage3').html($AlertMessage("This is a warning alert", {type: 'warning'}));
+
+            $('#alertmessage4').html($AlertMessage("This is a danger alert", {type: 'danger'}));
+
+            $('#alertmessage5').html($AlertMessage("This is a success alert", {type: 'success'}));
+        });
+    });
+</script>
+</body>
+</html>