Opentrons 很高興為協(xié)議設(shè)計(jì)器發(fā)布改進(jìn)的批量編輯選項(xiàng)。 以下是您需要了解的有關(guān)其工作原理的所有資訊。

此功能升級(jí)直接來(lái)自客戶回饋。 謝謝你有效性！ 我們很高興聽到您的想法—請(qǐng)繼續(xù)提出！

當(dāng)協(xié)議設(shè)計(jì)器 (PD) 首次創(chuàng)建時(shí)趨勢，Opentrons 設(shè)想了一個(gè)平臺(tái)紮實，科學(xué)家可以在其中快速建立基本的移液協(xié)議不久前，而無(wú)需編寫任何程式碼飛躍。 隨著 PD 越來(lái)越多地被我們社區(qū)所利用更高效，它成為一種工具，使科學(xué)家能夠建立冗長(zhǎng)而複雜的方案重要部署，以解決 DNA 提取緊密協作、蛋白質(zhì)純化和 COVID-19 診斷等應(yīng)用。 當(dāng)我們開始看到科學(xué)家使用 PD 建立包含 100 多個(gè)步驟的方案時(shí)線上線下，我們知道我們需要為他們提供更好的方法來(lái)優(yōu)化和編輯他們的方案發揮重要作用。 科學(xué)家有足夠多的擔(dān)憂：我們不希望他們花時(shí)間一遍又一遍地乏味地改變相同的設(shè)定。

所以數據顯示，我們剛剛為 PD 新增了批次編輯模式去突破！ 使用者現(xiàn)在可以選擇、複製達到、刪除和編輯多個(gè)步驟，從而能夠更快地迭代和優(yōu)化科學(xué)協(xié)議不可缺少。

在產(chǎn)品開發(fā)團(tuán)隊(duì)開始考慮如何完成此功能之前蓬勃發展，我們就知道這將是一個(gè)巨大的工程挑戰(zhàn)。 擴(kuò)展 PD 這樣的應(yīng)用程式以支援完全不同的使用者流程（例如批次編輯）將需要大量重構(gòu)積極回應，這會(huì)影響 Protocol Designer 的核心部分重要性。 這篇文章將從工程角度重點(diǎn)討論此功能，但我也想指出完成此功能所面臨的巨大設(shè)計(jì)挑戰(zhàn)多種場景。 PD 的核心原則之一是易用性多元化服務體系，打造易於使用、直覺的使用者體驗(yàn)來(lái)建立和優(yōu)化複雜的科學(xué)協(xié)議絕非易事擴大公共數據。

專為一次編輯一個(gè)步驟而設(shè)計(jì)

PD 旨在從頭開始建立科學(xué)方案深度，依序建立和編輯步驟。 流程如下：

1. 使用者建立一個(gè)步驟（轉(zhuǎn)移核心技術體系、混合開拓創新、加熱等）
2. 在表格中填寫相關(guān)步驟資訊（移液器、實(shí)驗(yàn)室器皿必然趨勢、液體體積等）
3. 儲(chǔ)存表格
4. 建立下一步
5. 等等

這意味著在任何給定時(shí)間促進善治，PD 中的主「設(shè)計(jì)」標(biāo)籤都會(huì)顯示以下部分/全部?jī)?nèi)容：

1. 協(xié)定中所有步驟的列表
2. 協(xié)定特定步驟的視覺快照
3. 供使用者填寫的表格，以指定該步驟應(yīng)執(zhí)行的操作

PD 的 UI 元件（內(nèi)建於 React）和全域狀態(tài)管理儲(chǔ)存（在 Redux 中實(shí)作）就是為了適應(yīng)這種使用者流程而建構(gòu)的多樣性。 這意味著 PD 的 redux 儲(chǔ)存會(huì)追蹤「選定步驟」之類的內(nèi)容發揮效力，以便用戶可以直觀地看到協(xié)議的特定部分實(shí)際發(fā)生的情況。 它還會(huì)追蹤「未儲(chǔ)存的表單」等內(nèi)容明顯，在提交之前追蹤待處理的變更安全鏈。

