SCT-3097 - fix clustering viewer pop ups, timeouts, tab crash with large clusters

.prettierignore

@@ -8,3 +8,4 @@ kbase-extension/static/ext_packages
 kbase-extension/static/kbase/js/patched-components
 venv
 cover
+/_temp

RELEASE_NOTES.md

@@ -6,6 +6,7 @@ This is built on the Jupyter Notebook v6.0.2 (more notes will follow).
 
 ### Unreleased
 
+- SCT-3097 - Fix pop-ups and long timeouts & browser tab crash for expression feature clustering viewer
 - SCT-3084 - Fixed broken (non-functional) search in the data panel
 - SCT-3602 - refseq public data tool now searches by lineage as well; for all public data tools: automatically focus the search input; fix paging bug.
 - No ticket - migrate from `nosetests` to `pytest` for testing the Python stack.

kbase-extension/static/kbase/js/widgets/common/ErrorView.js

@@ -0,0 +1,122 @@
+/**
+ * errorView - A widget which displays common error types, including
+ * strings, exception objects descended from Error, and plain objects which
+ * follow the KBase SDK JSON-RPC error form:
+ * {name, code, message, error}
+ *        name - string - always JSONRPCError
+ *        code - number - JSONRPC compatible error code
+ *        message - string - canonical message
+ *        error - string - captures trace
+ */
+define([
+    'jquery',
+    'kb_common/jsonRpc/exceptions',
+    'widgets/common/RenderIn',
+    'widgets/common/JSONView',
+], ($, jsonRPCExceptions, RenderIn, $JSONView) => {
+    'use strict';
+
+    const { $TextIn, $HTMLIn } = RenderIn;
+    const UNKNOWN_ERROR_TEXT = 'Unknown error';
+
+    function $renderJSONRPCException(err) {
+        const $errorTable = $('<table>').addClass('table');
+
+        const $tbody = $('<tbody>');
+        $errorTable.append($tbody);
+
+        const $renderRow = (label, value) => {
+            return $('<tr>')
+                .css('background-color', 'transparent')
+                .append(
+                    $('<th>').css('border', 'none').text(label),
+                    $('<td>').css('border', 'none').text(value)
+                );
+        };
+
+        $tbody.append($renderRow('Type', err.type));
+        $tbody.append($renderRow('Code', err.code));
+        $tbody.append($renderRow('Module', err.module));
+        $tbody.append($renderRow('Function', err.func));
+        $tbody.append($renderRow('Message', err.message));
+
+        return $errorTable;
+    }
+
+    function $renderError(err) {
+        if (typeof err === 'string') {
+            return $TextIn(err);
+        }
+
+        // This may be a KBase service error, which are somewhat uniform.
+        // We display some common fields at top, and then dump the
+        // entire error info as nested tables.
+
+        if (err instanceof jsonRPCExceptions.RpcError) {
+            return $renderJSONRPCException(err);
+        }
+
+        // Some other error
+        if (err instanceof Error) {
+            return $HTMLIn([
+                $TextIn(err.name, 'span'),
+                $TextIn(': ', 'span'),
+                $TextIn(err.message, 'span'),
+            ]);
+        }
+
+        // Some other object
+        if (typeof err === 'object') {
+            // Note that order is important.
+
+            if (err === null) {
+                return $TextIn(UNKNOWN_ERROR_TEXT);
+            }
+
+            if ('message' in err && typeof err.message === 'string') {
+                return $TextIn(err.message);
+            }
+
+            if (err.constructor === {}.constructor) {
+                return $JSONView(err);
+            }
+
+            if ('toString' in err && typeof err.toString === 'function') {
+                return $TextIn(`Unknown error: ${err.toString()}`);
+            }
+        }
+
+        // Don't try to do anything fancy if the error value is outside what we are prepared
+        // to handle.
+        return $TextIn(UNKNOWN_ERROR_TEXT);
+    }
+
+    function $renderContactInfo() {
+        return $('<div>')
+            .css('margin-top', '20px')
+            .append($TextIn('You may', 'span'))
+            .append(' ')
+            .append(
+                $('<a>')
+                    .attr('href', 'https://www.kbase.us/support')
+                    .attr('target', '_blank')
+                    .text('contact the KBase team')
+            )
+            .append(' ')
+            .append($TextIn('with the information above.', 'span'));
+    }
+
+    function $renderTitle() {
+        return $('<div>').css('font-weight', 'bold').text('Error');
+    }
+
+    function $ErrorView(err) {
+        return $('<div>')
+            .addClass('alert alert-danger')
+            .append($renderTitle())
+            .append($renderError(err))
+            .append($renderContactInfo());
+    }
+
+    return $ErrorView;
+});

kbase-extension/static/kbase/js/widgets/common/JSONView.js

