Merge pull request #117 from sharmalab/paper-prep

Tests, Lint Fixes, and also Paper prep

.eslintrc.json

@@ -20,6 +20,15 @@
     "no-plusplus": 0,
     "no-param-reassign": ["error", { "props": false }],
     "prefer-destructuring": ["error", { "object": true, "array": false }],
+    "react/no-unused-class-component-methods": 0,
+    "react/prop-types": 0,
+    "eqeqeq": 0,
+    "react/no-unused-state": 0,
+    "jsx-a11y/control-has-associated-label": 0, // don't like omitting this...
+    "jsx-a11y/click-events-have-key-events": 0, // don't like omitting this either...
+    "no-underscore-dangle":0,
+    "no-unused-vars":0, // for now...
+    "no-console": 0,
     "jsx-a11y/label-has-associated-control": [
       "error",
       {

.github/workflows/draft-paper.yml

@@ -0,0 +1,26 @@
+on: [push]
+
+name: Build Paper Draft
+
+
+jobs:
+  paper:
+    runs-on: ubuntu-latest
+    name: JOSS Paper Draft
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Build draft PDF
+        uses: openjournals/openjournals-draft-action@master
+        with:
+          journal: joss
+          # This should be the path to the paper within your repo.
+          paper-path: paper.md
+      - name: Upload
+        uses: actions/upload-artifact@v1
+        with:
+          name: paper
+          # This is the output path where Pandoc will write the compiled
+          # PDF. Note, this should be the same directory as the input
+          # paper.md
+          path: paper.pdf

.github/workflows/lint_test.yml

@@ -0,0 +1,24 @@
+name: Code Quality Checks (Lint)
+
+on:
+  push:
+
+jobs:
+  lint:
+    name: Run npm lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Run lint
+        run: npm run lint

.github/workflows/smoke_test.yml

@@ -0,0 +1,23 @@
+name: Code Test (Smoke)
+
+on: [push]
+
+jobs:
+  lint:
+    name: Run npm lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Run test
+        run: npm test

Dockerfile

@@ -8,7 +8,7 @@ COPY ./ /source/
 WORKDIR /source/
 RUN rm -rf ./.git/
 
-RUN npm install
+RUN npm install --legacy-peer-deps
 RUN npm run-script build
 RUN mkdir -p /var/www/html/
 RUN mv /source/dist/* /var/www/html

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "lint": "eslint source",
-    "lint:fix": "eslint --fix",
+    "lint:fix": "eslint source --fix",
     "test": "npm run-script build",
     "build": "parcel build source/index.html --public-url ./",
     "dev": "parcel source/index.html"
@@ -24,6 +24,7 @@
   "license": "BSD-3-Clause",
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-free": "^6.5.2",
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
@@ -32,6 +33,7 @@
     "@types/sortablejs": "^1.15.4",
     "array-move": "^3.0.1",
     "bootstrap": "^5.3.2",
+    "bootstrap-css-only": "^4.4.1",
     "crossfilter2": "^1.5.4",
     "d3": "^5.16.0",
     "jquery": "^3.7.1",

paper.bib

@@ -0,0 +1,50 @@
+@misc{bokeh,
+  author = {Bokeh Contributors},
+  title = {Bokeh: an interactive visualization library for modern web browsers},
+  year = {2024},
+  url = {https://github.com/bokeh/bokeh}
+}
+
+@article{cbioportal2013,
+  author = {Gao, Jianjiong and Aksoy, Bulent Arman and Dogrusoz, Ugur and Dresdner, Gideon and Gross, Benjamin and Sumer, S Onur and Sun, Yichao and Jacobsen, Anders and Sinha, Rileen and Larsson, Erik and Cerami, Ethan and Sander, Chris and Schultz, Nikolaus},
+  title = {Integrative analysis of complex cancer genomics and clinical profiles using the cBioPortal},
+  journal = {Sci Signal},
+  year = {2013},
+  volume = {6},
+  number = {269}
+}
+
+@inproceedings{datascope2017,
+  author = {Iyer, Ganesh and DuttaDuwarah, Sapoonjyoti and Sharma, Ashish},
+  title = {DataScope: Interactive visual exploratory dashboards for large multidimensional data},
+  booktitle = {2017 IEEE Workshop on Visual Analytics in Healthcare (VAHC)},
+  year = {2017},
+  pages = {17-23}
+}
+
+@article{nbia2020,
+  author = {Nguyen, Tin and Shafi, Adib and Nguyen, Tuan-Minh and Schissler, A. Grant and Draghici, Sorin},
+  title = {NBIA: a network-based integrative analysis framework - applied to pathway analysis},
+  journal = {Scientific Reports},
+  year = {2020},
+  volume = {10},
+  number = {1}
+}
+
+@article{tica2013,
+  author = {Clark, Kenneth and Vendt, Bruce and Smith, Kirk and Freymann, John and Kirby, Justin and Moore, Stephen and Phillips, Stanley and Maffit, David and Pringle, Michael and Tarbox, Lawrence and Prior, Fred},
+  title = {The Cancer Imaging Archive (TCIA): Maintaining and Operating a Public Information Repository},
+  journal = {J Digit Imaging},
+  year = {2013},
+  volume = {26},
+  number = {6},
+  pages = {1045-1057}
+}
+
+@article{prism2020,
+  author = {Sharma, Ashish and Tarbox, Lawrence and Kurc, Tahsin and Bona, Jonathan and Smith, Kirk and Kathiravelu, Pradeeban and Bremer, Erich and Saltz, Joel H. and Prior, Fred},
+  title = {PRISM: A Platform for Imaging in Precision Medicine},
+  journal = {JCO Clinical Cancer Informatics},
+  year = {2020},
+  volume = {4}
+}

paper.md

@@ -0,0 +1,51 @@
+---
+title: 'Eaglescope: an interactive visualization and cohort selection tool for biomedical data exploration.'
+tags:
+  - javascript
+  - interactive visualization
+  - data exploration
+  - biomedical research
+  - data analysis
+authors:
+  - name: Nan Li
+    equal-contrib: true
+    affiliation: 1
+    orcid: 0000-0002-3975-4809
+  - name: Ryan Birmingham
+    orcid: 0000-0002-7943-6346
+    equal-contrib: true
+    affiliation: 1
+  - name: Tony Pan
+    affiliation: 1
+  - name: Yahia Zakaria
+    corresponding: true
+    affiliation: 2
+affiliations:
+ - name: Emory Univeristy, USA
+   index: 1
+ - name: Independent Researcher, Egypt
+   index: 2
+date: 23 April 2024
+bibliography: paper.bib
+
+---
+
+# Summary
+
+Eaglescope is a configurable code-free interactive visualization and cohort selection tool designed for biomedical data exploration. It is designed to be hosted flexibly without the need for a dedicated server, and creates an interactive dashboard based upon a configuration file and either an API or data file. It uses visualizations of sets of features to describe and enable contextual filtering of the data. This allows for users to understand deeper patterns or anomalies within the data, and to create datasets specifically tuned to their requirements effortlessly.
+Eaglescope is typically utilized either as a tool to create refined datasets tailored for training and validating machine learning AI models, or as a central hub for further exploration, allowing users to seamlessly navigate to biomedical viewers such as DICOM or whole slide imaging (WSI) platforms.
+![Interactive Contextual Visualizations](./ContextualVis.png)
+To create a dashboard, users simply need to create a file specifying the data source, configurations for each visualization, and any further desired customizations to the platform. Hosting is as straightforward as copying the static files, along with the configuration and data files if applicable, to any location capable of hosting static files. This streamlined process was intentionally designed to support the visualization of multiple datasets without added complexity or specialized requirements. Additionally, the flexibility of hosting allows for seamless scalability with demand, eliminating the need for modifications to Eaglescope itself.
+
+# Statement of Need
+
+Eaglescope was initially developed as a successor to abother tool [@datascope2017] to enhance the usability of interactively exploring large biomedical datasets. To achieve this, we created a versatile tool capable of supporting multiple datasets, easily reconfigurable without coding, and deployable in a serverless manner. Moreover, Eaglescope facilitates hierarchical usage, allowing dashboards to represent and link to other dashboards. Recognizing the value of visually contextualized filtering operations, we introduced a set of visualizations that display filtered data within its broader context. This approach enables users to uncover patterns in the data that might otherwise go unnoticed, fostering deeper insights and more informed decision making in biomedical research.
+Eaglescope takes inspiration from Bokeh [@bokeh], cBioPortal [@cbioportal2013], and NBIA [@nbia2020] for features and user experience.
+The Cancer Imaging Archive (TCIA) [@tica2013] and the National Cancer Institute use Eaglescope to enable exploration and export of the large amount of data across collections and modalities and the PRISM [@prism2020] project includes Eaglescope to facilitate dataset creation and visualization.
+
+# Acknowledgements
+
+We acknowledge all contibutors to the Eaglescope project, as well as grant support subawarded by the University of Arkansas Medical School and both financial and logistical support from the Emory Univeristy Department of Biomedical Informatics.
+
+# References
+

source/common/utils.js

@@ -113,7 +113,7 @@ export function getLayoutConfig(chartsConfig, cols, resiziable = false) {
   const layout = [];
   const matrix = createMatrix(cols);
   // sort charts by priority
-  chartsConfig = chartsConfig.sort(
+  const chartsConfigSorted = chartsConfig.sort(
     (a, b) => b.priority - a.priority || a.title.localeCompare(b.displayName),
   );
 
@@ -124,7 +124,7 @@ export function getLayoutConfig(chartsConfig, cols, resiziable = false) {
   // filter out the solid chart before compute the position of the rest of charts
 
   // make an arrangement for the rest of charts
-  chartsConfig.forEach((chart) => {
+  chartsConfigSorted.forEach((chart) => {
     // get the size of a chart; default size is [1,1] (w,h)
     const size = chart.size || [1, 1];
     const pos = matrix.length === 0 ? [0, 0] : getPosition(matrix, size);
@@ -150,15 +150,3 @@ export function getLayoutConfig(chartsConfig, cols, resiziable = false) {
 
   return { layout, rows: matrix[0].length };
 }
-
-// Grid includes 10px margin
-export function getSizeOfGridContent(gridSize, margin) {
-  return [
-    STUDY_VIEW_CONFIG.layout.grid.w * gridSize[0]
-      + (chartDimension.w - 1) * STUDY_VIEW_CONFIG.layout.gridMargin.x
-      - borderWidth * 2,
-    STUDY_VIEW_CONFIG.layout.grid.h * gridSize[1]
-      + (chartDimension.h - 1) * STUDY_VIEW_CONFIG.layout.gridMargin.y
-      - chartHeight,
-  ];
-}

source/components/Eaglescope/Eaglescope.js

@@ -39,12 +39,12 @@ function Eaglescope() {
     if (filters.length > 0) {
       setProgressAttrs({
         now: filteredData.length,
-        label: `${filteredData.length}/${data.length}, ${Math.floor((filteredData.length/data.length)*100)}\%`,
+        label: `${filteredData.length}/${data.length}, ${Math.floor((filteredData.length / data.length) * 100)}%`,
       });
     } else {
       setProgressAttrs({
         now: data.length,
-        label: `${data.length}/${data.length}, ${Math.floor((data.length/data.length)*100)}\%`,
+        label: `${data.length}/${data.length}, ${Math.floor((data.length / data.length) * 100)}%`,
       });
     }
   }, [filters, filteredData]);