請(qǐng)注意上面捕獲的資料的奇異性（選定的步驟，未儲(chǔ)存的形式）。 PD 的 redux 儲(chǔ)存和 React 元件旨在與一個(gè)步驟交互處理方法，而不是多個(gè)步驟製造業。 為了說(shuō)明這一點(diǎn)，讓我們看看 PD 如何根據(jù)選擇的步驟填充實(shí)驗(yàn)室器皿上的孔（這就是上圖中孔顯示為綠色的方式）關規定。

1. 用戶點(diǎn)選一個(gè)步驟
2. 調(diào)度一個(gè)名為「SELECT_STEP」的 redux 操作發展基礎，更新「所選項(xiàng)目」reducer
3. 偵聽「所選項(xiàng)目」變更的 redux 選擇器將搜尋該特定步驟中正在使用的實(shí)驗(yàn)室器皿和孔
4. 孔訊息將傳遞到名為「LabwareRender」的元件中，然後該元件將使用該資訊對(duì)孔進(jìn)行著色

但是建強保護，當(dāng)我們開始追蹤多個(gè)選定步驟而不是只追蹤一個(gè)步驟時(shí)同期，會(huì)發(fā)生什麼事？ 特別是使命責任，上面的步驟 3 會(huì)發(fā)生什麼事效果？ 如果我們選擇了多個(gè)項(xiàng)目，我們?cè)撛觞N辦合規意識？

為了防止同時(shí)選擇/編輯多個(gè)步驟時(shí)元件損壞密度增加，我們必須對(duì)資料的表示和轉(zhuǎn)換方式進(jìn)行核心變更。 讓我們回顧一下我們所做的事情創新內容。

追蹤多個(gè)選定的步驟

在此功能之前機遇與挑戰，我們僅在 Redux 儲(chǔ)存中追蹤單一「selectedItem」。 我們的「selectedItem」reducer 類型介面類似於下面的程式碼片段善於監督。 請(qǐng)注意集成技術，本文中的所有程式碼片段均採(cǎi)用 JavaScript 編寫，並使用 flow js 鍵入更合理。

減速器函數(shù)「selectedItem」接受狀態(tài)和操作適應能力，並傳回所選項(xiàng)目（保存所選項(xiàng)目相關(guān)資訊的物件），如果沒有所選項(xiàng)目各方面，則傳回 null防控。

為了避免在批次編輯模式下新增新的縮減器來(lái)保存多個(gè)步驟，我們選擇修改「selectedItem」縮減器以適應(yīng)返回單一步驟和多個(gè)步驟適應性。

「selectedItem」的傳回類型已修改為能夠儲(chǔ)存包含單一步驟 id 的物件（代表單一選擇類型）深刻內涵，或包含多個(gè)步驟 id 清單的物件（代表多重選擇類型） 。 為了告訴 redux 我們已經(jīng)選擇了多個(gè)步驟融合，我們建立了一個(gè)名為「SELECT_MULTIPLE_STEPS」的操作深入闡釋，「selectedItem」reducer 函數(shù)將接受該操作，並更新其值以表示多個(gè)步驟（請(qǐng)參閱類型「MultipleSelectedItem」）

名為「selectedItem」的減速器肯定會(huì)有些尷尬完成的事情，它可能保存表示多個(gè)項(xiàng)目的數(shù)據(jù)物聯與互聯，但我們最終決定，這種權(quán)衡是值得的協同控製，不必添加額外的減速器來(lái)表示多個(gè)選定的項(xiàng)目振奮起來，從而必須取消一個(gè)或多個(gè)項(xiàng)目另一個(gè)是在單一編輯模式和批次編輯模式之間切換時(shí)品質。

為了防止過(guò)去只接受一個(gè)步驟作為 props 的元件被破壞，我們能夠利用 redux 選擇器模式將來(lái)自減速器的資料轉(zhuǎn)換為我們的元件可以接受的格式深入各系統。 將所選步驟的資訊提供給我們的元件的主選擇器稱為“getSelectedStepId”解決問題，它曾經(jīng)執(zhí)行以下操作：

這是選擇器過(guò)去所做的事情的簡(jiǎn)化，但你明白了——它基本上進(jìn)入了“selectedStep”減速器並返回其中的任何內(nèi)容作用。 因?yàn)槲覀兊慕M件從選擇器而不是減速器獲取選定的步驟相互配合，所以我們能夠首先轉(zhuǎn)換減速器中保存的數(shù)據(jù)，然後再將其輸入到我們的組件中著力增加。

這意味著我們要做的就是修改“getSelectedStepId”以在reducer保存“單選擇類型”時(shí)返回步驟id智能化，否則返回null：

由於我們現(xiàn)有的元件現(xiàn)在能夠處理選擇的多個(gè)步驟，因此我們新增了一個(gè)名為“getMultiSelectItemIds”的新選擇器處理，它類似於“getSelectedStepId”建設，但在批次編輯模式下返回步驟ID 列表，否則返回null助力各行。 此選擇器將用於告訴 PD 在批次編輯模式下選擇了哪些步驟前來體驗。

從減速器 => 選擇器 => 組件中獲取資料流確實(shí)對(duì)我們有幫助，因?yàn)槲覀兡軌蚋臏p速器的結(jié)構(gòu)確定性，而不必?fù)?dān)心組件損壞更加廣闊。 此外，由於我們使用 reselect 將選擇器組合在一起相貫通，因此所有使用「getSelectedStepId」的高階選擇器仍然可以正常運(yùn)作。

填入批次編輯表單

PD 根據(jù)規(guī)則矩陣決定多個(gè)步驟中的哪些欄位是可編輯的積極影響。 例如自動化方案，如果使用者選擇兩個(gè)轉(zhuǎn)移步驟，並且這兩個(gè)步驟具有不同的移液器越來越重要，則他們不應(yīng)能夠修改兩個(gè)步驟之間共享的移液器流速設(shè)定線上線下。

使用規(guī)則矩陣，我們建立了另一個(gè)名為「getMultiSelectDisabledFields」的 redux 選擇器醒悟，顧名思義數據顯示，它決定在多選模式下應(yīng)停用哪些欄位。 它會(huì)迭代所選表單中的所有字段也逐步提升，並確定表單是否共用相同的移液器記得牢、實(shí)驗(yàn)室器具等。根據(jù)每個(gè)欄位的規(guī)則認為，它將傳回哪些欄位被禁用的對(duì)應(yīng)以及每個(gè)欄位被停用的原因服務好。 字段被禁用。 然後反應能力，批次編輯表單元件可以使用此資訊來(lái)填入哪些欄位可編輯共謀發展，哪些欄位無(wú)法編輯。

追蹤批次編輯更改

填充批次編輯表單的欄位後，需要在使用者修改它們時(shí)追蹤其值的變更聽得懂。 這是出於以下幾個(gè)原因：

1. 我們需要知道用戶是否對(duì)表單進(jìn)行了任何更改應用優勢，因?yàn)槿绻麄冞M(jìn)行了更改，我們想提醒他們全方位，如果他們嘗試退出表單高效節能，他們將丟失這些更改。
2. 一旦他們完成更改深刻認識，我們需要將他們所做的未儲(chǔ)存的更改（影響多個(gè)步驟）合併到 PD 全域狀態(tài)內(nèi)已儲(chǔ)存的步驟對(duì)應(yīng)中核心技術。

對(duì)於單一編輯模式，有另一個(gè)名為「unsavedForm」的減速器主動性，它將所有資訊保存在單一未儲(chǔ)存的表單中創造性，但我們決定不在批次編輯模式中重複使用它，因?yàn)椋?/p>

1.批量編輯表單保存多個(gè)表單的信息道路，而不僅僅是一個(gè)表單

2. 在批次編輯模式下規模設備，僅保存有關(guān)哪些表單欄位已變更的資訊要有用得多。 這樣指導，當(dāng)使用者儲(chǔ)存批次編輯表單時(shí)競爭力，我們所要做的就是將變更擴(kuò)展到保存所有已儲(chǔ)存表單資訊的「savedStepForms」縮減程式中的每個(gè)受影響的步驟。 這也意味著只要表示更改的物件不為空進一步完善，我們就知道使用者已進(jìn)行更改集聚。

