Skip to content

LIMS-1683: Show buttons for next/previous container on plate view #1069

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

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

LIMS-1683: Show buttons for next/previous container on plate view #1069

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
8f17e9e
LIMS-1683: Show buttons for next/previous container on plate view
May 8, 2026
fe7bac8
LIMS-1683: Apply suggestions
May 11, 2026
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
6 changes: 5 additions & 1 deletion api/src/Page/Shipment.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2531,8 +2531,12 @@ function _get_all_containers()
'MANUAL' => 'queuedmanualsubsamples', 'AUTO' => 'queuedautosubsamples',
);
$dir = $this->has_arg('order') ? ($this->arg('order') == 'asc' ? 'ASC' : 'DESC') : 'ASC';
if (array_key_exists($this->arg('sort_by'), $cols))
if (array_key_exists($this->arg('sort_by'), $cols)) {
$order = $cols[$this->arg('sort_by')] . ' ' . $dir;
if ($this->arg('sort_by') == 'NAME') {
$order .= ', c.containerid ' . $dir;
}
}
}
// $this->db->set_debug(True);
$rows = $this->db->paginate("SELECT $select
Expand Down
78 changes: 78 additions & 0 deletions client/src/css/partials/_utility.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,3 +316,81 @@ ul.ui-autocomplete {
.toggle-input:checked::before {
transform: translateX(18px);
}

.flat-button {
text-align: center;
vertical-align: middle;
cursor: pointer;
box-sizing: content-box;
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
&:disabled, &.disabled {
opacity: 0.5;
cursor: auto;
}
&.primary {
@apply tw-bg-blue-500 tw-text-white;
&:hover, &:focus {
@apply tw-bg-blue-700;
}
}
&.secondary {
@apply tw-bg-gray-400 tw-text-black;
&:hover, &:focus {
@apply tw-bg-gray-600 tw-text-white;
}
}
&.success {
@apply tw-bg-green-500 tw-text-white;
&:hover, &:focus {
@apply tw-bg-green-700;
}
}
&.info {
/* Cyan would be usual for info, but Tailwind has no such thing */
@apply tw-bg-pink-500 tw-text-black;
&:hover, &:focus {
@apply tw-bg-pink-700;
}
}
&.warning {
@apply tw-bg-yellow-300 tw-text-black;
&:hover, &:focus {
@apply tw-bg-yellow-500;
}
}
&.danger {
@apply tw-bg-red-500 tw-text-white;
&:hover, &:focus {
@apply tw-bg-red-700;
}
}
}

.btn-group {
@apply tw-px-4;
@apply tw-py-2;
@apply tw-flex;
@apply tw-flex-row;
@apply tw-gap-2;
@apply tw-items-center;
@apply tw-border;
@apply tw-rounded;
}

.header-row {
@apply tw-px-4;
@apply tw-pl-0;
@apply tw-py-2;
@apply tw-mb-4;
@apply tw-flex;
@apply tw-flex-row;
@apply tw-gap-2;
@apply tw-items-center;
border-bottom: 1px solid grey;

h1 {
padding: 0 !important;
@apply tw-flex-grow;
}
}
52 changes: 0 additions & 52 deletions client/src/js/app/components/flat-button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,55 +25,3 @@ export default {
},
}
</script>

<style lang="scss" scoped>
.flat-button {
text-align: center;
vertical-align: middle;
cursor: pointer;
box-sizing: content-box;
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
&:disabled, &.disabled {
opacity: 0.5;
cursor: auto;
}
&.primary {
@apply tw-bg-blue-500 tw-text-white;
&:hover, &:focus {
@apply tw-bg-blue-700;
}
}
&.secondary {
@apply tw-bg-gray-400 tw-text-black;
&:hover, &:focus {
@apply tw-bg-gray-600 tw-text-white;
}
}
&.success {
@apply tw-bg-green-500 tw-text-white;
&:hover, &:focus {
@apply tw-bg-green-700;
}
}
&.info {
/* Cyan would be usual for info, but Tailwind has no such thing */
@apply tw-bg-pink-500 tw-text-black;
&:hover, &:focus {
@apply tw-bg-pink-700;
}
}
&.warning {
@apply tw-bg-yellow-300 tw-text-black;
&:hover, &:focus {
@apply tw-bg-yellow-500;
}
}
&.danger {
@apply tw-bg-red-500 tw-text-white;
&:hover, &:focus {
@apply tw-bg-red-700
}
}
}
</style>
19 changes: 0 additions & 19 deletions client/src/js/app/components/page-title-header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,22 +48,3 @@ export default {
},
};
</script>

