OpenTrons协必威体育2021欧洲杯官网议设计器更新:Batch-Edit概述

对OpenTrons很兴奋,以发布协议设计器的改进批处理编辑选项。必威体育2021欧洲杯官网这是您需要了解它的工作所需的一切。

此功能升级直接来自客户反馈。谢谢你!我们喜欢听到你的想法 - 请保持他们来!

必威体育2021欧洲杯官网(PD)首次创建,Opentrons设想了一个科学家可以快速构建基本移液协议的平台,而无需编写任何代码。由于PD由我们的社区更加利用,因此它成为一种工具,允许科学家建立冗长和复杂的协议,该协议解决如DNA提取,蛋白质纯化和Covid-19诊断等应用。当我们开始看到科学家使用PD来构建具有100多个步骤的协议时,我们知道我们需要为他们提供更好的方式来优化和编辑其协议。科学家们有足够的担心,因为它是:我们不希望他们花时间在速度又一遍又一遍地改变相同的设置。

所以 - 我们刚刚将批量编辑模式添加到PD!用户现在可以选择,重复,删除和编辑多个步骤,从而快速迭代和优化科学协议。

在产品开发团队甚至开始思考如何完成此功能之前,我们知道这将是一个巨大的工程挑战。扩展像PD这样的应用程序以支持完全不同的用户流程,如批处理编辑,需要重的重构,影响协议设计器的核心部分。必威体育2021欧洲杯官网这篇文章将从工程角度侧重于此功能,但我也想呼出巨大的设计挑战,这是为了完成这项完成。PD的核心原则之一是易用性,并制作易于使用,直观的用户体验来构建和优化复杂的科学协议并非卑鄙。

构建来一次编辑一个步骤

PD旨在从地上建立科学协议,一个接一个地创建和编辑步骤。流程如下:

1.用户创建步骤(传输,混合,热量等)

2.以表单(移液器,实验室,液体容积等)填写相关的步骤信息

3.保存表格

4.创建下一步

5.等等

这意味着在任何给定的时间,PD中的主要“设计”选项卡显示以下内容:

1.协议中所有步骤的列表

2.协议特定步骤的可视快照

3.用户填写的表格,以指定步骤应该做什么

PD的UI组件(内置反应)和全球国家管理店(实施))建成以适应此用户流程。这意味着PD的Redux Store会跟踪“所选步骤”的内容,因此用户可以可视化其协议特定部分实际发生的内容。它还跟踪类似“未保存的形式”的东西,在他们提交之前跟踪待定的更改。

注意上面捕获的数据的单一性质(选定步骤,未保存的形式)。PD的回来的店铺并反应组件建造以与一步交互,而不是多个。为了说明这一点,让我们来看看PD如何在根据所选的步骤(这是在上面的图像中的井中出现绿色的井上的井上)。

1.用户单击一个步骤

2.一个redux动作被称为“SELECT_STEP”的被调度,更新“selected item”减速机

3.一个回家的选择器侦听对“选定项目”的更改将搜索在该特定步骤中使用的实验室和Wells

4.井信息将被传递到一个名为“Labwarerender“然后将该信息在井中使用该信息

但是,当我们开始跟踪多个所选步骤而不是一个选择的步骤时会发生什么?特别是,上面步骤3会发生什么?如果我们有多个选定的项目,我们会做什么?

为了防止多个步骤同时被选择/编辑时组件被破坏,我们必须对表示和转换数据的方式进行核心更改。让我们回顾一下我们做了什么。

跟踪多个所选步骤

在此功能之前,我们只关注我们的Redux商店中的“SelectedItem”。我们的“SelectionItem”减速机类型界面看起来像下面的片段一样。注意,此帖子中的所有代码片段都在JavaScript中并键入流动JS.

Type SelectableItem = SingleSelectedItem


constselectedItem =(state:selectItemstate,action:selectedItemaction):?选择宗旨

减速器函数“selectedItem”接受状态和一个动作,并返回选中的项(一个保存选中项相关信息的对象),如果没有选中项则返回null。

为避免在批处理模式下添加新的减速器来保持多个步骤,我们选择修改“SelectsItem”的减速器以适应返回单个和多个步骤。

Type SelectableItem = SingleSelectedItem | MultipleSelectedItem


constselectedItem =(state:selectItemstate,action:selectedItemaction):?选择宗旨

