Skip to content

docs(stacker): Stacker instruction manual PR #18664

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.

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

Draft
wants to merge 7 commits into
base: edge
Choose a base branch
from
Draft

Conversation

jwwojak
Copy link
Contributor

@jwwojak jwwojak commented Jun 17, 2025

Committing Stacker instruction manual files.

Overview

This is the Stacker instruction manual.

Test Plan and Hands on Testing

Will review the text for the usual style, grammar, and the usual writing stuff. Also, check to make sure links work and images appear as expected. This doesn't have some of the recent CSS, but posting it up anyway to get started.

Changelog

No changes. This is new content.

Review requests

Nothing specific. Please review and comment.

Risk assessment

Low to medium as this is a new docs feature. Who knows what horrors may lurk within.

Committing Stacker instruction manual files.
Committing Stacker instruction manual files.
@ecormany ecormany force-pushed the docs-stacker-manual branch from b831393 to b38beb8 Compare June 18, 2025 17:41
Copy link

codecov bot commented Jun 18, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 56.91%. Comparing base (4b97d22) to head (7356731).
Report is 2 commits behind head on edge.

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             edge   #18664   +/-   ##
=======================================
  Coverage   56.91%   56.91%           
=======================================
  Files        3243     3243           
  Lines      282323   282323           
  Branches    35451    35451           
=======================================
  Hits       160680   160680           
  Misses     121440   121440           
  Partials      203      203           
Flag Coverage Δ
protocol-designer 19.09% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Contributor

@ecormany ecormany left a comment

Choose a reason for hiding this comment

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

Looks good! Lots of code style comments. Happy to talk through them and make decisions on standardizing things across docs sites.

Copy link
Contributor

Choose a reason for hiding this comment

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

We should come up with a standard format for cover pages. Probably one of:

  • Same as print covers. Just logo, title, hero, company name, date.
  • Print cover info + Product Description. This is probably good for SEO or RAG or whatever.

Either way, I would move Manufacturer Description to the Additional Product Information page. Some print pubs have that ordering anyway.

Copy link
Contributor Author

@jwwojak jwwojak Jun 26, 2025

Choose a reason for hiding this comment

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

Sure, will move the mfg description to the back, to the Additional Info page.

Here's my thinking about the home/landing page: I put the product description on this page because without it, the page doesn't have much information value. It's just an image and date of publication. The product summary seems nice here as it adds a small amount of information to what would otherwise be just a page with a picture. A little different than the manuals, but as a landing page, now it shows you the thing and provides a short description.

<img src="/images/tm-opentrons-flex.png" alt="flex-tm" style="width:70%">
</a>

# **Stacker Module GEN1 Instruction Manual**
Copy link
Contributor

Choose a reason for hiding this comment

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

H1 should never need or have bold styling.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed bold, but the text looks too skinny to me.

Copy link
Contributor

Choose a reason for hiding this comment

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

We'll make sure we have the right weight across the board in our theme CSS file.

<b>[Opentrons Labworks Inc](https://opentrons.com/)</b><br>
August 2025
///
</figure markdown>
Copy link
Contributor

Choose a reason for hiding this comment

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

Closing HTML tags don't have attributes. (This would be an error if you were doing HTML validation.)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

My code here is super-wonky. Going to fix it.


## Product Description

The Opentrons Flex&trade; Stacker is an external module that provides automated, high-capacity storage for ANSI/SLAS compatible labware such as well plates, tip racks, and reservoirs. It also includes a shuttle, which moves labware from the Stacker to the deck where it can be accessed manually or by the Flex Gripper. While ideal for high-throughput NGS workflows, the Stacker can help streamline a wide range of automated liquid handling protocols. When attached, the Stacker increases your robot’s labware storage capacity and throughput, allowing you to run longer, more complex protocols without interruption. Each Flex supports up to four attached Stackers.
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's use unicode everywhere. It makes the source more readable. So here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Unicode...Unicode everywhere.

buzz

Copy link
Contributor

Choose a reason for hiding this comment

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

I would recommend not repeating "stacker" in file names. The ultimate URL for this page would be something like docs.opentrons.com/stacker-manual/stacker-compliance. This is one reason I think just stacker would be better for the parent directory as well: docs.opentrons.com/stacker/compliance is very clean and includes all the same information.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Shortening the file names. Dropping stacker-.

Comment on lines 54 to 85
.center-image {
display: block; /* Make the image a block-level element */
margin-left: auto; /* Push it to the center horizontally */
margin-right: auto; /* Push it to the center horizontally */
}

/* New class for end-of-doc trademark text */
.trademark-text {
font-size: 0.85em; /* set size */
color: #555; /* set color */
display: block; /* text acts like a paragraph */
margin-top: 2em; /* spacing at top */
}
Copy link
Contributor

Choose a reason for hiding this comment

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

These look like ""helpful"" LLM comments 🤖 They're noisy and we should remove them.

- md_in_html
- toc:
permalink: true
title: <u>Page Contents</u>
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's remove the underline here and rely on theme CSS (if we decide to underline it at all; it looks like a link, but it's not)

copyright:
Copyright &copy; OPENTRONS, 2025. ALL RIGHTS RESERVED

