From 461d44c5b9107a8128c8d4796c57bf5493b9392e Mon Sep 17 00:00:00 2001 From: Erik Pearson Date: Tue, 19 Dec 2023 17:46:11 -0800 Subject: [PATCH 001/102] add preact and htm dependencies [PTV-1905] c'mon peeps, lets start the (p)React train! --- kbase-extension/static/narrative_paths.js | 3 +++ package.json | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/kbase-extension/static/narrative_paths.js b/kbase-extension/static/narrative_paths.js index e2ce771b28..3ee15bbaa3 100644 --- a/kbase-extension/static/narrative_paths.js +++ b/kbase-extension/static/narrative_paths.js @@ -26,9 +26,11 @@ require.config({ domPurify: 'ext_components/dompurify/dist/purify.min', dropzone: 'ext_components/dropzone/dist/dropzone-amd-module', handlebars: 'ext_components/handlebars/dist/handlebars.amd.min', + htm: 'ext_components/htm/dist/htm.umd', json: 'ext_components/requirejs-plugins/src/json', 'jquery-nearest': 'ext_components/jquery-nearest/src/jquery.nearest.min', plotly: 'ext_components/plotly.js-dist-min/plotly.min', + preact: 'ext_components/preact/dist/preact.umd', kb_common: 'ext_components/kbase-common-js/dist/kb_common/', kb_service: 'ext_components/kbase-service-clients-js/dist/kb_service/', kb_sdk_clients: 'ext_components/kbase-sdk-clients-js/dist/amd/kb_sdk_clients/', @@ -108,6 +110,7 @@ require.config({ common: 'kbase/js/common', widgets: 'kbase/js/widgets', + preactComponents: 'kbase/js/preactComponents', appWidgets: 'kbase/js/widgets/appWidgets2', /*** diff --git a/package.json b/package.json index e961fcdbb9..7c5f0a8bb7 100644 --- a/package.json +++ b/package.json @@ -91,6 +91,7 @@ "font-awesome": "4.7.0", "google-code-prettify": "1.0.5", "handlebars": "^4.7.7", + "htm": "3.1.1", "jquery": "2.2.4", "jquery-nearest": "1.4.0", "jquery-ui": "^1.13.2", @@ -102,6 +103,7 @@ "kbase-ui-plugin-catalog": "https://github.com/kbase/kbase-ui-plugin-catalog/archive/refs/tags/v2.2.5.tar.gz", "numeral": "2.0.6", "plotly.js-dist-min": "2.18.2", + "preact": "10.13.2", "pure-uuid": "1.6.4", "require-css": "0.1.10", "require-yaml": "github:m90/require-yaml", @@ -166,4 +168,4 @@ "npm run compile_css_files" ] } -} +} \ No newline at end of file From cfa05a7f5664bdb1c5de6db8badee504c3c899c9 Mon Sep 17 00:00:00 2001 From: Erik Pearson Date: Wed, 20 Dec 2023 07:10:55 -0800 Subject: [PATCH 002/102] add some support components [PTV-1905] --- .../kbase/js/preactComponents/ErrorAlert.css | 38 +++++++++++++ .../kbase/js/preactComponents/ErrorAlert.js | 53 ++++++++++++++++++ .../kbase/js/preactComponents/Loading.js | 54 +++++++++++++++++++ .../js/preactComponents/Loading.styles.js | 34 ++++++++++++ 4 files changed, 179 insertions(+) create mode 100644 kbase-extension/static/kbase/js/preactComponents/ErrorAlert.css create mode 100644 kbase-extension/static/kbase/js/preactComponents/ErrorAlert.js create mode 100644 kbase-extension/static/kbase/js/preactComponents/Loading.js create mode 100644 kbase-extension/static/kbase/js/preactComponents/Loading.styles.js diff --git a/kbase-extension/static/kbase/js/preactComponents/ErrorAlert.css b/kbase-extension/static/kbase/js/preactComponents/ErrorAlert.css new file mode 100644 index 0000000000..2067fac414 --- /dev/null +++ b/kbase-extension/static/kbase/js/preactComponents/ErrorAlert.css @@ -0,0 +1,38 @@ +.ErrorAlert { + animation: grow 0.25s; +} + +.ErrorAlert-title { + display: flex; + flex-direction: row; + align-items: center; + font-weight: bold; +} + +.ErrorAlert-title .fa { + margin-right: 4px; +} + +/* .ErrorAlert.-grow { + animation: grow 0.25s; +} +.ErrorAlert.shrink { + animation: shrink 0.25s; +} */ +@keyframes grow { + from { + transform: scale(0); + } + to { + transform: scale(1); + } +} + +@keyframes shrink { + from { + transform: scale(1); + } + to { + transform: scale(0); + } +} \ No newline at end of file diff --git a/kbase-extension/static/kbase/js/preactComponents/ErrorAlert.js b/kbase-extension/static/kbase/js/preactComponents/ErrorAlert.js new file mode 100644 index 0000000000..e0f31189a2 --- /dev/null +++ b/kbase-extension/static/kbase/js/preactComponents/ErrorAlert.js @@ -0,0 +1,53 @@ +define([ + 'preact', + 'htm', + + 'bootstrap', + 'css!./ErrorAlert.css', +], ( + preact, + htm, +) => { + + const {h, Component} = preact; + const html = htm.bind(h); + + class ErrorAlert extends Component { + renderIcon() { + if (!this.props.showIcon) { + return; + } + return html ` + + `; + } + + renderTitle() { + if (this.props.compact) { + return this.renderIcon(); + } + return html` +

