Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LIMS-128: Add plate view to queue page #839

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

LIMS-128: Add plate view to queue page #839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e5e7006
LIMS-128: Add plate view to queue page
Sep 25, 2024
7eb49e8
Merge branch 'master' into improvement/LIMS-128/add-plate-view-to-que…
ndg63276 Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion api/src/Page/Imaging.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -610,7 +610,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, max.maxscore, scorecolours.colour as maxscorecolour
$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, b.location
FROM blsampleimage si
LEFT OUTER JOIN blsampleimagescore sc ON sc.blsampleimagescoreid = si.blsampleimagescoreid
INNER JOIN containerinspection i ON i.containerinspectionid = si.containerinspectionid
Expand All @@ -620,6 +620,7 @@ 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
INNER JOIN blsample b ON b.blsampleid = si.blsampleid

LEFT OUTER JOIN (SELECT blsampleid, max(score) as maxscore
FROM BLSampleImageScore sc
Expand Down
16 changes: 16 additions & 0 deletions api/src/Page/Sample.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -634,6 +634,22 @@ function _sub_samples()
$third_inner_select_where = '';
$args = array($this->proposalid);

if ($this->has_arg('s')) {
$st = sizeof($args) + 1;
$where .= " AND s.name LIKE CONCAT('%',:" . $st . ",'%')";
array_push($args, $this->arg('s'));
}

if ($this->has_arg('filter')) {
$filters = array(
'manual' => " AND ss.source='manual'",
'auto' => " AND ss.source='auto'",
'point' => " AND dp.experimentkind='SAD'",
'region' => " AND dp.experimentkind='MESH'",
);
$where .= $filters[$this->arg('filter')];
}

if ($this->has_arg('sid')) {
$where .= ' AND s.blsampleid=:' . (sizeof($args) + 1);
$first_inner_select_where .= ' AND s.blsampleid=:' . (sizeof($args) + 2);
Expand Down
4 changes: 4 additions & 0 deletions client/src/css/partials/_imaging.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,3 +226,7 @@ input[name=gap] {
text-align: center;
box-sizing: content-box;
}

.plate-max-width {
max-width: 700px;
}
94 changes: 44 additions & 50 deletions client/src/js/modules/imaging/views/queuecontainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ define(['marionette',

'modules/imaging/models/plan',
'modules/imaging/collections/plans',
'modules/shipment/views/plate',

'collections/beamlinesetups',

Expand All @@ -27,6 +28,7 @@ define(['marionette',
SubSamples,
TableView, table, FilterView, utils,
DiffractionPlan, DiffractionPlans,
PlateView,
BeamlineSetups,
template, pointemplate, gridtemplate, xfetemplate,
VMXiPoint, VMXiGrid, VMXiXFE,
Expand Down Expand Up @@ -360,53 +362,6 @@ define(['marionette',
{id: 'manual', name: 'Manual' },
],

initialize: function(options) {
ClientFilterView.__super__.initialize.call(this, options)

this.filterablecollection = options.collection.fullCollection// || options.collection
this.shadowCollection = this.filterablecollection.clone()

this.listenTo(this.filterablecollection, 'add', function (model, collection, options) {
this.shadowCollection.add(model, options)
})
this.listenTo(this.filterablecollection, 'remove', function (model, collection, options) {
this.shadowCollection.remove(model, options)
})
this.listenTo(this.filterablecollection, 'sort', function (col) {
if (!this.query()) this.shadowCollection.reset(col.models)
})
this.listenTo(this.filterablecollection, 'reset', function (col, options) {
options = _.extend({reindex: true}, options || {})
if (options.reindex && options.from == null && options.to == null) {
this.shadowCollection.reset(col.models)
if (this.selected()) this._filter()
}
})
},

_filter: function() {
var id = this.selected()
this.trigger('selected:change', id, this.selectedName())
if (id) {
this.filterablecollection.reset(this.shadowCollection.filter(function(m) {
if (id === 'region') {
return m.get('X2') && m.get('Y2')

} else if (id === 'point') {
return m.get('X') && m.get('Y') && !m.get('X2')
}
else if (id === 'auto') {
return m.get('SOURCE') == 'auto'

} else if (id === 'manual') {
return m.get('SOURCE') == 'manual'
}
}), {reindex: false})
} else {
console.log('reset', this.shadowCollection)
this.filterablecollection.reset(this.shadowCollection.models, {reindex: false})
}
}
})


Expand Down Expand Up @@ -517,6 +472,7 @@ define(['marionette',
qfilt: '.qfilt',
afilt: '.afilt',
rimg: '.image',
plate: '.plate',
},

events: {
Expand Down Expand Up @@ -772,11 +728,20 @@ define(['marionette',
return this.ui.notcompleted.is(':checked') ? 1 : null
},

getSearch: function() {
return this.table.filter.query() || null
},

getFilter: function() {
return this.afilt.$el.find('.current').attr('id') || null
},

refreshSubSamples: function() {
this.subsamples.fetch()
},

initialize: function() {
initialize: function(options) {
this.params = options.params
this._lastSample = null
this._subsamples_ready = []

Expand All @@ -786,8 +751,9 @@ define(['marionette',
this.unfilteredSubsamples = null
this.subsamples = new SubSamples()
this.subsamples.queryParams.cid = this.model.get('CONTAINERID')
this.subsamples.state.pageSize = 10
if (this.params.s) this.subsamples.queryParams.s = this.params.s

this.subsamples.state.pageSize = 10
this._subsamples_ready.push(this.subsamples.fetch())

this.inspections = new ContainerInspections()
Expand Down Expand Up @@ -841,6 +807,12 @@ define(['marionette',
}
},

onSubsamplesReady: function() {
this.getInspectionImages()
this.refreshQSubSamples()
this.listenTo(this.subsamples, 'change:isSelected', this.selectSubSample, this)
this.listenTo(this.subsamples, 'sync add remove change:READYFORQUEUE', this.refreshQSubSamples, this)
},

populatePresets: function() {
this.ui.preset.html(this.plans.opts())
Expand Down Expand Up @@ -877,7 +849,7 @@ define(['marionette',
},

selectSample: function() {
this.subsamples.at(0).set({ isSelected: true })
if (this.subsamples.at(0)) this.subsamples.at(0).set({ isSelected: true })
},

refreshQSubSamples: function() {
Expand All @@ -901,6 +873,8 @@ define(['marionette',
this.ui.unqueuebutton.hide()
this.subsamples.queryParams.nodata = this.getNoData.bind(this)
this.subsamples.queryParams.notcompleted = this.getNotCompleted.bind(this)
this.subsamples.queryParams.s = this.getSearch.bind(this)
this.subsamples.queryParams.filter = this.getFilter.bind(this)
this._ready.done(this.doOnRender.bind(this))
},

Expand All @@ -926,6 +900,8 @@ define(['marionette',
collection: this.subsamples,
columns: subSamplesColumns,
tableClass: 'subsamples',
filter: 's',
search: this.params.s,
loading: true,
backgrid: { row: ClickableRow, emptyText: 'No sub samples found' },
noPageUrl: true,
Expand Down Expand Up @@ -991,11 +967,29 @@ define(['marionette',
})

this.qsmps.show(this.table2)

this.plateView = new PlateView({ collection: this.subsamples.fullCollection, type: this.type, inspectionimages: this.inspectionimages, showMaxScore: true })
this.listenTo(this.plateView, 'dropClicked', this.filterByLocation, this)
this.plate.show(this.plateView)
},

onShow: function() {
this.rimg.show(this.image)
},

filterByLocation: function(pos) {
if (!pos) return;
var namedrop = this.type.getName(pos)+'d'+this.type.getDrop(pos)
if (this.table.filter.query() === namedrop) {
this.table.filter.clearSearchBox()
} else {
this.table.filter.searchBox().val(namedrop)
}
this.table.filter._updateUrl()
this.subsamples.fetch().done(this.selectSample.bind(this))
var i = this.inspectionimages.findWhere({ LOCATION: pos.toString() })
this.image.setModel(i)
},

})

Expand Down
4 changes: 3 additions & 1 deletion client/src/js/modules/shipment/components/container-queue-wrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export default {
},
props: {
'cid': Number,
'search': String,
},
data: function() {
return {
Expand All @@ -59,6 +60,7 @@ export default {
options: function() {
return {
model: this.model,
params: { s: this.search }
}
},
proposalType : function() {
Expand Down Expand Up @@ -106,4 +108,4 @@ export default {
}

}
</script>
</script>
4 changes: 2 additions & 2 deletions client/src/js/modules/shipment/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ define(['utils/lazyrouter'], function(LazyRouter) {
'shipments/pickup/sid/:sid': 'rebook_pickup',

'containers/cid/:cid(/iid/:iid)(/sid/:sid)': 'view_container',
'containers/queue/:cid': 'queue_container',
'containers/queue/:cid(/s/:s)': 'queue_container',
'containers/add/did/:did': 'add_container',
'containers/add/visit/:visit': 'add_container_visit',
'containers(/s/:s)(/ty/:ty)(/page/:page)': 'container_list',
Expand Down Expand Up @@ -46,4 +46,4 @@ define(['utils/lazyrouter'], function(LazyRouter) {
// controller: c
rjsController: 'modules/shipment/controller',
})
})
})
5 changes: 3 additions & 2 deletions client/src/js/modules/shipment/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,11 +353,12 @@ const routes = [
}
},
{
path: '/containers/queue/:cid([0-9]+)',
path: '/containers/queue/:cid([0-9]+)(/s/)?:s([a-zA-Z0-9_-]+)?',
name: 'container-queue',
component: ContainerQueueWrapper,
props: route => ({
cid: +route.params.cid,
search: route.params.s || '',
}),
},
{
Expand Down Expand Up @@ -537,4 +538,4 @@ const routes = [
},
]

export default routes
export default routes
17 changes: 13 additions & 4 deletions client/src/js/modules/shipment/views/plate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,23 +29,26 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
e.preventDefault()
var pos = this._xy_to_drop(utils.get_xy(e,this.$el))
if (pos) {
this.lastClickedDrop = pos
var drop = this.collection.findWhere({ LOCATION: pos.toString() })

this.trigger('plate:select')
this.trigger('dropClicked', pos)
if (drop) drop.set('isSelected', true)
this.drawPlate()
}
},

initialize: function(options) {
this.pt = this.getOption('type')
this.lastClickedDrop = null
this.inspectionimages = options && options.inspectionimages
if (this.inspectionimages) this.listenTo(this.inspectionimages, 'sync', this.render, this)

this.hover = {}
this.showImageStatus = this.getOption('showImageStatus')
this.showSampleStatus = this.getOption('showSampleStatus')
this.showMaxScore = false
this.showMaxScore = this.getOption('showMaxScore')

Backbone.Validation.bind(this, {
collection: this.collection
Expand Down Expand Up @@ -187,7 +190,7 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
var did = (k*this.pt.get('drop_per_well_x'))+j
if (this.pt.get('well_drop') > -1) {
if (did == this.pt.get('well_drop')) continue
if (did > this.pt.get('well_drop')) did--;
if (did > this.pt.get('well_drop')) did--;
}

var sampleid = i*this.pt.dropTotal()+did+1
Expand All @@ -198,6 +201,7 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari

this.ctx.beginPath()
this.ctx.lineWidth = 1;

if (sample && sample.get('isSelected')) {
this.ctx.strokeStyle = 'cyan'

Expand All @@ -213,7 +217,12 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
} else this.ctx.strokeStyle = '#ddd'

this.ctx.rect(this.pt.get('drop_offset_x')+this.pt.get('offset_x')+row*(this.pt.get('well_width')+this.pt.get('well_pad'))+(j*this.pt.get('drop_widthpx')+this.pt.get('drop_pad')), this.pt.get('drop_offset_y')+this.pt.get('offset_y')+col*(this.pt.get('well_height')+this.pt.get('well_pad'))+(k*this.pt.get('drop_heightpx')+this.pt.get('drop_pad')), this.pt.get('drop_widthpx'), this.pt.get('drop_heightpx'))


// Highlight last clicked drop
if (sampleid == this.lastClickedDrop) {
this.ctx.fillStyle = '#dddddd'
this.ctx.fill()
}

// Highlight Hovered Sample
if (this.hover == sampleid) {
Expand All @@ -234,7 +243,7 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
this.ctx.fill()
}
}

// Show status
if (sample && this.showSampleStatus) {
if (this.rankOption) {
Expand Down
8 changes: 4 additions & 4 deletions client/src/js/templates/imaging/queuecontainer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h1>Prepare Container for Data Collection</h1>
<ul>
<li>
<span class="label">Container</span>
<span class="NAME"><%-NAME%></span>
<span class="NAME"><a href="/containers/cid/<%-CONTAINERID%>"><%-NAME%></a></span>
</li>

<li>
Expand All @@ -28,6 +28,8 @@ <h1>Prepare Container for Data Collection</h1>
</ul>
</div>

<div class="plate plate-max-width"></div>

<h2>Available Samples</h2>
<div class="filter">
<span class="r">
Expand All @@ -38,9 +40,7 @@ <h2>Available Samples</h2>
<li><label><input type="checkbox" name="nodata" /> Without Data</label></li>
<li><label><input type="checkbox" name="notcompleted" /> Not Completed</label></li>
</ul>
</div>
<div class="filter">
<div class="filter filter-nohide afilt"></div>
<span class="filter filter-nohide afilt"></span>
</div>
<div class="asamples"></div>
</div>
Expand Down
Loading
Loading