“selectedItem”的返回类型已被修改能够保存一个包含单个步骤id(表示单个选择类型)的对象,或者一个包含多个步骤id列表(表示多个选择类型)的对象。为了告诉redux我们已经选择了多个步骤,我们创建了一个名为" SELECT_MULTIPLE_STEPS "的动作," selectedItem " reducer函数将接受这个动作,并更新它的值来表示多个步骤(参见类型"多元链条”)

当然有一些名为“selectionItem”的减速机中的一些尴尬,可能包含代表多个项目的数据,但我们最终决定了权衡值得增加额外的减速器来表示多个选定的项目,从而必须为一个或在单个和批处理模式之间切换时,另一个。

为了防止用于接受一步的组件作为突破的道具,我们能够利用Redux选择器模式将数据从减速器转换成组件可以接受的格式。将被选择步骤的信息提供给组件的主选择器叫做“getSelectedStepId”,它曾经做过如下事情:

conststring = (state: state) => state. selecteditem . getSelectedStepId:

这是选择器以前所做的简化,但是你知道它的思想——它基本上到达了“selectedStep”减速器并返回里面的任何东西。因为我们的组件从选择器而不是减速机获得所选步骤,所以我们能够在减速机将数据输入到组件之前首先转换数据。

这意味着我们所要做的就是修改“getSelectedStepid”,以返回一个步骤ID,如果reducer保存“单个选择类型”,则为null:

constgetSelectedStepid:?String =(状态:状态)=> state.selectedItem.selectiontype === single_step_selection_type?state.selectedItem.id:null.

由于我们现有的组件现在能够处理多个被选择的步骤,我们添加了一个名为“getMultiSelectItemIds”的新选择器,它类似于“getSelectedStepId”,但在批处理编辑模式下返回一个步骤id列表,否则返回null。这个选择器将用于告诉PD在批编辑模式中选择了哪些步骤。

constgetMultiselectIpItemids:array =(状态:状态)=> state.selectedItem.selectiontype === multi_step_selection_type?State.SelectedItem.ids:

让我们的数据流来自reducers => selector =>组件,这对我们很有帮助,因为我们可以改变reducers的结构,而不必担心组件损坏。另外,因为我们将选择器组合在彼此上面使用重新选择,所有使用“getSelectedStepId”的高阶选择器继续工作得很好。

填充批处理编辑表单

PD基于规则矩阵确定多个步骤跨越多个步骤的字段。例如,如果用户选择两个传输步骤,并且两个步骤具有不同的移液器,则它们不应该能够在两个步骤之间修改共享移液器流量设置。

使用规则矩阵,我们创建了另一个名为“getMultiselectdisabledfields.“作为名称建议,它确定在多选择模式下应禁用哪个字段。它迭代所选表单中的所有字段,并根据每个字段的规则确定表单是否共享相同的移液器,LabWare等,它将返回禁用哪个字段的地图以及每个字段字段被禁用。然后,批处理编辑表单组件可以使用此信息填充哪个字段可编辑,并且哪些字段。

跟踪批处理编辑更改

一旦填充了批编辑表单的字段,就需要在用户修改它们时跟踪对它们值的更改。这有几个原因:

1.我们需要知道用户是否对表单进行了更改,因为如果他们有,如果他们想要提醒他们,如果他们试图退出表格,他们会丢失这些更改。

2.一旦他们完成改变,我们需要合并他们所做的未保存的更改(影响多个步骤)保存的步骤地图在PD的全球州内。

对于单编辑模式,还有另一个称为“unsapedform”的减速器,它以单个未保存的形式保存所有信息,但我们决定不重复使用批量编辑模式,因为:

1.批编辑表单保存跨多个表单的信息,而不仅仅是一个表单

2.在批量编辑模式下,只保存有关哪些表单字段已更改的信息更有用。当用户保存批处理的表单时,这种方式我们所要做的就是传播在我们“中的每个受影响的步骤中的变化savedstepforms.,它保存所有已保存的表单信息。这也意味着只要表示更改的对象不是空的,我们就知道用户已经做了更改

要完成此操作,我们创建了一个名为“BatcheditFormChanges.“,将纯JavaScript对象保存为将被编辑的字段名称为键,以及关联的字段值。

重用表单组件

PD的表单组件是“智能的”,因为它们连接到redux,所以它们可以访问表单数据。问题是“智能”组件中的逻辑是直接绑定到单编辑模式。为了消除单编辑模式的依赖关系,我们决定在单编辑模式和批编辑模式中注入一组道具,它们共享一个名为“FieldProps.

出口类型FieldProps = {|
禁用:布尔,
errorToShow:字符串,
isIndeterminate吗?:布尔,
名称:字符串,
onfieldblur:()=>混合,
onfieldfocus:()=>混合,
tooltipContent吗?:字符串,
updateValue:混合=>无效
价值:混合,
|}

为此,我们创建了两个单独的功能(一个用于单编辑模式,一个用于批处理模式),其负责计算上面的“FieldProps”中的每一个。他们恰如其自然“makeSingleEditFieldProps”和“makebatcheditfieldprops.“。单编辑表单的主父组件使用前者,批处理编辑表单的对应物使用后者。

这两个纯函数都接受相应的单编辑/批编辑状态信息(比如每种形式中包含的信息),执行必要的逻辑,并返回一个对象,该对象持有与上面相同的“FieldProps”接口。这意味着只要我们的所有表单组件都接受“FieldProps”接口,它们就可以用于单编辑模式和批编辑模式。

它是一项很多工作从耦合的单编辑模式逻辑远离耦合的单编辑模式逻辑(和我们还有很多事要完成)但是创建此常见道具界面允许我们重用我们现有的表单字段组件,同时在单编辑模式逻辑和批处理模式逻辑之间绘制清晰的线路。

外带

以上所描述的所有工作(以及更多)都需要我们团队的3名工程师、1名设计师、1名产品经理和1名QA工程师花3个月的时间来完成。你可以看到我们选择多个步骤的史诗在这里,以及我们的史诗用于批量编辑表格的特定工作在这里。我们所有的工作开源,所以随意在我们的代码库周围戳。

在我们开始开发此功能之前,我们向自己询问,如果整个季度的投资值得。由于Bate-Edit已到目前为止来自用户的最常见的特征请求,我们最终决定了。但是,值得注意的是,用户希望同时编辑多个步骤的原因是因为它们的协议通常包括许多步骤,这些步骤更容易编辑批量而不是一次。随着越来越多的科学家使用PD来解决越来越复杂的问题,持有许多步骤的协议问题将增加。

展望未来,我们希望更好地了解用户与PD建立的内容,以及我们可以做些什么来帮助他们尽量减少他们必须创建的步骤。随着PD继续增长和发展,我们将在工作中努力回答这些问题。虽然我们对这个功能非常兴奋,但我们使科学家的使命更快地移动,并解决我们迫切需要他们的问题,远非结束。