Merge pull request #165 from data-intuitive/develop

- Fix an issue where data refresh causes the top table expansion functionality locking up caused by added listeners and streams getting interrupted - Fix issue when a sample selection filter is removed triggering an update on unavailable data - Hide outdated sample selection data when retrieving new data due a new selected perturbation - Update Ramda to recent versions
data-intuitive · Dec 7, 2022 · 74eeff5 · 74eeff5
2 parents d98bc5c + 33e7897
commit 74eeff5
Show file tree

Hide file tree

Showing 25 changed files with 774 additions and 4,019 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # CHANGELOG
 
+## Version 5.4.1
+
+### Bug fixes
+
+- Fix an issue where data refresh causes the top table expansion functionality locking up caused by added listeners and streams getting interrupted
+- Fix issue when a sample selection filter is removed triggering an update on unavailable data
+- Hide outdated sample selection data when retrieving new data due a new selected perturbation
+
+### Minor changes
+
+- Update npm packages and create package-loc.json from scratch, solving many remaining open audit hits
+- Update Ramda to 0.28.0, fix `merge` being removed in favour of `mergeRight` and `contains` in favour of `includes`
+
 ## Version 5.4.0
 
 ### Functionality

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "LuciusWeb",
-    "version": "5.4.0",
+    "version": "5.4.1",
     "description": "Web interface for ComPass aka Lucius",
     "repository": {
         "type": "git",
@@ -25,24 +25,21 @@
     "author": "Toni Verbeiren",
     "license": "Apache v2",
     "devDependencies": {
-        "@babel/cli": "^7.19.3",
         "@babel/core": "^7.20.2",
         "@babel/preset-env": "^7.20.2",
         "@babel/register": "^7.18.9",
         "css-loader": "^6.7.2",
         "file-loader": "^5.0.2",
         "jquery": "^3.6.1",
-        "materialize-loader": "^3.0.1",
         "mini-css-extract-plugin": "^0.8.0",
         "mocha": "^10.1.0",
         "sass": "^1.56.1",
         "sass-loader": "^11.0.1",
         "style-loader": "^1.0.1",
         "url-loader": "^3.0.0",
         "webpack": "^5.75.0",
-        "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "^4.11.1",
-        "webpack-material-design-icons": "^0.1.0"
+        "webpack-cli": "^5.0.0",
+        "webpack-dev-server": "^4.11.1"
     },
     "dependencies": {
         "@cycle/dom": "^23.1.0",
@@ -55,10 +52,9 @@
         "cycle-onionify": "^3.3.0",
         "cycle-storageify": "^3.2.0",
         "cyclic-router": "^6.0.0",
-        "datalib": "^1.9.3",
         "helmet": "^6.0.0",
         "materialize-css": "^1.0.0",
-        "ramda": "^0.27.2",
+        "ramda": "^0.28.0",
         "switch-path": "^1.2.0",
         "vega": "^5.22.1",
         "vega-parser": "^6.1.3",

diff --git a/src/js/components/AdminStatus.js b/src/js/components/AdminStatus.js
@@ -1,11 +1,8 @@
-import { a, div, br, label, input, p, button, code, pre, i, span } from '@cycle/dom'
+import { i, span } from '@cycle/dom'
 import xs from 'xstream'
-import isolate from '@cycle/isolate'
-import { mergeWith, merge } from 'ramda'
-import { clone, equal, equals, mergeAll, omit } from 'ramda';
+import { equals, omit } from 'ramda';
 import dropRepeats from 'xstream/extra/dropRepeats'
 import debounce from 'xstream/extra/debounce'
-import sampleCombine from 'xstream/extra/sampleCombine'
 
 // Alert the user when last response time is 1.5 times higher than the minimum
 // over the history of the jobserver.

diff --git a/src/js/components/CompoundTable/CompoundInfo.js b/src/js/components/CompoundTable/CompoundInfo.js
@@ -1,9 +1,6 @@
 import xs from 'xstream'
 import { i, a, h, p, div, br, label, input, code, table, tr, td, b, h2, button, svg, h1, th, thead, tbody, li, span, img, em } from '@cycle/dom'
-import { log } from '../../utils/logger'
-import { merge } from 'ramda'
-import dropRepeats from 'xstream/extra/dropRepeats'
-import { stateDebug } from '../../utils/utils'
+import { mergeRight } from 'ramda'
 import { safeModelToUi } from '../../modelTranslations'
 
 export function CompoundInfo(sources) {
@@ -32,8 +29,8 @@ export function CompoundInfo(sources) {
     const detail = (sample, props, blur) => {
         let hStyle = { style: { margin: '0px', fontWeight: 'bold' } }
         let pStyle = { style: { margin: '0px' } }
-        let hStylewBlur = { style: merge(blur, { margin: '0px', fontWeight: 'bold' }) }
-        let pStylewBlur = { style: merge(blur, { margin: '0px' }) }
+        let hStylewBlur = { style: mergeRight(blur, { margin: '0px', fontWeight: 'bold' }) }
+        let pStylewBlur = { style: mergeRight(blur, { margin: '0px' }) }
         let urlSourire = props.sourire.url
         let url = urlSourire + encodeURIComponent(sample.compound_smiles).replace(/%20/g, '+')
         return div('.col .s12', [
@@ -46,7 +43,7 @@ export function CompoundInfo(sources) {
                 p('.s12', pStylewBlur, entry('InchiKey: ', sample.compound_inchikey)),
                 p('.s12', pStylewBlur, entry('Targets: ', sample.compound_targets.join(', ')))
             ]),
-            div('.col .s4 .offset-s8 .l4', { style: merge(blur, { margin: '20px 0px 0px 0px' }) }, [
+            div('.col .s4 .offset-s8 .l4', { style: mergeRight(blur, { margin: '20px 0px 0px 0px' }) }, [
                 (sample.compound_smiles != null && sample.compound_smiles != 'NA' && sample.compound_smiles != 'No Smiles') ?
                 img('.col .s12 .valign', { props: { src: url } }) :
                 ''

diff --git a/src/js/components/GeneAnnotationQuery.js b/src/js/components/GeneAnnotationQuery.js
@@ -1,7 +1,5 @@
 import { loggerFactory } from '../utils/logger'
 import xs from 'xstream'
-import { keys, values, filter, head, equals, map, prop, clone, omit, merge } from 'ramda'
-import dropRepeats from 'xstream/extra/dropRepeats'
 import { i, em, p, div, br, label, input, code, table, tr, td, b, h2, button, textarea, a, ul, li, span, th, thead, tbody, h3, h4 } from '@cycle/dom';
 import { absGene, titleCase } from '../utils/utils'
 import sampleCombine from 'xstream/extra/sampleCombine'

diff --git a/src/js/components/SampleSelection.js b/src/js/components/SampleSelection.js
@@ -14,11 +14,10 @@ import {
   p,
   i,
 } from "@cycle/dom"
-import { clone, equals, merge, sortWith, prop, ascend, descend, keys, length, includes, anyPass, allPass, filter } from "ramda"
+import { clone, equals, mergeRight, sortWith, prop, ascend, descend, keys, length, includes, anyPass, allPass, filter } from "ramda"
 import xs from "xstream"
 import isolate from "@cycle/isolate"
 import dropRepeats from "xstream/extra/dropRepeats"
-import debounce from 'xstream/extra/debounce'
 import { loggerFactory } from "../utils/logger"
 import { TreatmentAnnotation } from "./TreatmentAnnotation"
 import { SampleSelectionFilters, SampleSelectionFiltersLens } from "./SampleSelectionFilters"
@@ -269,7 +268,7 @@ function SampleSelection(sources) {
   const loadingState$ = state$
     .map((state) => ({
       ...state,
-      core: { ...state.core, data: []}
+      core: { ...state.core, data: [], usageData: [] }
     }))
 
   const request$ = newInput$.map((state) => {
@@ -436,8 +435,8 @@ function SampleSelection(sources) {
   const initVdom$ = emptyState$.mapTo(div())
 
   const loadingVdom$ = request$
-    .compose(sampleCombine(loadingState$, sampleFilters.DOM))
-    .map(([_, state, filtersDom]) =>
+    .compose(sampleCombine(loadingState$))
+    .map(([_, state]) =>
       // Use the same makeTable function, pass a initialization=true parameter and a body DOM with preloading
       makeFiltersAndTable(
         state,
@@ -449,7 +448,7 @@ function SampleSelection(sources) {
           ),
         ]),
         true,
-        filtersDom
+        div()
       )
     )
     .remember()
@@ -463,7 +462,7 @@ function SampleSelection(sources) {
   const vdom$ = dirtyWrapperStream( state$, xs.merge(initVdom$, loadingVdom$, loadedVdom$))
 
   const dataReducer$ = data$.map((data) => (prevState) => {
-    const newData = data.map((el) => merge(el, { use: true, hide: false }))
+    const newData = data.map((el) => mergeRight(el, { use: true, hide: false }))
     const hiddenData = hideFilteredData(newData, prevState.core.filtersObject)
     return {
       ...prevState,

diff --git a/src/js/components/SampleSelectionFilters.js b/src/js/components/SampleSelectionFilters.js
@@ -666,6 +666,12 @@ function model(state$, intents, sliderEvents$) {
     const [key, unit, _] = deserialize(id)
     const prevFilterData = prevState.core.filterData
 
+    // Check the data we'll be working with is even available, if not it's probably because a filter element was removed
+    // By returning prevState, we're effectively returning a new state without any invalid data
+    if (prevState.core.filterInfo[key] == undefined || prevFilterData[key] == undefined) {
+      return prevState
+    }
+
     const keyLens = lensProp(key)
     const currentFilterDataKey = viewR(keyLens, prevFilterData)
 

diff --git a/src/js/components/SampleTable/SampleInfo.js b/src/js/components/SampleTable/SampleInfo.js
@@ -7,7 +7,7 @@ import {
   img,
   i,
 } from "@cycle/dom"
-import { merge } from "ramda"
+import { mergeRight } from "ramda"
 import { safeModelToUi } from "../../modelTranslations"
 
 import img_trt_cp          from "/images/treatmentTypes/TRT_CP.png"
@@ -77,36 +77,36 @@ export function SampleInfo(sources) {
 
   // Don't allow propagation of the event when the click is on .filtersZoom or .informationDetailsZoom
   // Otherwise it will propagate to .zoom and close the row details instead of opening/closing .filtersZoom or .informationDetailsZoom
-  // This code doesn't quite follow the cycle.js dogma
-  xs.merge(clickFilters$, clickInfoDetails$)
-    .addListener({
-      next: (ev) => { ev.stopPropagation() },
-      error: () => {}
-    })
-
+  // Calling ev.stopPropagation() this way doesn't quite follow the cycle.js dogma
   const zoomInfo$ = xs.merge(
-    clickRow$.mapTo("row"),
-    clickFilters$.mapTo("filters"),
-    clickInfoDetails$.mapTo("infoDetails")
+    clickRow$.map(ev => [ev, "row"]),
+    clickFilters$.map(ev => [ev, "filters"]),
+    clickInfoDetails$.map(ev => [ev, "infoDetails"])
     )
-    .fold((acc, ev) => 
+    .fold((acc, [ev, id]) => 
       {
-        if (ev == "row")
+        if (id == "row") {
           return {
             row: !acc.row,
             filters: false,
             infoDetails: false,
           }
-        else if (ev == "filters")
+        }
+        else if (id == "filters") {
+          ev.stopPropagation()
           return {
             ...acc,
             filters: !acc.filters
           }
-        else if (ev = "infoDetails")
+        }
+        else if (id == "infoDetails") {
+          ev.stopPropagation()
           return {
             ...acc,
             infoDetails: !acc.infoDetails
           }
+        }
+        else return acc
       }
       ,
       { row: false, filters: false, infoDetails: false }
@@ -394,7 +394,7 @@ export function SampleInfo(sources) {
   const rowDetail = (sample, props, blur, informationDetails, zoomInfo) => {
     let hStyle = { style: { margin: "0px", fontWeight: "bold" } }
     let pStyle = { style: { margin: "0px" } }
-    let pStylewBlur = { style: merge(blur, { margin: "0px" }) }
+    let pStylewBlur = { style: mergeRight(blur, { margin: "0px" }) }
     const _filters = sample.filters != undefined ? sample.filters : []
 
     const origDose = _filters.find(e => e.key == "orig_dose")?.value ?? "N/A"
@@ -505,7 +505,7 @@ export function SampleInfo(sources) {
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, samplePart),
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, treatmentPart),
         div(".col .s12 .offset-s8 .offset-m8 .l4",
-          {style: merge(blur, { margin: "20px 0px 0px 0px" }) },
+          {style: mergeRight(blur, { margin: "20px 0px 0px 0px" }) },
           visualizeSmilesPart
         ),
         div(".col .s12", { style: { margin: "15px 0px 0px 0px" } }, expandingFiltersAndReplicationPart),
@@ -514,7 +514,7 @@ export function SampleInfo(sources) {
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, samplePart),
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, treatmentPart),
         div(".col .s12 .m12 .l2 .push-l2 .hide-on-med-and-down .center-align",
-          { style: merge(blur, { height: "100%", "margin-top": "30px"}) },
+          { style: mergeRight(blur, { height: "100%", "margin-top": "30px"}) },
           visualizeTextPart
         ),
         div(".col .s12", { style: { margin: "15px 0px 0px 0px" } }, expandingFiltersAndReplicationPart),
@@ -523,7 +523,7 @@ export function SampleInfo(sources) {
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, samplePart),
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, treatmentPart),
         div(".col .s12 .m12 .l2 .push-l2 .hide-on-med-and-down .center-align",
-          { style: merge(blur, { height: "100%", "margin-top": "30px"}) },
+          { style: mergeRight(blur, { height: "100%", "margin-top": "30px"}) },
           visualizeTextPart
         ),
         div(".col .s12", { style: { margin: "15px 0px 0px 0px" } }, expandingFiltersAndReplicationPart),
@@ -532,7 +532,7 @@ export function SampleInfo(sources) {
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, samplePart),
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, treatmentPart),
         div(".col .s12 .m12 .l2 .push-l2 .hide-on-med-and-down .center-align",
-          { style: merge(blur, { height: "100%", "margin-top": "30px"}) },
+          { style: mergeRight(blur, { height: "100%", "margin-top": "30px"}) },
           visualizeTextPart
         ),
         div(".col .s12", { style: { margin: "15px 0px 0px 0px" } }, expandingFiltersAndReplicationPart),
@@ -541,7 +541,7 @@ export function SampleInfo(sources) {
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, samplePart),
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, treatmentPart),
         div(".col .s12 .m12 .l2 .push-l2 .hide-on-med-and-down .center-align",
-          { style: merge(blur, { height: "100%", "margin-top": "30px"}) },
+          { style: mergeRight(blur, { height: "100%", "margin-top": "30px"}) },
           visualizeTextPart
         ),
         div(".col .s12", { style: { margin: "15px 0px 0px 0px" } }, expandingFiltersAndReplicationPart),
@@ -550,7 +550,7 @@ export function SampleInfo(sources) {
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, samplePart),
         div(".col .s12 .m6 .l4", { style: { margin: "15px 0px 0px 0px" } }, treatmentPart),
         div(".col .s12 .offset-s8 .offset-m8 .l4",
-          {style: merge(blur, { margin: "20px 0px 0px 0px" }) },
+          {style: mergeRight(blur, { margin: "20px 0px 0px 0px" }) },
           visualizeSmilesPart
         ),
         div(".col .s12", { style: { margin: "15px 0px 0px 0px" } }, expandingFiltersAndReplicationPart),

diff --git a/src/js/components/SettingsEditor.js b/src/js/components/SettingsEditor.js
@@ -9,7 +9,7 @@ import {
   } from "@cycle/dom"
   import xs from "xstream"
   import isolate from "@cycle/isolate"
-  import { merge } from "ramda"
+  import { mergeRight } from "ramda"
   import { pick, mix } from "cycle-onionify"
 
 /**
@@ -82,13 +82,13 @@ export function SettingsEditor(sources) {
       if (config.type == "checkbox") {
         return [
           label(".active", [
-            input({ props: merge(config.props, { checked: _state }) }),
+            input({ props: mergeRight(config.props, { checked: _state }) }),
             span(".lever"),
           ]),
         ]
       }
       if (config.type == "text" || config.type == "range") {
-        return [input({ props: merge(config.props, { value: _state }) })]
+        return [input({ props: mergeRight(config.props, { value: _state }) })]
       }
       if (config.type == "select") {
         const options = config.options
@@ -102,7 +102,7 @@ export function SettingsEditor(sources) {
             { style: { "border-style": "solid", margin: "2px" } },
             [
               label(selectedOption(o), [
-                input("", { props: merge(config.props, { value: o }) }, ""),
+                input("", { props: mergeRight(config.props, { value: o }) }, ""),
                 o,
               ]),
             ]

diff --git a/src/js/components/SignatureGenerator.js b/src/js/components/SignatureGenerator.js
@@ -1,14 +1,9 @@
 import sampleCombine from 'xstream/extra/sampleCombine'
-import isolate from '@cycle/isolate'
 import { i, p, div, br, label, input, code, table, tr, td, b, h2, button, textarea, a, ul, li, span, th, thead, tbody, h3 } from '@cycle/dom';
-import { clone, equals, merge, isEmpty } from 'ramda';
+import { clone, equals, isEmpty } from 'ramda';
 import xs from 'xstream';
-// import { logThis, log } from '../utils/logger'
-// import { ENTER_KEYCODE } from '../utils/keycodes.js'
 import dropRepeats from 'xstream/extra/dropRepeats'
-// import delay from 'xstream/extra/delay'
 import { loggerFactory } from '../utils/logger'
-// import { stringify } from 'querystring';
 import { GeneAnnotationQuery } from './GeneAnnotationQuery'
 import { absGene } from '../utils/utils'
 import { busyUiReducer, dirtyWrapperStream } from "../utils/ui"

diff --git a/src/js/components/Statistics.js b/src/js/components/Statistics.js
@@ -1,8 +1,6 @@
 import { a, div, br, label, input, p, button, code, pre, span, h5 } from '@cycle/dom'
 import xs from 'xstream'
-import isolate from '@cycle/isolate'
-import { mergeWith, merge } from 'ramda'
-import { clone, equal, equals, mergeAll, omit } from 'ramda';
+import { equals, mergeRight, omit } from 'ramda';
 import dropRepeats from 'xstream/extra/dropRepeats'
 import debounce from 'xstream/extra/debounce'
 
@@ -127,7 +125,7 @@ function Statistics(sources) {
     });
 
     // Add the result to the state
-    const stateReducer$ = data$.map(data => prevState => merge(prevState, { result: data }))
+    const stateReducer$ = data$.map(data => prevState => mergeRight(prevState, { result: data }))
 
     return {
         DOM: vdom$,