@@ -0,0 +1,63 @@
+define(['jquery', 'widgets/common/RenderIn'], ($, RenderIn) => {
+    'use strict';
+
+    const { $TextIn } = RenderIn;
+
+    function $RenderJSONArray(data) {
+        const $rows = data.map((value, index) => {
+            return $('<tr>').append(
+                $('<th>').css('color', 'rgba(150, 150, 150, 1)').text(String(index)),
+                $('<td>').addClass('fa fa-arrow-right'),
+                $('<td>').html($JSONView(value))
+            );
+        });
+        return $('<table>').addClass('table table-striped').html($('<tbody>').append($rows));
+    }
+
+    function $RenderJSONObject(data) {
+        const $rows = Object.entries(data).map(([key, value]) => {
+            return $('<tr>').append(
+                $('<th>').css('color', 'rgba(150, 150, 150, 1)').text(key),
+                $('<td>').addClass('fa fa-arrow-right'),
+                $('<td>').html($JSONView(value))
+            );
+        });
+        return $('<table>').addClass('table table-striped').html($('<tbody>').append($rows));
+    }
+
+    function $RenderNonJSON(data) {
+        if (typeof data === 'object') {
+            return $TextIn(`Not representable: ${typeof data} (${data.constructor.name})`);
+        } else {
+            return $TextIn(`Not representable: ${typeof data}`);
+        }
+    }
+
+    function $JSONView(data) {
+        switch (typeof data) {
+            case 'string':
+                return $TextIn(data);
+            case 'number':
+                return $TextIn(String(data));
+            case 'boolean':
+                return $TextIn(String(data));
+            case 'object':
+                if (data === null) {
+                    return $TextIn('NULL');
+                }
+                if (Array.isArray(data)) {
+                    return $RenderJSONArray(data);
+                } else {
+                    if (data.constructor === {}.constructor) {
+                        return $RenderJSONObject(data);
+                    } else {
+                        return $RenderNonJSON(data);
+                    }
+                }
+            default:
+                return $RenderNonJSON(data);
+        }
+    }
+
+    return $JSONView;
+});

kbase-extension/static/kbase/js/widgets/common/LoadingMessage.js

@@ -0,0 +1,24 @@
+define(['jquery'], ($) => {
+    'use strict';
+    function $LoadingMessage(message) {
+        const $message = (() => {
+            if (typeof message === 'string') {
+                return $('<span>').text(message);
+            } else {
+                return message;
+            }
+        })();
+        return $('<div>')
+            .addClass('alert alert-info')
+            .css('display', 'flex')
+            .css('flex-direction', 'row')
+            .css('align-items', 'center')
+            .css('justify-content', 'center')
+            .css('margin', '10px auto')
+            .css('max-width', '30em')
+            .append($message)
+            .append('&nbsp;')
+            .append($('<i>').addClass('fa fa-spinner fa-spin fa-2x'));
+    }
+    return $LoadingMessage;
+});

kbase-extension/static/kbase/js/widgets/common/RenderIn.js

@@ -0,0 +1,13 @@
+define(['jquery'], ($) => {
+    'use strict';
+
+    function $TextIn(text, tag = 'div') {
+        return $(document.createElement(tag)).text(text);
+    }
+
+    function $HTMLIn(html, tag = 'div') {
+        return $(document.createElement(tag)).append(html);
+    }
+
+    return { $TextIn, $HTMLIn };
+});

kbase-extension/static/kbase/js/widgets/function_output/kbaseExpressionConditionsetBaseWidget.js

@@ -2,7 +2,7 @@
  * Base class for viewers visualizaing expression of a set of conditions from various aspects
  *
  * The descendant classes should override:
- * 1. getSubmtrixParams - to set params for get_submatrix_stat method from the KBaseFeatureValues service
+ * 1. getSubmatrixParams - to set params for get_submatrix_stat method from the KBaseFeatureValues service
  * 2. buildWidget - to create a custom visuzualization
  *
  *
@@ -17,13 +17,11 @@ define([
     'narrativeConfig',
     'kbwidget',
     'kbaseAuthenticatedWidget',
-    'kbaseTabs',
     'kb_common/jsonRpc/dynamicServiceClient',
     // For effect
     'bootstrap',
     'jquery-dataTables',
-    'kbaseFeatureValues-client-api',
-], ($, Config, KBWidget, kbaseAuthenticatedWidget, kbaseTabs, DynamicServiceClient) => {
+], ($, Config, KBWidget, kbaseAuthenticatedWidget, DynamicServiceClient) => {
     'use strict';
 
     return KBWidget({
@@ -42,9 +40,6 @@ define([
         // Prefix for all div ids
         pref: null,
 
-        // KBaseFeatureValue client
-        featureValueClient: null,
-
         // Matrix set stat
         submatrixStat: null,
 
@@ -84,7 +79,7 @@ define([
         },
 
         // To be overriden to specify additional parameters
-        getSubmtrixParams: function () {
+        getSubmatrixParams: function () {
             const self = this;
             self.setTestParameters();
             let conditions = [];
@@ -104,7 +99,7 @@ define([
             self.loading(true);
 
             const getSubmatrixStatsAndRender = function () {
-                const smParams = self.getSubmtrixParams();
+                const smParams = self.getSubmatrixParams();
 
                 // some parameter checking
                 if (!smParams.column_ids || smParams.column_ids.length === 0) {