+ ${this.renderIcon()} + ${this.props.title || 'Error'} +

+ `; + } + renderContent() { + if (this.props.render) { + return this.props.render(); + } + return this.props.message || this.props.children; + } + render() { + return html` +
+ ${this.renderTitle()} + ${this.renderContent()} +
+ `; + } + } + + return ErrorAlert; +}); \ No newline at end of file diff --git a/kbase-extension/static/kbase/js/preactComponents/Loading.js b/kbase-extension/static/kbase/js/preactComponents/Loading.js new file mode 100644 index 0000000000..749f8e10ce --- /dev/null +++ b/kbase-extension/static/kbase/js/preactComponents/Loading.js @@ -0,0 +1,54 @@ +define([ + 'preact', + 'htm', + './Loading.styles', + + // For effect + 'bootstrap' +], ( + preact, + htm, + styles +) => { + + const {h, Component} = preact; + const html = htm.bind(h); + + class Loading extends Component { + render() { + const spinner = (() => { + switch (this.props.size) { + case 'normal': + return html``; + default: + return html``; + } + })(); + if (this.props.type === 'inline') { + return html` +
+ ${spinner} + ${' '} + + ${this.props.message} + +
+ `; + } else { + return html` +
+
+ ${spinner} + ${' '} + + ${this.props.message} + +
+
+ `; + } + } + } + + return Loading; +}); \ No newline at end of file diff --git a/kbase-extension/static/kbase/js/preactComponents/Loading.styles.js b/kbase-extension/static/kbase/js/preactComponents/Loading.styles.js new file mode 100644 index 0000000000..dabe489671 --- /dev/null +++ b/kbase-extension/static/kbase/js/preactComponents/Loading.styles.js @@ -0,0 +1,34 @@ +define([], () => { + return { + LoadingContainer: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center' + }, + Loading: { + flex: '0 0 auto', + border: '1px solid rgba(200, 200, 200, 0.4)', + borderRadius: '4px', + backgroundColor: 'rgba(200, 200, 200, 0.2)', + padding: '10px', + margin: '10px', + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center' + }, + LoadingInline: { + flex: '0 0 auto', + padding: '4px', + margin: '4px', + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center' + }, + LoadingMessage: { + marginLeft: '1em' + } + }; +}); \ No newline at end of file From 802adcdfcf7940da5464f42181b2850d5995cba9 Mon Sep 17 00:00:00 2001 From: Erik Pearson Date: Wed, 20 Dec 2023 07:11:59 -0800 Subject: [PATCH 003/102] improve by adding support for modal size and the "shown" event [PTV-1905] --- .../static/kbase/js/util/bootstrapDialog.js | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/kbase-extension/static/kbase/js/util/bootstrapDialog.js b/kbase-extension/static/kbase/js/util/bootstrapDialog.js index 24528b4b28..f051d8bff0 100644 --- a/kbase-extension/static/kbase/js/util/bootstrapDialog.js +++ b/kbase-extension/static/kbase/js/util/bootstrapDialog.js @@ -11,11 +11,17 @@ define(['jquery', 'bootstrap'], ($) => { * enterToTrigger: boolean, default false, * type: string, type of alert (from bootstrap text types: warning, error, etc.), * alertOnly: create as an "alert" with a single "Close" button in the footer + * size: 'sm', 'lg', null * } */ const BootstrapDialog = function (options) { - this.$modal = $('