nav:
Copy link
Contributor

Choose a reason for hiding this comment

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

I've tended to put nav near the top of the YAML file, but it clearly doesn't matter.

Copy link
Contributor

Choose a reason for hiding this comment

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

Can remove this, should be covered by the main docs/.gitignore.


![power-data-cables](images/power-and-data.png)

The The following table lists and describes the function of each cable.
Copy link
Contributor

Choose a reason for hiding this comment

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

👯

Suggested change
The The following table lists and describes the function of each cable.
The following table lists and describes the function of each cable.

@@ -0,0 +1,30 @@
<a href="https://opentrons.com/">
<img src="/images/tm-opentrons-flex.png" alt="flex-tm" style="width:70%">
Copy link
Contributor

@ecormany ecormany Jun 25, 2025

Choose a reason for hiding this comment

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

Didn't spot this on my first pass through, but these URLs should not have leading slashes. That makes them absolute URLs, which will break in just about any deployment scenario. For example, if this image is meant to be at docs.opentrons.com/stacker-manual/images/tm-opentrons-flex.jpg this would instead point to docs.opentrons.com/images/tm-opentrons-flex.png, which wouldn't exist. Start with ../

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's what I did in a first draft, used ../ However, that didn't work, didn't render the image in a local build while just / did work. But now ../ works so, reasons I guess?

Copy link
Contributor Author

@jwwojak jwwojak left a comment

Choose a reason for hiding this comment

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

Making changes in a new push.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Shortening the file names. Dropping stacker-.

Comment on lines 115 to 119
!!!warning
Changes or modifications to this module not expressly approved by Opentrons could void the user’s authority to operate the equipment. This device complies with part 15 of the FCC Rules.

!!!note
This equipment has been tested and found to comply with the limits for a Class A digital device, pursuant to part 15 of the FCC rules. These limits are designed to provide a reasonable protection against harmful interference when the equipment is operated in a commercial environment. This equipment generates, uses, and can radiate radio frequency energy and, if not installed and used in accordance with the instruction manual, may cause harmful interference to radio communications. Operation of this equipment in a residential area is likely to cause harmful interference in which case the user will be required to correct the interference at their own expense.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed call-out text. Instead, the FCC warning and note will be H4s under the FCC H3.

They won't appear in the page-level TOC as toc-depth: 3, but the FCC section will.


Le présent produit est conforme aux spécifications techniques applicables d’Innovation, Sciences et Développement économique Canada.

CISPR 11 Class A
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Make H4


CISPR 11 Class A

!!!caution
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed admonition in favor of Caution as part of the text.


#### WEEE Policy

Opentrons is dedicated to adhering to the EU Directive on Waste Electrical and Electronic Equipment (WEEE – 2012/19/EU). Our goal is to ensure that our products are properly disposed of or recycled once they reach the end of their useful life.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixing to use em, but keeping vertical-align so icon stays centered with line of text.


After your Stacker is attached to the deck and powered on, instructions and animated images on the touchscreen take you through a guided setup.

<img src="/images/touchscreen-map.png" alt="deck map" class="center-image" style="width:80%;">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removing style="width:80%;"

No CSS in this one. The border is part of the image. For next time, CSS FTW.


<img src="/images/touchscreen-map.png" alt="deck map" class="center-image" style="width:80%;">

Because you can install a Stacker anywhere in column 4, and connect it to any port on the power/data hub, the touchscreen setup process gives you the opportunity to tell Flex where this module is on the deck. See [Post-Installation Procedures](stacker-postinstall.md#).
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The # is valid, but redundant. Will remove.

Comment on lines 3 to 9
![labeled-parts](images/parts-map4.png)

## Stacker Box Parts

The Stacker is packaged separately from the User Kit and ships with its own set of parts. The Stacker box contains the following items:

![stacker-box](images/stacker-box3.svg)
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Will completely redo this set of image. The numbers refer to different versions of trying to get the images to look right. As separate images and using CSS, these should look better.

<th>Stacker status</th>
</tr>
<tr>
<td><span class="my-dot white"></span> White</td>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Let's try status-dot ?

Comment on lines 23 to 31
<figure class="general" style="margin-top: 150px;">
<img src="/images/tm-opentrons-full-blackcolor.svg" alt="opentrons-logo" style="width: 60%;">
<figcaption>
<p><b>Post-sales & contacting Opentrons</b></p>
<p>If you have any questions about the use of the system,<br>
abnormal phenomena, or special needs, please contact:<br>
<a href="mailto:[email protected]">[email protected]</a>. Also visit <a href="https://www.opentrons.com">www.opentrons.com.</a></p>
</figcaption>
</figure>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Less wonky with a CSS fix. Will commit shortly.

jwwojak added 2 commits June 26, 2025 16:39
Committing Stacker instruction manual files.
Mostly markdown, CSS, and HTML refactoring.
@jwwojak jwwojak force-pushed the docs-stacker-manual branch from 309432a to 7356731 Compare June 26, 2025 20:39
Copy link
Contributor Author

@jwwojak jwwojak left a comment

Choose a reason for hiding this comment

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

Made changes and pushed revisions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants