Skip to content

Commit

Permalink
LIMS-95: Show max score for each drop in a plate (#621)
Browse files Browse the repository at this point in the history 
* LIMS-95: Show max score for each drop in a plate

* Update UI to use radio buttons

* Update label

---------

Co-authored-by: Mark Williams <[email protected]>
Co-authored-by: John Holt <[email protected]>
  • Loading branch information
@ndg63276
3 people authored Oct 16, 2023
1 parent b8aeda5 commit fc4295e
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 48 deletions.
13 changes: 10 additions & 3 deletions api/src/Page/Imaging.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -557,7 +557,7 @@ function _add_adhoc_inspection()



# Get a list of sample images avaialble for an inspection
# Get a list of sample images available for an inspection
function _get_inspection_images()
{
$where = '';
Expand All @@ -578,8 +578,7 @@ function _get_inspection_images()
array_push($args, $this->arg('sid'));
}


$images = $this->db->pq("SELECT i.containerid, si.containerinspectionid, ROUND(TIMESTAMPDIFF('HOUR', min(i2.bltimestamp), i.bltimestamp)/24,1) as delta, si.blsampleimageid, si.blsampleid, si.micronsperpixelx, si.micronsperpixely, si.blsampleimagescoreid, si.comments, TO_CHAR(si.bltimestamp, 'DD-MM-YYYY HH24:MI') as bltimestamp, sc.name as scorename, sc.score, sc.colour as scorecolour
$images = $this->db->pq("SELECT i.containerid, si.containerinspectionid, ROUND(TIMESTAMPDIFF('HOUR', min(i2.bltimestamp), i.bltimestamp)/24,1) as delta, si.blsampleimageid, si.blsampleid, si.micronsperpixelx, si.micronsperpixely, si.blsampleimagescoreid, si.comments, TO_CHAR(si.bltimestamp, 'DD-MM-YYYY HH24:MI') as bltimestamp, sc.name as scorename, sc.score, sc.colour as scorecolour, max.maxscore, scorecolours.colour as maxscorecolour
FROM blsampleimage si
LEFT OUTER JOIN blsampleimagescore sc ON sc.blsampleimagescoreid = si.blsampleimagescoreid
INNER JOIN containerinspection i ON i.containerinspectionid = si.containerinspectionid
Expand All @@ -589,6 +588,14 @@ function _get_inspection_images()
INNER JOIN dewar d ON d.dewarid = c.dewarid
INNER JOIN shipping s ON s.shippingid = d.shippingid
INNER JOIN proposal p ON p.proposalid = s.proposalid
LEFT OUTER JOIN (SELECT blsampleid, max(score) as maxscore
FROM BLSampleImageScore sc
INNER JOIN BLSampleImage si ON sc.blsampleimagescoreid = si.blsampleimagescoreid
INNER JOIN ContainerInspection i ON i.containerinspectionid = si.containerinspectionid
GROUP BY blSampleid) as max ON max.blsampleid = si.blsampleid
LEFT OUTER JOIN (SELECT score, colour FROM BLSampleImageScore) as scorecolours ON scorecolours.score = max.maxscore
WHERE p.proposalid = :1 $where
GROUP BY i.containerid, si.containerinspectionid, i.bltimestamp, si.blsampleimageid, si.blsampleid, si.micronsperpixelx, si.micronsperpixely, si.blsampleimagescoreid, si.comments, TO_CHAR(si.bltimestamp, 'DD-MM-YYYY HH24:MI'), sc.name, sc.score, sc.colour
ORDER BY i.bltimestamp", $args);
Expand Down
12 changes: 12 additions & 0 deletions client/src/css/partials/_utility.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,18 @@
text-align: right;
}

.flex {
display: flex;
}

.flex_take_space {
flex: 1 1 auto
}

.flex_dont_change {
flex: 0 0 auto
}

/* TODO: If we can ever get rid of this class, we can also remove the
work-around in plotly support which needs to circumvent it */
.active {
Expand Down
5 changes: 4 additions & 1 deletion client/src/js/modules/imaging/views/imageviewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,9 @@ define(['marionette',
var sc = this.scores.findWhere({ BLSAMPLEIMAGESCOREID: this.ui.score.val() })
this.model.set('BLSAMPLEIMAGESCOREID', this.ui.score.val())
this.model.set('SCORECOLOUR', sc.get('COLOUR'))
if (sc.get('SCORE') > this.model.get('MAXSCORE')) {
this.model.set('MAXSCORECOLOUR', sc.get('COLOUR'))
}
this.model.save({ BLSAMPLEIMAGESCOREID: this.ui.score.val() }, { patch: true })
this.trigger('image:scored')
},
Expand Down Expand Up @@ -1188,4 +1191,4 @@ define(['marionette',
})


})
})
55 changes: 32 additions & 23 deletions client/src/js/modules/shipment/views/containerplate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,12 +255,14 @@ define(['marionette',
ret: 'div.return',
adh: 'span.adhoc',
que: 'div.queue',
ss: 'input[name=sample_status]',
sampleStatusData: 'input[id=sample_status_data]',
sampleStatusMax: 'input[id=sample_status_max]',

sampleStatusCurrent: 'input[id=sample_status_current]',
param: 'select[name=param]',
rank: 'input[name=rank]',

auto: 'input[name=auto]',
sampleStatusAuto: 'input[id=sample_status_auto]',
schema: 'select[name=schema]',
class: 'select[name=class]',
},
Expand All @@ -280,12 +282,14 @@ define(['marionette',

'click a.adhoc': 'requestAdhoc',
'click a.return': 'requestReturn',
'change @ui.ss': 'toggleSampleStatus',
'change @ui.sampleStatusData': 'setSampleStatusShown',
'change @ui.sampleStatusMax': 'setSampleStatusShown',
'change @ui.sampleStatusCurrent': 'setSampleStatusShown',

'click @ui.rank': 'setRankStatus',
'change @ui.param': 'setRankStatus',
'change @ui.param': 'setParamValue',

'click @ui.auto': 'setAutoStatus',
'click @ui.sampleStatusAuto': 'setSampleStatusShown',
'change @ui.class': 'setAutoStatus',

'change @ui.schema': 'selectSchema',
Expand All @@ -295,15 +299,19 @@ define(['marionette',
'change:QUEUED': 'updatedQueued',
},

toggleSampleStatus: function() {
this.ui.auto.prop('checked', false)
this.plateView.setAutoStatus(false)
this.plateView.setShowSampleStatus(this.ui.ss.is(':checked'))
},
setSampleStatusShown: function() {

const showCurrentScore = this.ui.sampleStatusCurrent.is(':checked')
const showMaxScore = this.ui.sampleStatusMax.is(':checked')
const showDataStatus = this.ui.sampleStatusData.is(':checked')
const showAutoScore = this.ui.sampleStatusAuto.is(':checked')
this.plateView.setShowSampleStatus(showDataStatus, showCurrentScore || showAutoScore, showMaxScore)
this.plateView.setAutoStatus(showAutoScore && this.ui.class.val())

setRankStatus: function() {
// set ranked options
var opt = this.ui.param.find('option:selected')
var options = this.ui.rank.is(':checked') ? {
const is_rank_by = this.ui.rank.is(':checked')
var options = is_rank_by ? {
value: opt.attr('value'),
min: opt.data('min'),
check: opt.data('check'),
Expand All @@ -313,22 +321,23 @@ define(['marionette',
this.plateView.setRankStatus(options)
this.image.setRankStatus(options)

},

setParamValue: function() {
this.ui.rank.prop('checked', true)
this.setRankStatus()
},

setRankStatus: function() {
if (this.ui.rank.is(':checked')) {
if (!this.ui.ss.is(':checked')) {
this.ui.ss.prop('checked', true)
this.toggleSampleStatus()
}
this.ui.sampleStatusData.prop('checked', true)
}
this.setSampleStatusShown()
},

setAutoStatus: function() {
this.ui.ss.prop('checked', false)
this.ui.rank.prop('checked', false)
this.plateView.setShowSampleStatus(false)

var enabled = this.ui.auto.is(':checked')
console.log('setAutoStatus', enabled, this.ui.class.val(), enabled && this.ui.class.val())
this.plateView.setAutoStatus(enabled && this.ui.class.val())
this.ui.sampleStatusAuto.prop('checked', true)
this.setSampleStatusShown()
},

updateAdhoc: function() {
Expand Down
22 changes: 17 additions & 5 deletions client/src/js/modules/shipment/views/plate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
this.hover = {}
this.showImageStatus = this.getOption('showImageStatus')
this.showSampleStatus = this.getOption('showSampleStatus')
this.showMaxScore = false

Backbone.Validation.bind(this, {
collection: this.collection
Expand All @@ -61,9 +62,10 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
this.autoscores = scores
},

setShowSampleStatus: function(status) {
this.showSampleStatus = status
this.showImageStatus = !status
setShowSampleStatus: function(sampleStatus, imageStatus, showMaxScore) {
this.showSampleStatus = sampleStatus
this.showImageStatus = imageStatus
this.showMaxScore = showMaxScore
this.drawPlate()
},

Expand Down Expand Up @@ -191,7 +193,7 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
var sampleid = i*this.pt.dropTotal()+did+1
var sample = this.collection.findWhere({ LOCATION: sampleid.toString() })

if (sample && this.showImageStatus && this.inspectionimages) var im = this.inspectionimages.findWhere({ BLSAMPLEID: sample.get('BLSAMPLEID') })
if (sample && (this.showImageStatus || this.showMaxScore) && this.inspectionimages) var im = this.inspectionimages.findWhere({ BLSAMPLEID: sample.get('BLSAMPLEID') })
else var im = null

this.ctx.beginPath()
Expand Down Expand Up @@ -280,7 +282,17 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
this.ctx.fill()
}
}
}

// Show max image score
if (sample && this.showMaxScore) {
if (im) {
var isc = im.get('MAXSCORECOLOUR')
if (isc){
this.ctx.fillStyle = isc
this.ctx.fill()
}
}
}

// Auto image scores
Expand Down Expand Up @@ -338,4 +350,4 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari

})

})
})
56 changes: 40 additions & 16 deletions client/src/js/templates/shipment/containerplateimage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,47 @@ <h1 class="no_mobile">Container: <span class="NAME"><%-NAME%></span></h1>
<div class="img right"></div>
<div class="left">
<div class="plate"></div>
<div class="ra">
<span class="label">Show Data Status</span> <input type="checkbox" name="sample_status" />
<label>
Rank By
<input type="checkbox" name="rank" />
</label>:
<select name="param">
<option value="DCRESOLUTION" data-inverted="1" data-check="DC">AP Resolution</option>
<option value="DCCOMPLETENESS" data-check="DC" data-min="0.85">AP Completeness</option>
</select>

<div>
<span class="label">Show Auto Scores</span> <input type="checkbox" name="auto" />
<select name="schema"></select>
Class: <select name="class"></select>
<div class="flex">
<div class="flex_take_space"></div>
<div class="la flex_dont_change">
Status Shows
<div>
<label>
<input type="radio" value="sample_status_current" name="sample_status" id="sample_status_current" checked="checked" />
Current Score
</label>
</div>
<div>
<label>
<input type="radio" value="sample_status_max" name="sample_status" id="sample_status_max"/>
Max Scores
</label>
</div>
<div>
<label>
<input type="radio" value="sample_status_data" name="sample_status" id="sample_status_data"/>
Data Status
</label>
<label>
Rank By
<input type="checkbox" name="rank" />
</label>:
<select name="param">
<option value="DCRESOLUTION" data-inverted="1" data-check="DC">AP Resolution</option>
<option value="DCCOMPLETENESS" data-check="DC" data-min="0.85">AP Completeness</option>
</select>
</div>
<div>
<label>
<input type="radio" value="sample_status_auto" name="sample_status" id="sample_status_auto"/>
CHIMP Auto Scores
</label>
<!--There is only ever one option in schema but it was too hard to remove the code see ticket LIMS-1064 -->
<select name="schema" style="display:none"></select>
Class: <select name="class"></select>
</div>
<div class="sta small"></div>
</div>
<div class="sta small"></div>
</div>
<div class="form">
<!-- Added a couple of tailwind / css style tweaks to align buttons with input height and make spinner readable -->
Expand Down

0 comments on commit fc4295e

Please sign in to comment.