<style scoped>
h1 {
padding: 0;
@apply tw-flex-grow
}

.header-row {
@apply tw-px-4;
@apply tw-pl-0;
@apply tw-py-2;
@apply tw-mb-4;
@apply tw-flex;
@apply tw-flex-row;
@apply tw-gap-2;
@apply tw-items-center;
border-bottom: 1px solid grey;
}
</style>
13 changes: 0 additions & 13 deletions client/src/js/app/components/prev-next-btngroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,16 +80,3 @@ export default {
},
};
</script>

<style scoped>
.btn-group {
@apply tw-px-4;
@apply tw-py-2;
@apply tw-flex;
@apply tw-flex-row;
@apply tw-gap-2;
@apply tw-items-center;
@apply tw-border;
@apply tw-rounded;
}
</style>
58 changes: 58 additions & 0 deletions client/src/js/modules/shipment/views/containerplate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ define(['marionette',
'collections/samples',
'collections/subsamples',
'collections/ligands',
'collections/containers',

'modules/shipment/collections/containerhistory',

Expand Down Expand Up @@ -57,6 +58,7 @@ define(['marionette',
Samples,
Subsamples,
Ligands,
Containers,

ContainerHistory,

Expand Down Expand Up @@ -273,6 +275,10 @@ define(['marionette',
schemaspan: '.schemaspan',
class: 'select[name=class]',
heatmap: '.heatmap-canvas',

currentIdx: '.currentIdx',
prev: '.prev',
next: '.next',
},

events: {
Expand Down Expand Up @@ -308,6 +314,8 @@ define(['marionette',
'change @ui.class': 'setAutoStatus',

'change @ui.schema': 'selectSchema',
'click @ui.prev': 'goToPrevContainer',
'click @ui.next': 'goToNextContainer',
},

modelEvents: {
Expand Down Expand Up @@ -686,6 +694,8 @@ define(['marionette',
initialize: function(options) {
this.isPlaying = false
this.playthread = null
this.nextContainer = null;
this.prevContainer = null;

this.samples = new Samples(null, { state: {pageSize: 9999} })
this.samples.queryParams.cid = options.model.get('CONTAINERID')
Expand Down Expand Up @@ -746,13 +756,61 @@ define(['marionette',
this.touchstartX = 0;
this.touchstartY = 0;

this.siblingContainers = new Containers(null, { state: { pageSize: 9999 }})
this.siblingContainers.setSorting('NAME')
this.siblingContainers.dewarID = this.model.get('DEWARID')
this.siblingContainers.fetch().done(this.updateSiblingContainers.bind(this))

Backbone.Validation.bind(this)
},

updatePipelines: function() {
this.ui.pipeline.html('<option value="">All pipelines</option>'+this.processing_pipelines.opts())
},

updateSiblingContainers: function() {
let foundCurrent = false;
this.siblingContainers.each((container, index) => {
let idx = index+1
if (foundCurrent && !this.nextContainer) {
Copy link
Copy Markdown
Collaborator

@gfrn gfrn May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this come after foundCurrent is set? (line 779)

As it currently is, it might just not reflect the actual condition because it is evaluated before the containerId check is executed

Copy link
Copy Markdown
Collaborator Author

@ndg63276 ndg63276 May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, this is deliberate. You are looping through all the containers (in order), so you need to have already found the currently-displayed one, (and not yet set the 'next' one), in order to set this container as the 'next' one.

Copy link
Copy Markdown
Collaborator

@gfrn gfrn May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that makes sense, I'll approve it now, thanks for having a look!

this.nextContainer = container;
}
if (container.get('CONTAINERID') === this.model.get('CONTAINERID')) {
foundCurrent = true;
this.ui.currentIdx.html(idx + " of " + this.siblingContainers.length)
if (idx === this.siblingContainers.length) {
this.ui.next.removeClass('primary').addClass('disabled')
}
if (idx === 1) {
this.ui.prev.removeClass('primary').addClass('disabled')
}
}
if (!foundCurrent) {
this.prevContainer = container;
}
})
if (this.prevContainer) {
this.ui.prev.attr('title', this.prevContainer.get('NAME'))
}
if (this.nextContainer) {
this.ui.next.attr('title', this.nextContainer.get('NAME'))
}
},

goToPrevContainer: function() {
if (this.prevContainer) {
const cid = this.prevContainer.get('CONTAINERID')
app.trigger('container:show', cid)
}
},

goToNextContainer: function() {
if (this.nextContainer) {
const cid = this.nextContainer.get('CONTAINERID')
app.trigger('container:show', cid)
}
},

updateSchemas: function() {
if (this.autoscoreschemas.length === 1) {
this.ui.schemaspan.html(this.autoscoreschemas.at(0).get('SCHEMANAME'))
Expand Down
52 changes: 4 additions & 48 deletions client/src/js/modules/types/mx/shipment/views/mx-container-view.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,11 +375,9 @@ export default {
sampleLocation: 0,

containers: [],
containersCollection: null,
shipments: [],
shipmentsCollection: null,
dewars: [],
dewarsCollection: null,
selectedDewarId: null,
selectedShipmentId: null,
shippingSafetyLevel: null,
Expand All @@ -393,7 +391,6 @@ export default {
prevNextTargetLinks() {
return _.chain(this.siblingContainers)
.map(sib => ({ value: sib.CONTAINERID, text: sib.NAME }))
.sortBy((c) => c.text)
.value();
},
},
Expand Down Expand Up @@ -591,44 +588,12 @@ export default {
* Also tracks the index of the current Container
*/
async fetchSiblingContainers() {
var result;

if (this.containersCollection?.length>0) {
// ! if ContainersCollection exists then filter it instead rather than re-fetching.
// !! WARNING - THis assumes that containersCollection has ALL containers of the dewar
result = _.filter(this.containersCollection, (c) =>
c.DEWARID === this.container.DEWARID
);

} else {
result = new Containers();
result.dewarID = this.container.DEWARID;
await result.fetch();
}

let result = new Containers(null, { state: { pageSize: 9999 } });
result.setSorting('NAME');
result.dewarID = this.container.DEWARID;
await result.fetch();
this.siblingContainers = result.toJSON();
},

async fetchContainers() {
this.containersCollection = new Containers(null, { state: { pageSize: 9999 } })
this.containersCollection.queryParams.did = this.containersSamplesGroupData.dewarId

const result = await this.$store.dispatch('getCollection', this.containersCollection)
this.containers = result.toJSON().map(container => ({
value: container.CONTAINERID,
text: container.NAME
}))
},
async fetchDewars() {
this.dewarsCollection = new Dewars(null, { state: { pageSize: 9999 } })
this.dewarsCollection.queryParams.sid = this.containersSamplesGroupData.shipmentId

const result = await this.$store.dispatch('getCollection', this.dewarsCollection)
this.dewars = result.toJSON().map(dewar => ({
value: dewar.DEWARID,
text: dewar.CODE
}))
},
async fetchShipments() {
this.shipmentsCollection = new Shipments(null, { state: { pageSize: 9999 } })

Expand All @@ -638,15 +603,6 @@ export default {
text: shipment.SHIPPINGNAME
}))
},
async updateContainerSampleGroupsData(newData) {
if (newData.shipmentId !== null) {
await this.fetchDewars()
}

if (newData.dewarId !== null) {
await this.fetchContainers()
}
},
async onUpdateSamples() {
this.disableUpdateSamples = true
const containerId = this.containerId
Expand Down
9 changes: 8 additions & 1 deletion client/src/js/templates/shipment/containerplate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
<h1>Container: <span class="NAME"><%-NAME%></span></h1>
<div class="content header-row">
<h1 class="nou">Container <span class="NAME"><%-NAME%></span></h1>
<div class="btn-group">
<button class="flat-button primary prev">Prev Container</button>
<span class="currentIdx">0 of 0</span>
<button class="flat-button primary next">Next Container</button>
</div>
</div>

<a name="top"></a>
<p class="help">This page shows the contents of the selected container. Samples can be added and edited by clicking the pencil icon, and removed by clicking the x</p>
Expand Down
Loading
Loading