From 3b2fa0c907dece34fd09a39931867996fc50d538 Mon Sep 17 00:00:00 2001 From: abarkellumich Date: Mon, 27 Sep 2021 11:20:45 -0400 Subject: [PATCH 1/6] Removing grid size and pilot limits --- package-lock.json | 12 ++- src/components/Slides/Menu/Menu.js | 4 +- src/components/Slides/Menu/SlideList.js | 109 +++++++++++---------- src/components/Slides/SlideViewer.js | 19 +--- src/components/Slides/slideHelpers.test.js | 32 ------ 5 files changed, 71 insertions(+), 105 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5f4be1b..4fca381 100755 --- a/package-lock.json +++ b/package-lock.json @@ -3809,7 +3809,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true } } @@ -16946,7 +16947,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true } } @@ -18315,7 +18317,8 @@ }, "ua-parser-js": { "version": "0.7.19", - "resolved": "" + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", + "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==" }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", @@ -19041,7 +19044,8 @@ }, "y18n": { "version": "4.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", + "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", "dev": true }, "yallist": { diff --git a/src/components/Slides/Menu/Menu.js b/src/components/Slides/Menu/Menu.js index 663667b..7889b2c 100755 --- a/src/components/Slides/Menu/Menu.js +++ b/src/components/Slides/Menu/Menu.js @@ -27,8 +27,6 @@ class Menu extends Component { customCrossIcon={false} > -
- - - - - ); + componentDidUpdate() { + noSlidesFound(this.props.selectedParticipant); + } - } + render() { + return ( + + ); + } } export default SlideList; diff --git a/src/components/Slides/SlideViewer.js b/src/components/Slides/SlideViewer.js index 6a4ec98..8b4704a 100755 --- a/src/components/Slides/SlideViewer.js +++ b/src/components/Slides/SlideViewer.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import OpenSeadragon from 'openseadragon'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPlus, faMinus, faCrosshairs } from '@fortawesome/free-solid-svg-icons'; -import { noSlidesFound, determineIfSlideTooLargeForGrid, determineIfPilotSlide, getNextLetterInAlphabet } from './slideHelpers'; +import { noSlidesFound, getNextLetterInAlphabet } from './slideHelpers'; import Menu from './Menu/Menu'; import PropTypes from 'prop-types'; import DivOverlays from './DivOverlays'; @@ -28,8 +28,6 @@ class SlideViewer extends Component { overlayLabel: [], renderLabels: true, labelSetId: 0, - slideTooLarge: false, - isPilotSlide: false, gridOverlay: [] } } @@ -61,19 +59,12 @@ class SlideViewer extends Component { return false; } - async renderOverlayLabels() { - - await this.setState({slideTooLarge: determineIfSlideTooLargeForGrid(this.props.selectedParticipant.selectedSlide.metadata, this.state.vertical), - isPilotSlide: determineIfPilotSlide(this.props.participants, this.props.selectedParticipant)}); - - if (!this.state.isPilotSlide && !this.state.slideTooLarge ) { const [gridOverlay, overlayLabel] = await this.getGridOverlay( // eslint-disable-line this.props.selectedParticipant.selectedSlide.metadata, this.state.labelSetId + 1); await this.setState({ overlayLabel, gridOverlay, renderLabels: false, labelSetId: this.state.labelSetId + 1 }) await this.setState({ renderLabels: true }) - } } getNextLetterInAlphabet(currentLetter = '') { @@ -162,7 +153,7 @@ class SlideViewer extends Component { } handleShowGridToggle() { - if (this.state.showGrid || this.state.slideTooLarge || this.state.isPilotSlide) { + if (this.state.showGrid) { this.setState({ showGrid: false, showGridLabel: false }) } else { this.setState({ showGrid: true }) @@ -202,8 +193,6 @@ class SlideViewer extends Component { handleCancelGridPropertiesClick={this.handleCancelGridPropertiesClick} showGrid={this.state.showGrid} showGridLabel={this.state.showGridLabel} - slideTooLarge={this.state.slideTooLarge} - isPilotSlide={this.state.isPilotSlide} handleSetGridPropertiesClick={this.handleSetGridPropertiesClick} vertical={this.state.vertical} horizontal={this.state.horizontal} @@ -212,7 +201,7 @@ class SlideViewer extends Component { selectedParticipant={this.props.selectedParticipant} />
{ this.el = node; }}> -
+
    • @@ -232,4 +221,4 @@ SlideViewer.propTypes = { selectedParticipant: PropTypes.object.isRequired, }; -export default SlideViewer; \ No newline at end of file +export default SlideViewer; diff --git a/src/components/Slides/slideHelpers.test.js b/src/components/Slides/slideHelpers.test.js index 2e4814a..e09ff54 100755 --- a/src/components/Slides/slideHelpers.test.js +++ b/src/components/Slides/slideHelpers.test.js @@ -198,38 +198,6 @@ describe('getStainImageName', () => { }); }); -describe('determineIfSlideTooLargeForGrid', () => { - - it('should return true for large images', () => { - let metadata = { - aperio : { - originalWidth: 164592, - originalHeight: 67372 - }, - openSlide : { - mpp_y: .25 - } - }; - let result = determineIfSlideTooLargeForGrid(metadata, 500); - expect(result).toEqual(true) - }); - - it('should return false for small enough images', () => { - let metadata = { - aperio : { - originalWidth: 44592, - originalHeight: 67372 - }, - openSlide : { - mpp_y: .25 - } - }; - let result = determineIfSlideTooLargeForGrid(metadata, 500); - expect(result).toEqual(false); - }) - -}); - describe('getNextLetterInAlphabet', () => { it('should return the next letter', () => { From a897102f20a52a67d0aaeebcd0d4146359f0ed96 Mon Sep 17 00:00:00 2001 From: abarkellumich Date: Mon, 27 Sep 2021 11:44:31 -0400 Subject: [PATCH 2/6] remove grid icon from list --- src/components/Slides/Menu/SlideList.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Slides/Menu/SlideList.js b/src/components/Slides/Menu/SlideList.js index 316fe5a..c09eb2a 100755 --- a/src/components/Slides/Menu/SlideList.js +++ b/src/components/Slides/Menu/SlideList.js @@ -51,9 +51,6 @@ class SlideList extends Component { {slide.slideName} - - - ); }, this)} From a7bff621cdff9ae9fa5722f5561a0069e71cecef Mon Sep 17 00:00:00 2001 From: abarkellumich <83091531+abarkellumich@users.noreply.github.com> Date: Thu, 28 Oct 2021 12:39:58 -0400 Subject: [PATCH 3/6] Revert "Kpmp 3106 remove slide size limit" --- package-lock.json | 12 +-- src/components/Slides/Menu/Menu.js | 4 +- src/components/Slides/Menu/SlideList.js | 106 ++++++++++----------- src/components/Slides/SlideViewer.js | 19 +++- src/components/Slides/slideHelpers.test.js | 32 +++++++ 5 files changed, 105 insertions(+), 68 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4fca381..5f4be1b 100755 --- a/package-lock.json +++ b/package-lock.json @@ -3809,8 +3809,7 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "resolved": "", "dev": true } } @@ -16947,8 +16946,7 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "resolved": "", "dev": true } } @@ -18317,8 +18315,7 @@ }, "ua-parser-js": { "version": "0.7.19", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", - "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==" + "resolved": "" }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", @@ -19044,8 +19041,7 @@ }, "y18n": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", - "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", + "resolved": "", "dev": true }, "yallist": { diff --git a/src/components/Slides/Menu/Menu.js b/src/components/Slides/Menu/Menu.js index 7889b2c..663667b 100755 --- a/src/components/Slides/Menu/Menu.js +++ b/src/components/Slides/Menu/Menu.js @@ -27,6 +27,8 @@ class Menu extends Component { customCrossIcon={false} > +
    + + + +