為了實(shí)現(xiàn)這一點(diǎn)，我們創(chuàng)建了一個(gè)名為「batchEditFormChanges」的新減速器調整推進，它包含一個(gè)純 JavaScript 對(duì)象狀況，將編輯的欄位名稱表示為鍵，以及關(guān)聯(lián)的欄位值機製。

重複使用表單元件

PD 的表單元件非橙^程！爸腔邸保?yàn)樗鼈冞B接到 redux探討，因此可以存取表單資料不負眾望。 問(wèn)題在於「智慧型」元件中的邏輯直接與單一編輯模式相關(guān)。 為了消除單一編輯模式的依賴明確相關要求，我們決定在單一編輯模式和批次編輯模式下注入表單元件重要意義，並使用一組共用名為「FieldProps」的通用 API 的 props

為了實(shí)現(xiàn)這一目標(biāo)，我們創(chuàng)建了兩個(gè)單獨(dú)的函數(shù)（一個(gè)用於單一編輯模式深化涉外，一個(gè)用於批次編輯模式）構建，負(fù)責(zé)計(jì)算上面的每個(gè)「FieldProps」。 它們被恰當(dāng)?shù)孛麨椤癿akeSingleEditFieldProps”和“makeBatchEditFieldProps”服務延伸。 單一編輯表單的主要父元件使用前者共創輝煌，而批次編輯表單的對(duì)應(yīng)元件則使用後者具有重要意義。

這兩個(gè)純函數(shù)都會(huì)取得對(duì)應(yīng)的單編輯/批次編輯狀態(tài)資訊（例如每個(gè)表單中包含哪些資訊），執(zhí)行必要的邏輯大部分，並傳回一個(gè)包含與上面相同的「FieldProps」介面的物件強大的功能。 這意味著只要我們所有的表單元件接受“FieldProps”接口，它們就可以用於單一編輯模式和批次編輯模式解決方案。

將我們現(xiàn)有的表單元件從耦合的單一編輯模式邏輯中遷移出來(lái)是一項(xiàng)相當(dāng)大的工作（而且我們還有更多工作要做）優勢，但是創(chuàng)建這個(gè)通用的props 介面允許我們重複使用現(xiàn)有的表單欄位元件，同時(shí)繪製一個(gè)單一編輯模式邏輯和批次編輯模式邏輯之間的清晰界線增產。

重點(diǎn)

上述所有工作（以及更多）花了我們由三名工程師便利性、一名設(shè)計(jì)師、一名產(chǎn)品經(jīng)理和一名品質(zhì)檢查工程師組成的團(tuán)隊(duì)大約三個(gè)月的時(shí)間才完成行動力。 您可以在此處查看我們用於選擇多個(gè)步驟的史詩(shī)提供有力支撐，以及用於批量編輯表單特定工作的史詩(shī)。 我們的所有工作都是開源的保供，因此請(qǐng)隨意瀏覽我們的程式碼庫(kù)自行開發。

在開始開發(fā)此功能之前，我們問(wèn)自己整個(gè)季度的投資是否值得責任。 由於批量編輯是迄今為止用戶最常見的功能請(qǐng)求應用情況，因此我們最終決定如此。 然而組建，值得注意的是表現，使用者想要同時(shí)編輯多個(gè)步驟的原因是因?yàn)樗麄兊膮f(xié)議通常包含許多步驟，這些步驟更容易批量編輯深刻變革，而不是一次編輯一個(gè)結論。 隨著越來(lái)越多的科學(xué)家使用 PD 來(lái)解決越來(lái)越複雜的問(wèn)題，包含許多步驟的協(xié)議問(wèn)題將會(huì)增加方案。

展望未來(lái)關鍵技術，我們希望更了解使用者到底在使用 PD 建構(gòu)什麼了解情況，以及我們可以採(cǎi)取哪些措施來(lái)幫助他們最大限度地減少創(chuàng)建步驟深入。 隨著 PD 的不斷發(fā)展和發(fā)展，我們將努力回答這些問(wèn)題重要的。 雖然我們對(duì)此功能感到非常興奮開展研究，但我們的使命是讓科學(xué)家更快採(cǎi)取行動(dòng)，並解決我們迫切需要他們解決的問(wèn)題相互融合，這項(xiàng)使命還遠(yuǎn)未結(jié)束首要任務。