PTV-1315 Fix AlignmentSet viewer

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": "stylelint-config-standard"
+}

Dockerfile

@@ -41,6 +41,7 @@ RUN \
     # install JS deps
     npm install -g grunt-cli && \
     npm install && \
+    npm run install-node-modules && \
     ./node_modules/.bin/bower install --allow-root --config.interactive=false && \
     # Compile Javascript down into an itty-bitty ball unless SKIP_MINIFY is non-empty
     echo Skip=$SKIP_MINIFY && \

Makefile

@@ -26,6 +26,9 @@ run-dev-image:
 install:
 	bash $(INSTALLER)
 
+install-node-modules:
+	sh scripts/install-node-modules.sh
+
 # runs the installer to locally build the Narrative in a
 # local venv.
 build-travis-narrative:

docs/developer/local-docker.md

@@ -40,6 +40,7 @@ KBASE_TEST_TOKEN=YOUR_TOKEN_HERE BASE_URL=https://ci.kbase.us make test-integrat
 ```
 
 E.g.
+
 ```bash
 SERVICE=selenium-standalone BROWSER=chrome HEADLESS=f BASE_URL=https://ci.kbase.us KBASE_TEST_TOKEN=TOKEN_HERE make test-integration
 ```
@@ -84,7 +85,6 @@ All of the testing options may be used
 
 #### narrative-dev local container
 
-
 #### next local container
 
 #### prod local container

docs/testing/unit-testing-with-msw.md

@@ -186,7 +186,7 @@ To support more advanced testing scenarios, involving authentication, search, et
 
 ## Files involved
 
-- test/unit/util/mswUtils.js
+- test/unit/utils/mswUtils.js
 - test/unit/karma.conf.js
 - test/unit/test-main.js
 - package.json

kbase-extension/kbase_templates/page.html

@@ -70,9 +70,6 @@
     <!-- End Google Tag Manager -->
 
     <script src="{{static_url('components/es6-promise/promise.min.js')}}" type="text/javascript" charset="utf-8"></script>
-    <!-- <script src="{{static_url('components/preact/index.js')}}" type="text/javascript"></script>
-    <script src="{{static_url('components/proptypes/index.js')}}" type="text/javascript"></script>
-    <script src="{{static_url('components/preact-compat/index.js')}}" type="text/javascript"></script> -->
     <script src="{{static_url('components/react/react.production.min.js')}}" type="text/javascript"></script>
     <script src="{{static_url('components/react/react-dom.production.min.js')}}" type="text/javascript"></script>
     <script src="{{static_url('components/create-react-class/index.js')}}" type="text/javascript"></script>

kbase-extension/static/kbase/js/react_components/ErrorMessage.js

@@ -0,0 +1,48 @@
+define([
+    'react'
+], (
+    React
+) => {
+    'use strict';
+
+    const { createElement: e, Component } = React;
+
+    /**
+     * A class to display an error message.
+     *
+     * This is a simple error viewer. It does not show extended information like
+     * stacktrace, or richer data from Service clients, like the error code.
+     * It should handle service client errors, any error based on the Error class,
+     * any object which has a "message" property, and a simple string.
+     */
+    class ErrorMessage extends Component {
+        render() {
+            const error = this.props.error;
+            let message;
+            if (typeof error === 'object' && error !== null) {
+                if (error.error && error.error.message) {
+                    // handle errors thrown by kbase service clients
+                    message = error.error.message;
+                } else if (error.message) {
+                    // Standard Error objects or descendants, or those which act like one in this regard.
+                    message = error.message;
+                } else {
+                    message = 'Unknown Error';
+                }
+            } else if (typeof error === 'string') {
+                message = error;
+            } else {
+                message = 'Unknown Error';
+            }
+
+            return e('div', {
+                className: 'alert alert-danger'
+            }, [
+                'Error: ',
+                message
+            ]);
+        }
+    }
+
+    return ErrorMessage;
+});

kbase-extension/static/kbase/js/widgets/function_output/KBaseSets/Dispatcher.js

@@ -0,0 +1,211 @@
+/*
+kbaseGenericSetViewer
+
+A widget which can display a data object visualization for several types of objects
+in the "KBaseSets" type module.
+
+The primary task of this viewer is to look up the object type it is provided, and, based
+on the type of the object, either dispatch to the set viewer if it is supported, or
+display a warning that the type is not supported if it isn't.
+
+Support is indicated in the module-level `SET_TYPE_TO_MODULE_MAPPING`.
+
+At present just ReadsAlignmentSet and AssemblySet are supported; others should display
+an error message, or are handled by other viewers.
+
+Note that this widget is a wrapper dispatching to the specific viewer, most of the
+implementation is in the React components referred two in the AMD dependencies. The only
+UI supported herein is the loading indicator and an error message, if necessary.
+
+The original intention of this viewer was to support all of the types implemented in KBaseSets,
+but that work has not yet been completed:
+
+Also, see: https://github.com/kbase/NarrativeViewers/blob/dd1eeeba0ba1faacd6c3596a9413109aeb82e32e/ui/narrative/methods/view_generic_set/spec.json#L21
+
+Below is the status of each KBaseSet type:
+
+Implemented in this viewer:
+
+KBaseSets.ReadsAlignmentSet
+SetAPI.get_reads_alignment_set_v1
+
+KBaseSets.AssemblySet
+SetAPI.get_assembly_set_v1
+
+Implemented in other viewers:
+
+KBaseSets.DifferentialExpressionMatrixSet
+SetAPI.get_differential_expression_matrix_set_v1
+Implemented by:
+https://github.com/kbase/NarrativeViewers/blob/dd1eeeba0ba1faacd6c3596a9413109aeb82e32e/ui/narrative/methods/view_differential_expression_matrix_set/spec.json
+and this viewer does not work
+
+KBaseSets.ExpressionSet
+SetAPI.get_expression_set_v1
+Implemented by:
+https://github.com/kbase/NarrativeViewers/blob/dd1eeeba0ba1faacd6c3596a9413109aeb82e32e/ui/narrative/methods/view_rnaseq_sample_expression/spec.json
+and that viewer doesn't work
+
+KBaseSets.ReadsSet
+SetAPI.get_reads_set_v1
+Implemented by:
+https://github.com/kbase/NarrativeViewers/blob/dd1eeeba0ba1faacd6c3596a9413109aeb82e32e/ui/narrative/methods/view_reads_set/spec.json
+and the current viewer works
+
+KBaseSets.SampleSet
+SetAPI.sample_set_to_samples_info (I think)
+Implemented by:
+https://github.com/kbase/NarrativeViewers/tree/master/ui/narrative/methods/view_sample_set
+but not that this viewer does not utilize the SetAPI, which was implemented against the search, which
+has never been fully implemented for search. Also Samples and RNASeqSamples seem to be conflated
+a bit in SetAPI.
+
+Not implemented anywhere:
+
+KBaseSets.FeatureSetSet
+SetAPI.get_feature_set_set_v1
+can't find any data, or any app which outputs this type, or accepts as input (according to the app browser)
+
+KBaseSets.GenomeSet
+SetAPI.get_genome_set_v1
+
+*/
+define([
+    'react',
+    'kb_common/jsonRpc/genericClient',
+    'kb_service/utils',
+    'widgets/function_output/KBaseSets/types/ReadsAlignmentSet',
+    'widgets/function_output/KBaseSets/types/AssemblySet',
+    'react_components/ErrorMessage',
+    'widgets/function_output/KBaseSets/SetLoader',
+
+    // For effect
+    'bootstrap'
+], (
+    React,
+    ServiceClient,
+    ServiceUtils,
+    ReadsAlignmentSet,
+    AssemblySet,
+    ErrorMessage,
+    SetLoader
+) => {
+    'use strict';
+
+    const { createElement: e, Component } = React;
+
+    // Note that any modules referenced must be imported above, and that such modules
+    // must be components implemented as defined in `react_components/genericSets`.
+    const SET_TYPE_TO_MODULE_MAPPING = {
+        'KBaseSets.ReadsAlignmentSet': {
+            module: ReadsAlignmentSet,
+            method: 'get_reads_alignment_set_v1'
+        },
+        'KBaseSets.AssemblySet': {
+            module: AssemblySet,
+            method: 'get_assembly_set_v1'
+        }
+    };
+
+    /*
+    Implements a React component which primarily dispatches to the component which
+    matches the type of object provided in the prop 'objectRef'.
+    */
+    class Dispatcher extends Component {
+        constructor(props) {
+            super(props);
+            this.state = {
+                status: null,
+                // setType: null,
+                // error: null
+            };
+        }
+
+        async componentDidMount() {
+            this.setState({
+                status: 'loading'
+            });
+
+            try {
+                const workspace = new ServiceClient({
+                    url: this.props.workspaceURL,
+                    module: 'Workspace',
+                    token: this.props.token
+                });
+
+                const [infos] = await workspace.callFunc('get_object_info_new', [{
+                    objects: [{
+                        ref: this.props.objectRef
+                    }]
+                }]);
+
+                // Get a nicer object info (an object rather than array)
+                const objectInfo = ServiceUtils.objectInfoToObject(infos[0]);
+
+                // Make a versionless object type id for lookup in the set of supported
+                // set types defined above.
+                const objectType = [objectInfo.typeModule, objectInfo.typeName].join('.');
+
+                const mapping = SET_TYPE_TO_MODULE_MAPPING[objectType];
+                if (!mapping) {
+                    this.setState({
+                        status: 'error',
+                        error: new Error(`Unsupported set type: ${this.state.setType}`)
+                    });
+                    return;
+                }
+
+                this.setState({
+                    status: 'loaded',
+                    setType: objectType,
+                    module: mapping.module,
+                    method: mapping.method
+                });
+            } catch (error) {
+                console.error('Error getting object info', error);
+                this.setState({
+                    status: 'error',
+                    error
+                });
+            }
+        }
+
+        renderError() {
+            return e(ErrorMessage, {
+                error: this.state.error
+            });
+        }
+
+        renderLoaded() {
+            return e(SetLoader, {
+                token: this.props.token,
+                workspaceURL: this.props.workspaceURL,
+                serviceWizardURL: this.props.serviceWizardURL,
+                objectRef: this.props.objectRef,
+                method: this.state.method,
+                module: this.state.module
+            });
+
+            // return e(this.state.module, {
+            //     token: this.props.token,
+            //     workspaceURL: this.props.workspaceURL,
+            //     serviceWizardURL: this.props.serviceWizardURL,
+            //     objectRef: this.props.objectRef
+            // });
+        }
+
+        render() {
+            switch (this.state.status) {
+                case null:
+                case 'loading':
+                    return e('div', null, 'Loading...');
+                case 'error':
+                    return this.renderError();
+                case 'loaded':
+                    return this.renderLoaded();
+            }
+        }
+    }
+
+    return Dispatcher;
+});