+ ); - render() { - return ( - - ); - } + } } export default SlideList; diff --git a/src/components/Slides/SlideViewer.js b/src/components/Slides/SlideViewer.js index 8b4704a..6a4ec98 100755 --- a/src/components/Slides/SlideViewer.js +++ b/src/components/Slides/SlideViewer.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import OpenSeadragon from 'openseadragon'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPlus, faMinus, faCrosshairs } from '@fortawesome/free-solid-svg-icons'; -import { noSlidesFound, getNextLetterInAlphabet } from './slideHelpers'; +import { noSlidesFound, determineIfSlideTooLargeForGrid, determineIfPilotSlide, getNextLetterInAlphabet } from './slideHelpers'; import Menu from './Menu/Menu'; import PropTypes from 'prop-types'; import DivOverlays from './DivOverlays'; @@ -28,6 +28,8 @@ class SlideViewer extends Component { overlayLabel: [], renderLabels: true, labelSetId: 0, + slideTooLarge: false, + isPilotSlide: false, gridOverlay: [] } } @@ -59,12 +61,19 @@ class SlideViewer extends Component { return false; } + async renderOverlayLabels() { + + await this.setState({slideTooLarge: determineIfSlideTooLargeForGrid(this.props.selectedParticipant.selectedSlide.metadata, this.state.vertical), + isPilotSlide: determineIfPilotSlide(this.props.participants, this.props.selectedParticipant)}); + + if (!this.state.isPilotSlide && !this.state.slideTooLarge ) { const [gridOverlay, overlayLabel] = await this.getGridOverlay( // eslint-disable-line this.props.selectedParticipant.selectedSlide.metadata, this.state.labelSetId + 1); await this.setState({ overlayLabel, gridOverlay, renderLabels: false, labelSetId: this.state.labelSetId + 1 }) await this.setState({ renderLabels: true }) + } } getNextLetterInAlphabet(currentLetter = '') { @@ -153,7 +162,7 @@ class SlideViewer extends Component { } handleShowGridToggle() { - if (this.state.showGrid) { + if (this.state.showGrid || this.state.slideTooLarge || this.state.isPilotSlide) { this.setState({ showGrid: false, showGridLabel: false }) } else { this.setState({ showGrid: true }) @@ -193,6 +202,8 @@ class SlideViewer extends Component { handleCancelGridPropertiesClick={this.handleCancelGridPropertiesClick} showGrid={this.state.showGrid} showGridLabel={this.state.showGridLabel} + slideTooLarge={this.state.slideTooLarge} + isPilotSlide={this.state.isPilotSlide} handleSetGridPropertiesClick={this.handleSetGridPropertiesClick} vertical={this.state.vertical} horizontal={this.state.horizontal} @@ -201,7 +212,7 @@ class SlideViewer extends Component { selectedParticipant={this.props.selectedParticipant} />
{ this.el = node; }}> -
+
    • @@ -221,4 +232,4 @@ SlideViewer.propTypes = { selectedParticipant: PropTypes.object.isRequired, }; -export default SlideViewer; +export default SlideViewer; \ No newline at end of file diff --git a/src/components/Slides/slideHelpers.test.js b/src/components/Slides/slideHelpers.test.js index e09ff54..2e4814a 100755 --- a/src/components/Slides/slideHelpers.test.js +++ b/src/components/Slides/slideHelpers.test.js @@ -198,6 +198,38 @@ describe('getStainImageName', () => { }); }); +describe('determineIfSlideTooLargeForGrid', () => { + + it('should return true for large images', () => { + let metadata = { + aperio : { + originalWidth: 164592, + originalHeight: 67372 + }, + openSlide : { + mpp_y: .25 + } + }; + let result = determineIfSlideTooLargeForGrid(metadata, 500); + expect(result).toEqual(true) + }); + + it('should return false for small enough images', () => { + let metadata = { + aperio : { + originalWidth: 44592, + originalHeight: 67372 + }, + openSlide : { + mpp_y: .25 + } + }; + let result = determineIfSlideTooLargeForGrid(metadata, 500); + expect(result).toEqual(false); + }) + +}); + describe('getNextLetterInAlphabet', () => { it('should return the next letter', () => { From 230bf0974fd7770d637409c652a776fab65068ba Mon Sep 17 00:00:00 2001 From: abarkellumich <83091531+abarkellumich@users.noreply.github.com> Date: Thu, 28 Oct 2021 12:49:07 -0400 Subject: [PATCH 4/6] up slide grid limit --- src/components/Slides/slideHelpers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Slides/slideHelpers.js b/src/components/Slides/slideHelpers.js index 1eac4c4..8477e77 100755 --- a/src/components/Slides/slideHelpers.js +++ b/src/components/Slides/slideHelpers.js @@ -105,7 +105,7 @@ export const determineIfSlideTooLargeForGrid = (metadata, verticalGridSize = 500 let innerLoopCount = (width - (vertical * 4)) / vertical; let numberOfLabels = Math.ceil(outerLoopCount) * Math.ceil(innerLoopCount); - if (numberOfLabels > 620) { + if (numberOfLabels > 775) { return true; } else { return false; @@ -194,4 +194,4 @@ export const getGridOverlay = (metadata, labelSetId, verticalSize, horizontalSiz console.error('Metadata not provided with slide') } return [overlay, overlayLabel]; -} \ No newline at end of file +} From c90e937a20efe6b91b416521f1ad2f39bd220287 Mon Sep 17 00:00:00 2001 From: rlreamy <34109594+rlreamy@users.noreply.github.com> Date: Fri, 29 Oct 2021 12:57:17 -0400 Subject: [PATCH 5/6] Setting up build on github --- .github/workflows/node.js.yml | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .github/workflows/node.js.yml diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..fcb02a2 --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,31 @@ +# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +name: Node.js CI + +on: + push: + branches: [ develop ] + pull_request: + branches: [ develop ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [12.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run build --if-present + - run: npm test From 03609a27747807b7beddef3b3cd3cb58c56c6848 Mon Sep 17 00:00:00 2001 From: rlreamy <34109594+rlreamy@users.noreply.github.com> Date: Fri, 29 Oct 2021 14:10:44 -0400 Subject: [PATCH 6/6] Add github build status badge --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index e4c53a8..d87fb85 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -[![Codacy Badge](https://api.codacy.com/project/badge/Grade/76fbecb57cb6451ab4df40afe4c444f0)](https://www.codacy.com/manual/rlreamy/delphinus-web?utm_source=github.com&utm_medium=referral&utm_content=KPMP/delphinus-web&utm_campaign=Badge_Grade) -[![Build Status](https://travis-ci.org/KPMP/delphinus-web.svg?branch=develop)](https://travis-ci.org/KPMP/delphinus-web) +[![Node.js CI](https://github.com/KPMP/delphinus-web/actions/workflows/node.js.yml/badge.svg)](https://github.com/KPMP/delphinus-web/actions/workflows/node.js.yml) # delphinus-web This project is the web front-end for the Digital Pathology Repository for the Kidney Precision Medicine Project.