+
+
+ {displayNotification && (
+
+ );
+};
+
+export default CopyButton;
diff --git a/app/src/components/CopyButton.vue b/app/src/components/CopyButton.vue
deleted file mode 100644
index 34abac95..00000000
--- a/app/src/components/CopyButton.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-
-
-
-
-
-.copy-button-main
- button(@click='copy')
- i.material-icons {{icon}}
- .copy(v-if='buttonText') {{buttonText}}
- transition(
- name='fade'
- )
- #copy-notification(
- v-if='displayNotification'
- :style='notificationStyle'
- ) Copied to clipboard!
-
-
-
diff --git a/app/src/components/DownloadResults.scss b/app/src/components/DownloadResults.scss
new file mode 100644
index 00000000..0785a9ac
--- /dev/null
+++ b/app/src/components/DownloadResults.scss
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../styles/vars.scss' as vars;
+
+.download-results-main {
+ .download-body {
+ height: 100%;
+ display: grid;
+ grid-template-rows: 50% auto 1fr;
+
+ * {
+ margin: auto;
+ width: fit-content;
+ }
+
+ .title {
+ font-size: 1.5rem;
+ }
+
+ .options {
+ label {
+ margin-right: 0.5rem;
+ }
+
+ select {
+ min-width: 7rem;
+ }
+ }
+
+ .download {
+ margin-top: 2rem;
+ }
+ }
+}
diff --git a/app/src/components/DownloadResults.tsx b/app/src/components/DownloadResults.tsx
new file mode 100644
index 00000000..e842a558
--- /dev/null
+++ b/app/src/components/DownloadResults.tsx
@@ -0,0 +1,109 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect } from 'react';
+import FloatingModal from './FloatingModal';
+import './DownloadResults.scss';
+
+interface DownloadResultsProps {
+ reactionIds: string[];
+ showDownloadResults: boolean;
+ onHideDownloadResults: () => void;
+}
+
+const DownloadResults: React.FC
+ Copied to clipboard!
+
+ )}
+
+
+
+
+ );
+};
+
+export default DownloadResults;
diff --git a/app/src/components/DownloadResults.vue b/app/src/components/DownloadResults.vue
deleted file mode 100644
index 6be2a736..00000000
--- a/app/src/components/DownloadResults.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-
-
-
-
-
-.download-results-main
- floating-modal(
- v-if='showDownloadResults'
- title="Download Results"
- @closeModal='$emit("hideDownloadResults")'
- )
- .download-body
- .title Select your desired file type and then click download.
- .options
- label(for='file-type-select') File type:
- select#file-type-select(v-model='fileType')
- option(value="pb.gz") pb.gz
- option(value="csv" disabled) csv (coming soon)
- option(value="pbtxt" disabled) pbtxt (coming soon)
- .download
- button(@click='downloadResults') Download {{fileType}} file
-
-
-
diff --git a/app/src/components/EntityTable.scss b/app/src/components/EntityTable.scss
new file mode 100644
index 00000000..9ebeea29
--- /dev/null
+++ b/app/src/components/EntityTable.scss
@@ -0,0 +1,145 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../styles/vars.scss' as vars;
+
+.table-main {
+ width: 100%;
+
+ .table-container {
+ width: 100%;
+
+ .header {
+ .title-holder {
+ .title {
+ font-size: 2rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ }
+ }
+ }
+
+ .search-area {
+ padding: 1rem;
+ margin: 0 5%;
+
+ input {
+ width: 30%;
+ min-width: 300px;
+ padding: 0.5rem;
+ border: 1px solid vars.$medgrey;
+ border-radius: 0.25rem;
+ margin-left: 0.5rem;
+ }
+ }
+
+ .content {
+ width: 100%;
+ height: fit-content;
+
+ .entities-holder {
+ height: 100%;
+ display: block;
+ width: 100%;
+
+ > * {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .entity.no-interact {
+ display: grid;
+ cursor: default;
+ grid-template-columns: 1fr;
+ column-gap: 1rem;
+ align-items: center;
+ padding: 1rem;
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+ }
+
+ .pagination {
+ display: grid;
+ grid-template-columns: 1fr repeat(7, auto);
+ height: 100%;
+ align-items: center;
+ column-gap: 2rem;
+ padding: 1rem;
+ margin: 0 5%;
+ color: vars.$linkblue;
+
+ .select {
+ color: black;
+
+ select {
+ margin: 0 0.5rem;
+ padding: 0.25rem;
+ border: 1px solid vars.$medgrey;
+ border-radius: 0.25rem;
+ }
+ }
+
+ .paginav {
+ font-weight: 600;
+ display: inline-grid;
+ grid-column-gap: 0.33rem;
+ align-items: center;
+ cursor: pointer;
+ transition: 0.25s;
+
+ &:hover {
+ color: vars.$hoverblue;
+ }
+
+ &.prev,
+ &.next {
+ grid-template-columns: auto 1fr;
+ }
+
+ &.first,
+ &.last {
+ grid-template-columns: auto auto 1fr;
+ }
+
+ &.no-click {
+ cursor: auto;
+
+ &:hover {
+ color: vars.$linkblue;
+ }
+ }
+
+ .chevron {
+ height: 0.75rem;
+ }
+ }
+
+ @media (max-width: 1000px) {
+ grid-template-columns: repeat(7, auto);
+ row-gap: 1rem;
+ column-gap: 1rem;
+
+ .select {
+ grid-column: 1 / span 7;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/app/src/components/EntityTable.tsx b/app/src/components/EntityTable.tsx
new file mode 100644
index 00000000..59baa69f
--- /dev/null
+++ b/app/src/components/EntityTable.tsx
@@ -0,0 +1,233 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useEffect, useMemo, type ReactNode } from 'react';
+import './EntityTable.scss';
+
+interface EntityTableProps
+
+ Select your desired file type and then click download.
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default EntityTable;
diff --git a/app/src/components/EntityTable.vue b/app/src/components/EntityTable.vue
deleted file mode 100644
index 6a37a914..00000000
--- a/app/src/components/EntityTable.vue
+++ /dev/null
@@ -1,235 +0,0 @@
-
-
-
-
-
-.table-main
- .table-container
- .header
- .title-holder
- .title {{ title }}
- .search-area(v-if='displaySearch')
- label(for="search") Search:
- input(
- type="text"
- id="search"
- v-model='searchString'
- )
- .content
- .entities-holder
- slot(:entities='paginatedEntities')
- .pagination(
- v-if='pagination && entities'
- )
- .select Showing
- select(
- name="pagination"
- id="pagination"
- v-model='pagination'
- )
- option(value=10) 10
- option(value=25) 25
- option(value=50) 50
- option(value=100) 100
- | of {{filteredEntities.length}} entries.
- .paginav.first(@click='currentPage = 1')
- img.chevron(src='/img/arrowL.png')
- img.chevron(src='/img/arrowL.png')
- span.word First
- .prev.paginav(@click='currentPage = pagiPrev')
- img.chevron(src='/img/arrowL.png')
- span.word Previous
- .paginav(
- @click='currentPage = currentPage > 1 ? currentPage - 1 : currentPage'
- :class='currentPage > 1 ? "" : "no-click"'
- )
- span.word {{ currentPage > 1 ? currentPage - 1 : "..."}}
- .paginav.no-click
- span.word {{ currentPage }}
- .paginav(
- @click='currentPage = currentPage < lastPage ? currentPage + 1 : currentPage'
- :class='currentPage < lastPage ? "" : "no-click"'
- )
- span.word {{ currentPage < lastPage ? currentPage + 1 : "..."}}
- .next.paginav(@click='currentPage = pagiNext')
- span.word Next
- img.chevron(src='/img/arrowR.png')
- .paginav.last(@click='currentPage = lastPage')
- span.word Last
- img.chevron(src='/img/arrowR.png')
- img.chevron(src='/img/arrowR.png')
-
-
-
diff --git a/app/src/components/FloatingModal.scss b/app/src/components/FloatingModal.scss
new file mode 100644
index 00000000..7fe4d914
--- /dev/null
+++ b/app/src/components/FloatingModal.scss
@@ -0,0 +1,73 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.modal-main {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1000;
+
+ .modal-background {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-color: #00000088;
+ }
+
+ .modal-holder {
+ position: relative;
+ height: 100%;
+ pointer-events: none;
+
+ .modal-container {
+ position: absolute;
+ max-width: 80%;
+ min-width: 50%;
+ height: 60vh;
+ background-color: white;
+ border-radius: 0.25rem;
+ margin: auto;
+ padding: 1rem 0;
+ top: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ left: 50%;
+ pointer-events: auto;
+
+ .header {
+ font-weight: 700;
+ font-size: 1.5rem;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ border-bottom: 2px solid black;
+ padding: 0 1rem 1rem;
+
+ .close {
+ cursor: pointer;
+ }
+ }
+
+ .body {
+ padding: 1rem 1rem 0;
+ overflow-y: auto;
+ height: calc(100% - 3.5rem);
+ }
+ }
+ }
+}
diff --git a/app/src/components/FloatingModal.tsx b/app/src/components/FloatingModal.tsx
new file mode 100644
index 00000000..266a9ba4
--- /dev/null
+++ b/app/src/components/FloatingModal.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { type ReactNode } from 'react';
+import './FloatingModal.scss';
+
+interface FloatingModalProps {
+ title: string;
+ children: ReactNode;
+ onCloseModal: () => void;
+}
+
+const FloatingModal: React.FC
+
+
+
+
+ {displaySearch && (
+ {title &&
+ {title}
}
+
+ setSearchString(e.target.value)}
+ />
+
+ )}
+
+
+
+ {children(paginatedEntities)}
+
+ {pagination && entities.length > 0 && (
+
+
+ )}
+
+ Showing{' '}
+ {' '}
+ of {filteredEntities.length} entries.
+
+
+ handlePageChange(1)}
+ >
+ 
+
+ First
+
+
+
+
+ First
+ handlePageChange(pagiPrev)}
+ >
+
+ Previous
+
+
+
+ Previous
+ 1 ? '' : 'no-click'}`}
+ onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
+ >
+ {currentPage > 1 ? currentPage - 1 : '...'}
+
+
+
+ {currentPage}
+
+
+ currentPage < lastPage && handlePageChange(currentPage + 1)}
+ >
+ {currentPage < lastPage ? currentPage + 1 : '...'}
+
+
+ handlePageChange(pagiNext)}
+ >
+ Next
+ 
+
+
+
+ handlePageChange(lastPage)}
+ >
+ Last
+
+
+
+
+
+
+
+
+ );
+};
+
+export default FloatingModal;
diff --git a/app/src/components/FloatingModal.vue b/app/src/components/FloatingModal.vue
deleted file mode 100644
index 1b0f034c..00000000
--- a/app/src/components/FloatingModal.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-
-
-
-
-
-.modal-main
- .modal-background(@click='closeModal()')
- .modal-holder
- .modal-container
- .header
- .title {{title}}
- .close(@click='closeModal()') ✕
- .body
- slot
-
-
-
diff --git a/app/src/components/HeaderNav.scss b/app/src/components/HeaderNav.scss
new file mode 100644
index 00000000..e0d3d506
--- /dev/null
+++ b/app/src/components/HeaderNav.scss
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../styles/vars.scss' as vars;
+
+// BEM Block: header-nav
+.header-nav {
+ background-color: white !important;
+
+ // BEM Element: header-nav__container
+ &__container {
+ display: flex;
+ flex-wrap: inherit;
+ align-items: center;
+ width: 90%;
+ margin: auto;
+ padding: 0.5rem 0;
+ }
+
+ // BEM Element: header-nav__brand
+ &__brand {
+ padding: 0.5rem 0;
+ }
+
+ // BEM Element: header-nav__nav
+ &__nav {
+ flex-direction: row;
+ }
+
+ // BEM Element: header-nav__nav-list
+ &__nav-list {
+ margin-left: 1rem;
+ }
+
+ // BEM Element: header-nav__nav-item
+ &__nav-item {
+ display: flex;
+ }
+
+ // BEM Element: header-nav__link
+ &__link {
+ padding: 0.5rem;
+ text-decoration: none;
+ transition: 0.15s;
+ color: vars.$linkblue;
+
+ // BEM Modifier: header-nav__link--hover
+ &:hover {
+ color: vars.$hoverblue;
+ }
+ }
+}
diff --git a/app/src/components/HeaderNav.tsx b/app/src/components/HeaderNav.tsx
new file mode 100644
index 00000000..17148271
--- /dev/null
+++ b/app/src/components/HeaderNav.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './HeaderNav.scss';
+
+const HeaderNav: React.FC = () => {
+ return (
+
+ );
+};
+
+export default HeaderNav;
diff --git a/app/src/components/HeaderNav.vue b/app/src/components/HeaderNav.vue
deleted file mode 100644
index 325850d0..00000000
--- a/app/src/components/HeaderNav.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
-
-
-
-nav.navbar.navbar-expand-lg.bg-light
- .container
- a.navbar-brand(href="/")
- img(
- src="https://raw.githubusercontent.com/Open-Reaction-Database/ord-schema/main/logos/logo.svg"
- alt="ORD Logo"
- height="30"
- )
- #navbarNav.collapse.navbar-collapse
- .navbar-nav
- .nav-item
- router-link.nav-link(:to='{name: "browse"}') Browse
- router-link.nav-link(:to='{name: "search"}') Search
- .nav-item
- a.nav-link(href="https://app.open-reaction-database.org") Contribute
- a.nav-link(href="https://docs.open-reaction-database.org") Docs
- .nav-item
- router-link.nav-link(:to='{name: "about"}') About
-
-
-
diff --git a/app/src/components/LoadingSpinner.scss b/app/src/components/LoadingSpinner.scss
new file mode 100644
index 00000000..8ab09b5c
--- /dev/null
+++ b/app/src/components/LoadingSpinner.scss
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../styles/vars.scss' as vars;
+
+.spinner-main {
+ width: 100%;
+ height: 100%;
+ display: flex;
+
+ .loader-ring {
+ display: inline-block;
+ position: relative;
+ width: 80px;
+ height: 80px;
+ margin: auto;
+
+ div {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ width: 64px;
+ height: 64px;
+ margin: 8px;
+ border: 8px solid vars.$linkblue;
+ border-radius: 50%;
+ animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: vars.$linkblue transparent transparent transparent;
+
+ &:nth-child(1) {
+ animation-delay: -0.45s;
+ }
+
+ &:nth-child(2) {
+ animation-delay: -0.3s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: -0.15s;
+ }
+ }
+ }
+}
+
+@keyframes lds-ring {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/app/src/utils/outcomes.js b/app/src/components/LoadingSpinner.tsx
similarity index 64%
rename from app/src/utils/outcomes.js
rename to app/src/components/LoadingSpinner.tsx
index 0a6adc94..f3d0e71d 100644
--- a/app/src/utils/outcomes.js
+++ b/app/src/components/LoadingSpinner.tsx
@@ -14,13 +14,20 @@
* limitations under the License.
*/
-import reaction_pb from 'ord-schema';
+import React from 'react';
+import './LoadingSpinner.scss';
-export default {
- formattedTime(timeData) {
- if (!timeData) return null;
- const timeUnits = reaction_pb.Time.TimeUnit;
- const type = Object.keys(timeUnits).find(key => timeUnits[key] == timeData.units);
- return `${timeData.value} ${type.toLowerCase()}${timeData.units !== 0 ? '(s)' : ''}`;
- },
+const LoadingSpinner: React.FC = () => {
+ return (
+
+
+
+
+
+
+ {title}
+
+ ✕
+
+ {children}
+
+
+ );
};
+
+export default LoadingSpinner;
diff --git a/app/src/components/LoadingSpinner.vue b/app/src/components/LoadingSpinner.vue
deleted file mode 100644
index 3a2aee94..00000000
--- a/app/src/components/LoadingSpinner.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-
-
-
-
-
-.spinner-main
- transition(
- name='fade'
- )
- .loader-ring
- div
- div
- div
- div
-
-
-
diff --git a/app/src/components/MainFooter.scss b/app/src/components/MainFooter.scss
new file mode 100644
index 00000000..9333aca7
--- /dev/null
+++ b/app/src/components/MainFooter.scss
@@ -0,0 +1,79 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../styles/vars.scss' as vars;
+
+.main-footer {
+ background-color: vars.$lightgrey;
+ padding: 2rem 0;
+ margin-top: 4rem;
+
+ &__container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1rem;
+ }
+
+ &__content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ &__text {
+ color: #666;
+ margin: 0;
+ font-size: 0.9rem;
+ }
+
+ &__links {
+ display: flex;
+ gap: 1.5rem;
+ align-items: center;
+ }
+
+ &__link {
+ color: vars.$linkblue;
+ text-decoration: none;
+ font-size: 0.9rem;
+ transition: color 0.2s ease;
+
+ &:hover {
+ color: vars.$hoverblue;
+ text-decoration: underline;
+ }
+ }
+
+ &__logo {
+ height: 24px;
+ width: auto;
+ }
+}
+
+@media (max-width: 768px) {
+ .main-footer {
+ &__content {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ &__links {
+ justify-content: center;
+ }
+ }
+}
diff --git a/app/src/components/MainFooter.tsx b/app/src/components/MainFooter.tsx
new file mode 100644
index 00000000..9bea1b8a
--- /dev/null
+++ b/app/src/components/MainFooter.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import './MainFooter.scss';
+
+const MainFooter: React.FC = () => {
+ return (
+
+ );
+};
+
+export default MainFooter;
diff --git a/app/src/components/MainFooter.vue b/app/src/components/MainFooter.vue
deleted file mode 100644
index 603b31bb..00000000
--- a/app/src/components/MainFooter.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-footer.bg-light.text-center.mt-auto
- div.p-3.copy © Copyright 2023 Open Reaction Database Project Authors
-
-
-
diff --git a/app/src/components/ModalKetcher.scss b/app/src/components/ModalKetcher.scss
new file mode 100644
index 00000000..e1532b56
--- /dev/null
+++ b/app/src/components/ModalKetcher.scss
@@ -0,0 +1,116 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../styles/transition';
+
+.background {
+ width: 100%;
+ height: 100%;
+ z-index: 1000;
+ background-color: rgba(0, 0, 0, 0.6);
+ position: fixed;
+ top: 0;
+ left: 0;
+
+ .modal {
+ width: 75vw;
+ height: 75vh;
+ background-color: white;
+ border-radius: 0.25rem;
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ overflow: hidden;
+ max-width: 1000px;
+ max-height: 800px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+
+ .modal-content {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-template-rows: 1fr auto;
+ position: relative;
+
+ .modal-body {
+ width: 100%;
+ height: 100%;
+
+ iframe {
+ width: 100%;
+ height: 100%;
+ border: 0;
+ }
+ }
+
+ .modal-footer {
+ padding: 1rem;
+ border-top: 2px solid #eff2f5; // matches ketcher bottom bar
+ display: flex;
+ justify-content: flex-end;
+ column-gap: 1rem;
+ background-color: white;
+
+ button {
+ padding: 0.5rem 1rem;
+ border: 1px solid #ccc;
+ border-radius: 0.25rem;
+ background-color: white;
+ cursor: pointer;
+ transition: 0.2s;
+
+ &:hover {
+ background-color: #f5f5f5;
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ &:first-child {
+ color: black;
+ }
+
+ &:last-child {
+ background-color: #007bff;
+ color: white;
+ border-color: #007bff;
+
+ &:hover:not(:disabled) {
+ background-color: #0056b3;
+ }
+ }
+ }
+ }
+
+ .modal-loading {
+ background-color: white;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10;
+ }
+ }
+ }
+}
diff --git a/app/src/components/ModalKetcher.tsx b/app/src/components/ModalKetcher.tsx
new file mode 100644
index 00000000..58a151e6
--- /dev/null
+++ b/app/src/components/ModalKetcher.tsx
@@ -0,0 +1,192 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import LoadingSpinner from './LoadingSpinner';
+import './ModalKetcher.scss';
+
+interface ModalKetcherProps {
+ smiles: string;
+ onUpdateSmiles: (smiles: string) => void;
+ onCloseModal: () => void;
+}
+
+// Subset of the Ketcher API surface we actually invoke.
+interface KetcherApi {
+ setMolecule(molfile: string): void;
+ getSmiles(): Promise
+
+
+
+
+
+
+
+ );
+};
+
+export default ModalKetcher;
diff --git a/app/src/components/ModalKetcher.vue b/app/src/components/ModalKetcher.vue
deleted file mode 100644
index e8a36ec3..00000000
--- a/app/src/components/ModalKetcher.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-
-
-
-
-
-.background
- #ketcher_modal.modal
- .modal-content
- .modal-body
- iframe#ketcher-iframe( src='/ketcher' )
- .modal-footer
- button(
- type='button'
- @click='this.$emit("closeModal")'
- ) Cancel
- button(
- type='button'
- @click='saveSmiles()'
- ) Save
- transition(name="fade")
- .modal-loading(
- v-if='loading'
- )
- LoadingSpinner
-
-
-
diff --git a/app/src/components/ReactionCard.scss b/app/src/components/ReactionCard.scss
new file mode 100644
index 00000000..48c6ecc4
--- /dev/null
+++ b/app/src/components/ReactionCard.scss
@@ -0,0 +1,100 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../styles/vars' as vars;
+
+.reaction-container {
+ text-decoration: none;
+
+ .row {
+ background-color: white;
+ border-radius: 0.25rem;
+ padding: 0.75rem;
+ margin-bottom: 1rem;
+ transition: 0.25s;
+ border: 4px solid white;
+
+ &:hover {
+ box-shadow: 0 0 5px vars.$darkgrey;
+ }
+
+ .select {
+ input,
+ label {
+ cursor: pointer;
+ }
+ }
+
+ .reaction-table {
+ color: black;
+ overflow-x: wrap;
+ }
+
+ .is-mined {
+ display: flex;
+ flex-direction: row-reverse;
+ }
+
+ .is-mined-badge {
+ text-align: center;
+ border-radius: 5px;
+ background-color: #0d6efd;
+ color: #fff;
+ font-size: 0.8rem;
+ width: 60px;
+ }
+
+ .info {
+ display: grid;
+ grid-template-columns: repeat(2, 50%);
+ row-gap: 0.5rem;
+ column-gap: 1rem;
+ margin-top: 1rem;
+
+ .col.full {
+ grid-column: 1/3;
+
+ button {
+ font-size: 1.2rem;
+ }
+ }
+
+ .col {
+ * {
+ margin-top: 0.5rem;
+ }
+ }
+
+ .smile {
+ display: flex;
+ column-gap: 0.5rem;
+ align-items: center;
+ margin-top: 0.25rem;
+
+ .value {
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+ &.selected {
+ border-color: vars.$linkblue;
+ }
+ }
+}
diff --git a/app/src/components/ReactionCard.tsx b/app/src/components/ReactionCard.tsx
new file mode 100644
index 00000000..e861521b
--- /dev/null
+++ b/app/src/components/ReactionCard.tsx
@@ -0,0 +1,207 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import reaction_pb from 'ord-schema';
+import type { CompoundIdentifier, ProductMeasurement } from 'ord-schema/proto/reaction_pb';
+import LoadingSpinner from './LoadingSpinner';
+import CopyButton from './CopyButton';
+import { enumName } from '../utils/enum';
+import { formatPercentage } from '../utils/outcomes';
+import type { SearchResult, ReactionData } from '../types/search';
+import './ReactionCard.scss';
+
+interface ReactionCardProps {
+ reaction: SearchResult;
+ isSelectable?: boolean;
+ isSelected?: boolean;
+ onSelectionChange?: (reactionId: string, isSelected: boolean) => void;
+}
+
+const YIELD_MEASUREMENT_TYPE = reaction_pb.ProductMeasurement.ProductMeasurementType.YIELD;
+
+const ReactionCard: React.FC
+
+
+
+
+ {/* Point at Ketcher's own index.html (shipped in the standalone
+ bundle under app/public/ketcher/). All of Ketcher's bundled
+ asset paths are relative — sourcing from `/ketcher/index.html`
+ lets the iframe's document resolve them against
+ `/ketcher/static/...` correctly. Pointing the iframe at our
+ React Router route instead (the previous design) loaded our
+ shell HTML, which broke Ketcher's relative asset resolution. */}
+
+
+
+
+
+
+ {loading && (
+
+
+ )}
+
+
+ );
+};
+
+export default ReactionCard;
diff --git a/app/src/components/ReactionCard.vue b/app/src/components/ReactionCard.vue
deleted file mode 100644
index a04c1b08..00000000
--- a/app/src/components/ReactionCard.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-
-
-
-
-
-.reaction-container
- .row(:class='isSelected ? "selected" : ""')
- .select(v-if='isSelectable')
- input(
- type="checkbox"
- :id='"select_"+reaction.reaction_id'
- :value='reaction.reaction_id'
- :checked='isSelected'
- @change='$emit("clickedSelect", $event)'
- )
- label(:for='"select_"+reaction.reaction_id') Select reaction
- .is-mined(v-if='reaction.data.provenance.isMined')
- .is-mined-badge Mined
- .reaction-table(
- v-html='reactionTable'
- v-if='reactionTable'
- )
- LoadingSpinner(v-else)
- .info
- .col.full
- router-link(
- :to='{ name: "reaction-view", params: {reactionId: reaction.reaction_id}}'
- )
- button View Full Details
- .col
- .yield Yield: {{getYield(reaction.data.outcomesList[0].productsList[0].measurementsList)}}
- .conversion Conversion: {{getConversion(reaction.data)}}
- .conditions Conditions: {{conditionsAndDuration(reaction.data).join("; ") || "Not Listed"}}
- .smile(v-if='reaction.data.outcomesList[0].productsList[0].identifiersList.length')
- CopyButton(
- :textToCopy='reaction.data.outcomesList[0].productsList[0].identifiersList[0].value'
- )
- .value Product {{productIdentifier(reaction.data.outcomesList[0].productsList[0].identifiersList[0])}}
- .col
- .creator Uploaded by {{reaction.data.provenance.recordCreated.person.name}}, {{reaction.data.provenance.recordCreated.person.organization}}
- .date Uploaded on {{new Date(reaction.data.provenance.recordCreated.time.value).toLocaleDateString()}}
- .doi DOI: {{reaction.data.provenance.doi}}
- .publication
- a(
- :href='reaction.data.provenance.publicationUrl'
- target="_blank"
- ) Publication URL
- .dataset Dataset:
- a(
- :href='"/search?dataset_id=" + reaction.dataset_id + "&limit=100"'
- target="_blank"
- ) {{reaction.dataset_id}}
-
-
-
diff --git a/app/src/hooks/useSearchTask.ts b/app/src/hooks/useSearchTask.ts
new file mode 100644
index 00000000..7ae44685
--- /dev/null
+++ b/app/src/hooks/useSearchTask.ts
@@ -0,0 +1,117 @@
+/**
+ * Copyright 2026 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useRef } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import reaction_pb from 'ord-schema';
+import { base64ToBytes } from '../utils/base64';
+import type { SearchResult } from '../types/search';
+
+const POLL_INTERVAL_MS = 1000;
+const POLL_TIMEOUT_MS = 120_000;
+
+type TaskState = { status: 'success'; results: SearchResult[] } | { status: 'pending'; taskId: string };
+
+interface TaskRef {
+ queryString: string | null;
+ taskId: string | null;
+ // In-flight submit_query promise. Two queryFn invocations can overlap
+ // (StrictMode dev double-invoke, react-query refetch racing a polling
+ // refetch, etc.); holding the in-flight promise on the ref lets the second
+ // caller await the first one's result instead of firing a duplicate
+ // submit_query that leaves an orphaned task on the backend.
+ submitPromise: Promise
+ {isSelectable && (
+
+
+
+
+
+ )}
+
+ {provenance?.isMined && (
+
+
+ )}
+
+ Mined
+
+ {reactionTable ? :
+
+
+
+
+
+
+
+
+
+
+ Yield: {getYield(firstProduct?.measurementsList || [])}
+ Conversion: {getConversion(reactionData)}
+
+ Conditions: {conditionsAndDuration(reactionData).join('; ') || 'Not Listed'}
+
+ {firstProductIdentifier && (
+
+
+ )}
+ Product {productIdentifier(firstProductIdentifier)}
+
+
+
+ Uploaded by {provenance?.recordCreated?.person?.name || 'Unknown'},{' '}
+ {provenance?.recordCreated?.person?.organization || 'Unknown'}
+
+
+ Uploaded on{' '}
+ {provenance?.recordCreated?.time?.value
+ ? new Date(provenance.recordCreated.time.value).toLocaleDateString()
+ : 'Unknown'}
+
+ DOI: {provenance?.doi || 'Not available'}
+ {provenance?.publicationUrl && (
+
+ )}
+
+ Dataset:{' '}
+
+ {reaction.dataset_id}
+
+
+
+
+ );
+};
+
+export default About;
diff --git a/app/src/views/About.vue b/app/src/views/About.vue
deleted file mode 100644
index ffc849b8..00000000
--- a/app/src/views/About.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-
-
-
-
-
-
+
+
+
+
+ About
+
+
+ + The Open Reaction Database (ORD) is an open-access schema and infrastructure for structuring and sharing + organic reaction data, including a centralized data repository. The ORD schema supports conventional and + emerging technologies, from benchtop reactions to automated high-throughput experiments and flow chemistry. + Our vision is that a consistent data representation and infrastructure to support data sharing will enable + downstream applications that will greatly improve the state of the art with respect to computer-aided + synthesis planning, reaction prediction, and other predictive chemistry tasks. +
++ Since our initial meeting in October 2019, the database has grown to include more than 2M reactions + (including a large dataset of reactions extracted from USPTO sources) and received contributions from + academic and industrial users, both from published and unpublished work. Some of our current efforts + include: +
+-
+
- + Improving user interfaces and providing support to contributors on GitHub and via email. + +
- + Working with companies to incorporate the ORD schema into their reaction informatics infrastructure, + including the development of "translators" between the ORD schema and electronic lab notebooks (ELNs). + +
- + Engaging with journals and other stakeholders to drive adoption of the ORD schema as a{' '} + + FAIR + {' '} + data structure for sharing reaction data across academia, government, and industry. + +
+ + Ben Deadman + {' '} + is our Reaction Data Evangelist and ORD Program Manager. Please reach out to him at{' '} + + help@open‑reaction‑database.org + {' '} + for help preparing a contribution or to discuss using the ORD in your company or lab. +
+
+
+
+
+
+ Publications and Media
+
+
+ Journal Articles
+-
+
- + Kearnes SM, Maser MR, Wleklinski M, Kast A, Doyle AG, Dreher SD, Hawkins JM, Jensen KF, Coley CW. The Open + Reaction Database. J Am Chem Soc 2021, 143(45), 18820-18826. ( + + JACS + + ) + +
- + Mercado R, Kearnes SM, Coley C. Data Sharing in Chemistry: Lessons Learned and a Case for Mandating + Structured Reaction Data. J Chem Inf Model 2023, 63(14), 4253-4265. ( + + JCIM + + ) + +
News
+-
+
- + A new database for machine-learning research ( + + C&EN + + , 22 November 2021) + +
- + Yield-predicting AI needs chemists to stop ignoring failed experiments ( + + Chemistry World + + , 12 May 2022) + +
- + Chemists debate machine learning's future in synthesis planning and ask for open data ( + + C&EN + + , 18 May 2022) + +
- + For chemists, the AI revolution has yet to happen ( + + Nature + + , 17 May 2023) + +
+
+
+
+
+ Leadership
+
+
+ Governing Committee
+
+
+ -
+
- Connor Coley (MIT, C-CAS) +
- Abby Doyle (UCLA, C-CAS) +
- Spencer Dreher (Merck) +
-
+
- Joel Hawkins (Pfizer) +
- Klavs Jensen (MIT) +
- Steven Kearnes (Relay) +
Advisory Board
+
+
+ -
+
- Alán Aspuru-Guzik (Toronto, MADNESS) +
- Timothy Cernak (Michigan, Entos) +
- Lucy Colwell (Cambridge, SynTech, Google) +
- Werngard Czechtizky (AstraZeneca) +
- JW Feng +
- Matthew Gaunt (Cambridge, SynTech) +
- Alex Godfrey (NCATS Consultant) +
- Mimi Hii (Imperial, ROAR) +
- Greg Landrum (T5 Informatics) +
-
+
- Fabio Lima (Novartis) +
- Christos Nicolaou (Recursion) +
- Sarah Reisman (Caltech, C-CAS) +
- Francesco Rianjongdee (GSK) +
- Marwin Segler (Microsoft) +
- Matthew Sigman (Utah, C-CAS) +
- Jay Stevens (BMS) +
- Sarah Trice (XtalPi) +
- Huimin Zhao (UIUC, MMLI) +
+
+
+
+ Support
+
+
+ We gratefully acknowledge support from:
+-
+
- Relay Therapeutics +
- Schmidt Futures +
- University of Notre Dame +
-
-
-
-
diff --git a/app/src/styles/table.sass b/app/src/views/Home.scss
similarity index 63%
rename from app/src/styles/table.sass
rename to app/src/views/Home.scss
index dafdb646..a7c52524 100644
--- a/app/src/styles/table.sass
+++ b/app/src/views/Home.scss
@@ -14,21 +14,19 @@
* limitations under the License.
*/
-@use '@/styles/vars' as *
+@use '../styles/vars.scss' as vars;
-.content
- .table-container
- background-color: white
- width: 90%
- margin: auto
- border-radius: 0.5rem
- display: grid
- overflow: hidden
- display: grid
- .column
- border-top: 1px solid $medgrey
- padding: 0.5rem
- &.label
- border-top: none
- font-weight: 700
- font-size: 1.25rem
\ No newline at end of file
+.home {
+ margin-top: 20vh;
+
+ &__image-container {
+ width: 90%;
+ margin: auto;
+ max-width: 800px;
+ }
+
+ &__logo {
+ width: 100%;
+ height: auto;
+ }
+}
diff --git a/app/src/views/Home.tsx b/app/src/views/Home.tsx
new file mode 100644
index 00000000..951c871f
--- /dev/null
+++ b/app/src/views/Home.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import './Home.scss';
+
+const Home: React.FC = () => {
+ return (
+
-
-
-
- About
-
-
- - The Open Reaction Database (ORD) is an open-access schema and infrastructure for structuring and sharing - organic reaction data, including a centralized data repository. The ORD schema supports conventional and - emerging technologies, from benchtop reactions to automated high-throughput experiments and flow chemistry. - Our vision is that a consistent data representation and infrastructure to support data sharing will enable - downstream applications that will greatly improve the state of the art with respect to computer-aided - synthesis planning, reaction prediction, and other predictive chemistry tasks. -
-- Since our initial meeting in October 2019, the database has grown to include more than 2M reactions (including - a large dataset of reactions extracted from USPTO sources) and received contributions from academic and - industrial users, both from published and unpublished work. Some of our current efforts include: -
--
-
- Improving user interfaces and providing support to contributors on GitHub and via email. -
- - Working with companies to incorporate the ORD schema into their reaction informatics infrastructure, - including the development of "translators" between the ORD schema and electronic lab notebooks (ELNs). - -
- - Engaging with journals and other stakeholders to drive adoption of the ORD schema as a - FAIR data structure for sharing reaction data across - academia, government, and industry. - -
- Ben Deadman - is our Reaction Data Evangelist and ORD Program Manager. Please reach out to him at - help@open‑reaction‑database.org - for help preparing a contribution or to discuss using the ORD in your company or lab. -
-
-
-
-
- Publications and Media
-
-
- Journal Articles
--
-
- - Kearnes SM, Maser MR, Wleklinski M, Kast A, Doyle AG, Dreher SD, Hawkins JM, Jensen KF, Coley CW. The Open - Reaction Database. J Am Chem Soc 2021, 143(45), 18820-18826. (JACS) - -
- - Mercado R, Kearnes SM, Coley C. Data Sharing in Chemistry: Lessons Learned and a Case for Mandating - Structured Reaction Data. J Chem Inf Model 2023, 63(14), 4253-4265. (JCIM) - -
News
--
-
- - A new database for machine-learning research (C&EN, 22 November 2021) - -
- - Yield-predicting AI needs chemists to stop ignoring failed experiments (Chemistry World, 12 May 2022) - -
- - Chemists debate machine learning's future in synthesis planning and ask for open data (C&EN, 18 May 2022) - -
- - For chemists, the AI revolution has yet to happen (Nature, 17 May 2023) - -
-
-
-
- Leadership
-
-
- Governing Committee
-
-
-
-
- -
-
- Connor Coley (MIT, C-CAS) -
- Abby Doyle (UCLA, C-CAS) -
- Spencer Dreher (Merck) -
-
- -
-
- Joel Hawkins (Pfizer) -
- Klavs Jensen (MIT) -
- Steven Kearnes (Relay) -
Advisory Board
-
-
-
-
- -
-
- Alán Aspuru-Guzik (Toronto, MADNESS) -
- Timothy Cernak (Michigan, Entos) -
- Lucy Colwell (Cambridge, SynTech, Google) -
- Werngard Czechtizky (AstraZeneca) -
- JW Feng -
- Matthew Gaunt (Cambridge, SynTech) -
- Alex Godfrey (NCATS Consultant) -
- Mimi Hii (Imperial, ROAR) -
- Greg Landrum (T5 Informatics) -
-
- -
-
- Fabio Lima (Novartis) -
- Christos Nicolaou (Recursion) -
- Sarah Reisman (Caltech, C-CAS) -
- Francesco Rianjongdee (GSK) -
- Marwin Segler (Microsoft) -
- Matthew Sigman (Utah, C-CAS) -
- Jay Stevens (BMS) -
- Sarah Trice (XtalPi) -
- Huimin Zhao (UIUC, MMLI) -
-
-
-
- Support
-
-
- We gratefully acknowledge support from:
--
-
- Relay Therapeutics -
- Schmidt Futures -
- University of Notre Dame -
+
+ );
+};
+
+export default Home;
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
deleted file mode 100644
index aaf2e5f8..00000000
--- a/app/src/views/Home.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
-
-
-.home
- .home-img
- img( alt="Ord logo" src="https://raw.githubusercontent.com/Open-Reaction-Database/ord-schema/main/logos/logo.svg")
-
-
-
diff --git a/app/src/styles/transition.sass b/app/src/views/browse/MainBrowse.scss
similarity index 61%
rename from app/src/styles/transition.sass
rename to app/src/views/browse/MainBrowse.scss
index 99c516e3..0844287e 100644
--- a/app/src/styles/transition.sass
+++ b/app/src/views/browse/MainBrowse.scss
@@ -14,23 +14,17 @@
* limitations under the License.
*/
-.expand-enter-active, .expand-leave-active
- transition: .5s ease
- max-height: 400px
- opacity: 1
+@use '../../styles/vars.scss' as vars;
+@use '../../styles/table.scss' as table;
-.expand-enter-from, .expand-leave-to
- max-height: 0
- overflow: hidden
- opacity: 0
+#browse-main {
+ padding: 1rem 0;
-.expand-enter-to, .expand-leave-from
- max-height: 400px
- overflow: hidden
- opacity: 1
+ .table-container {
+ grid-template-columns: 1fr 1fr 1fr auto;
+ }
-.fade-enter-active, .fade-leave-active
- transition: opacity .25s
-
-.fade-enter-from, .fade-leave-to
- opacity: 0
\ No newline at end of file
+ .loading {
+ margin-top: 30vh;
+ }
+}
diff --git a/app/src/views/browse/MainBrowse.tsx b/app/src/views/browse/MainBrowse.tsx
new file mode 100644
index 00000000..06a8f0c2
--- /dev/null
+++ b/app/src/views/browse/MainBrowse.tsx
@@ -0,0 +1,101 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import EntityTable from '../../components/EntityTable';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import './MainBrowse.scss';
+
+interface Dataset {
+ dataset_id: string;
+ name: string;
+ description?: string;
+ num_reactions: number;
+}
+
+const MainBrowse: React.FC = () => {
+ const [loading, setLoading] = useState(true);
+ const [tableData, setTableData] = useState
+ 
+
+
+
+
+ );
+ }
+
+ if (!tableData.length) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ {(entities: Dataset[]) => (
+
+
+ );
+};
+
+export default MainBrowse;
diff --git a/app/src/views/browse/MainBrowse.vue b/app/src/views/browse/MainBrowse.vue
deleted file mode 100644
index 3f792b7c..00000000
--- a/app/src/views/browse/MainBrowse.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-
-
-
-
-
-#browse-main
- EntityTable(
- :tableData='tableData'
- title="",
- v-slot='{ entities }'
- v-if='tableData.length'
- )
- .table-container
- .column.label Dataset ID
- .column.label Name
- .column.label Description
- .column.label Size
- template(
- v-for='(row, idx) in entities'
- )
- .column
- router-link(:to='{ name: "dataset-view", params: {datasetId: row.dataset_id}}') {{row.dataset_id}}
- .column {{row.name}}
- .column {{row.description?.length > 75 ? row.description.substr(0,75)+"..." : row.description}}
- .column {{row.num_reactions}}
- .loading(v-else)
- LoadingSpinner
-
-
-
diff --git a/app/src/main.js b/app/src/views/browse/selected-set/MainSelectedSet.scss
similarity index 51%
rename from app/src/main.js
rename to app/src/views/browse/selected-set/MainSelectedSet.scss
index 126ccffc..d1bb0606 100644
--- a/app/src/main.js
+++ b/app/src/views/browse/selected-set/MainSelectedSet.scss
@@ -14,28 +14,42 @@
* limitations under the License.
*/
-import { createApp } from 'vue';
-import { createStore } from 'vuex';
-
-import App from './App.vue';
-import router from './router';
-
-const store = createStore({
- state() {
- return { storedSet: null, downloadFileType: null };
- },
- mutations: {
- setStoredSet(state, data) {
- state.storedSet = data;
- },
- setDownloadFileType(state, data) {
- state.downloadFileType = data;
- },
- },
- actions: {},
-});
-
-const app = createApp(App);
-app.use(router);
-app.use(store);
-app.mount('#app');
+@use '../../../styles/vars.scss' as vars;
+
+#selected-set-main {
+ padding: 2rem;
+
+ .header {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ margin-bottom: 1rem;
+
+ .title {
+ font-size: 2rem;
+ font-weight: 700;
+ }
+
+ .action-button-holder {
+ display: flex;
+ align-items: end;
+ column-gap: 0.5rem;
+ }
+ }
+
+ .no-results {
+ text-align: center;
+ padding: 4rem 2rem;
+
+ .title {
+ font-size: 1.5rem;
+ color: #666;
+ }
+ }
+
+ .loading {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 50vh;
+ }
+}
diff --git a/app/src/views/browse/selected-set/MainSelectedSet.tsx b/app/src/views/browse/selected-set/MainSelectedSet.tsx
new file mode 100644
index 00000000..c7319679
--- /dev/null
+++ b/app/src/views/browse/selected-set/MainSelectedSet.tsx
@@ -0,0 +1,134 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import reaction_pb from 'ord-schema';
+import LoadingSpinner from '../../../components/LoadingSpinner';
+import ReactionCard from '../../../components/ReactionCard';
+import DownloadResults from '../../../components/DownloadResults';
+import CopyButton from '../../../components/CopyButton';
+import { base64ToBytes } from '../../../utils/base64';
+import type { SearchResult } from '../../../types/search';
+import './MainSelectedSet.scss';
+
+const MainSelectedSet: React.FC = () => {
+ const [searchParams] = useSearchParams();
+ const [reactions, setReactions] = useState
+
+
+ ))}
+
+ )}
+ Dataset ID
+ Name
+ Description
+ Size
+ {entities.map(row => (
+
+ {row.dataset_id}
+
+ {row.name}
+ {truncateDescription(row.description)}
+ {row.num_reactions}
+
+
+ );
+ }
+
+ if (!reactions.length) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ Reaction Set
+
+
+ There was an issue fetching your selected reactions.
+
+ setShowDownloadResults(false)}
+ />
+
+ );
+};
+
+export default MainSelectedSet;
diff --git a/app/src/views/browse/selected-set/MainSelectedSet.vue b/app/src/views/browse/selected-set/MainSelectedSet.vue
deleted file mode 100644
index 573ffec9..00000000
--- a/app/src/views/browse/selected-set/MainSelectedSet.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-
-
-
-
-
-#selected-set-main
- .header
- .title Reaction Set
- .action-button-holder
- CopyButton(
- :textToCopy='fullUrl'
- icon='share'
- buttonText='Shareable Link'
- )
- button(
- :disabled='!reactionIds.length'
- @click='showDownloadResults=true'
- ) Download Reaction Set
- .selected-set(v-if='!loading && reactions.length')
- ReactionCard(
- v-for='reaction in reactions'
- :reaction='reaction'
- :isSelectable='false'
- :isSelected='false'
- )
- .no-results(v-else-if='!loading && !reactions?.length')
- .title There was an issue fetching your selected reactions.
- .loading(v-else)
- LoadingSpinner
- DownloadResults(
- :reactionIds='reactionIds'
- :showDownloadResults='showDownloadResults'
- @hideDownloadResults='showDownloadResults=false'
- )
-
-
-
diff --git a/app/src/views/contribute/DatasetsView.vue b/app/src/views/contribute/DatasetsView.vue
deleted file mode 100644
index 1eff2a9d..00000000
--- a/app/src/views/contribute/DatasetsView.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-
-
-
-
-
-.create
- .subtitle Create dataset:
- .file-picker
- .input
- label(for='new-dataset-name') Dataset name:
- input#new-dataset-name(
- type='text'
- v-model='newDatasetName'
- )
- .submit
- button#create-dataset(@click='createDataset') Create Dataset
- .copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt eros eget magna venenatis, nec volutpat justo ornare. Praesent mauris enim, dignissim nec posuere ut, mollis at lacus. Phasellus ut ultricies arcu, ultrices efficitur enim. Donec pharetra turpis nulla, id elementum felis fermentum sit amet. In id imperdiet sapien. Quisque vulputate odio eget ex aliquet aliquam. Vestibulum a metus magna.
-
-
-
diff --git a/app/src/views/contribute/EnumerateView.vue b/app/src/views/contribute/EnumerateView.vue
deleted file mode 100644
index 0ee5b65f..00000000
--- a/app/src/views/contribute/EnumerateView.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-
-
-
-
-
-.enumerate
- .subtitle Upload files for enumeration:
- .file-picker
- .input
- label(for='template') Template filename:
- input#template(
- type='file'
- accept='.pbtxt'
- v-on:change='(e) => setFile(e,"template")'
- )
- .input
- label(for='spreadsheet') Spreadsheet filename:
- input#spreadsheet(
- type='file'
- accept='.csv,.xls,.xlsx'
- v-on:change='(e) => setFile(e,"spreadsheet")'
- )
- .submit
- button#enumerate_submit(@click='submitEnumerate') Submit Enumeration Upload
- .copy You can use a Reaction template to enumerate a Dataset based on a spreadsheet of values. For more information, see the
- a(
- href='https://docs.open-reaction-database.org/en/latest/guides/templates.html'
- target="_blank"
- ) documentation
- | .
- .copy
- b NOTE:
- | Large dataset enumerations (thousands of reactions) may result in a browser timeout. If this happens, please send an email to
- a(
- href='mailto:help@open-reaction-database.org'
- target="_blank"
- ) help@open-reaction-database.org
- | and attach your template and spreadsheet files. Alternatively, you may use the
- a(
- href='https://github.com/Open-Reaction-Database/ord-schema/blob/main/ord_schema/scripts/enumerate_dataset.py'
- target="_blank"
- ) programmatic interface
- | to enumerate the dataset locally.
-
-
-
-
diff --git a/app/src/views/contribute/MainContribute.vue b/app/src/views/contribute/MainContribute.vue
deleted file mode 100644
index 7d0c1138..00000000
--- a/app/src/views/contribute/MainContribute.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-
-
-
-
-
-.main-contribute
- transition(name="fade")
- .loading(v-if='loading')
- LoadingSpinner
- transition(name="fade")
- .contribute-menu(v-if='!loading')
- .title {{activeTab}}
- .contribute-container
- .tabs
- .tab(
- v-for='tab in tabs'
- @click='activeTab = tab'
- :class='activeTab == tab ? "selected" : ""'
- ) {{tab}}
- transition(name="fade")
- .get-started(v-if='activeTab == "Get Started"')
- .copy Check out these
- a(href="https://www.youtube.com/playlist?list=PLyoEVAlMb276aRRa4xLNRAzbMPRlNb7VI") tutorial videos
- | for a guide on how to use the ORD Editor.
- .tutorial-videos
- .video
- .subtitle Using the interactive web editor (updated 1/2021)
- iframe(
- width='560'
- height='315'
- src='https://www.youtube.com/embed/5J-2j8aBXMo'
- title='YouTube video player'
- frameborder='0'
- allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
- allowfullscreen
- )
- .video
- .subtitle Submitting your first Dataset
- iframe(
- width='560'
- height='315'
- src='https://www.youtube.com/embed/sAdSKKdO9Gs'
- title='YouTube video player'
- frameborder='0'
- allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
- allowfullscreen
- )
- .copy Please send any questions, comments, or issues to
- a(
- href='https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=help@open-reaction-database.org'
- target="_blank"
- ) help@open-reaction-database.org
- | or create a new issue on the
- a(
- href='https://github.com/Open-Reaction-Database/ord-interface/issues'
- target="_blank"
- ) ord-interface GitHub repository
- | .
- transition(name="fade")
- Datasets(v-if='activeTab == "Datasets"')
- transition(name="fade")
- Upload(v-if='activeTab == "Upload"')
- transition(name="fade")
- Enumerate(v-if='activeTab == "Enumerate"')
-
-
-
-
diff --git a/app/src/views/contribute/UploadView.vue b/app/src/views/contribute/UploadView.vue
deleted file mode 100644
index 017e22f9..00000000
--- a/app/src/views/contribute/UploadView.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-
-
-
-
-
-.upload
- .subtitle Upload dataset file:
- .file-picker
- .input
- label(for='upload') Dataset filename:
- input#template(
- type='file'
- accept='.pbtxt,.pb'
- v-on:change='(e) => setFile(e)'
- )
- .submit
- button#upload-submit(@click='submitUpload') Submit Upload
- .copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt eros eget magna venenatis, nec volutpat justo ornare. Praesent mauris enim, dignissim nec posuere ut, mollis at lacus. Phasellus ut ultricies arcu, ultrices efficitur enim. Donec pharetra turpis nulla, id elementum felis fermentum sit amet. In id imperdiet sapien. Quisque vulputate odio eget ex aliquet aliquam. Vestibulum a metus magna.
-
-
-
diff --git a/app/src/views/dataset-view/ChartView.scss b/app/src/views/dataset-view/ChartView.scss
new file mode 100644
index 00000000..42ec4936
--- /dev/null
+++ b/app/src/views/dataset-view/ChartView.scss
@@ -0,0 +1,69 @@
+/**
+ * Copyright 2026 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// ChartView component styles
+@use '../../styles/vars.scss' as vars;
+
+.chart-view {
+ &__title-and-chart {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ &__title {
+ margin-bottom: 10px;
+ }
+
+ &__loading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ &__tooltip {
+ position: fixed;
+ background: white;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ z-index: 1000;
+ pointer-events: none;
+ max-width: 300px;
+
+ pre {
+ margin: 0 0 8px 0;
+ font-family: monospace;
+ font-size: 12px;
+ }
+ }
+
+ &__svg {
+ svg {
+ width: 100%;
+ height: auto;
+ }
+ }
+
+ &__molloading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
diff --git a/app/src/views/dataset-view/ChartView.tsx b/app/src/views/dataset-view/ChartView.tsx
new file mode 100644
index 00000000..1aab1b7c
--- /dev/null
+++ b/app/src/views/dataset-view/ChartView.tsx
@@ -0,0 +1,270 @@
+/**
+ * Copyright 2026 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import * as d3 from 'd3';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import reaction_pb from 'ord-schema';
+import './ChartView.scss';
+
+interface ChartData {
+ smiles: string;
+ times_appearing: number;
+}
+
+interface ChartViewProps {
+ uniqueId: string;
+ title: string;
+ apiCall: string;
+ role: string;
+ isCollapsed?: boolean;
+}
+
+const ChartView: React.FC
+
+
+ Reaction Set
+
+
+
+ {reactions.map(reaction => (
+
+
+
+
+ );
+};
+
+export default ChartView;
diff --git a/app/src/views/dataset-view/ChartView.vue b/app/src/views/dataset-view/ChartView.vue
deleted file mode 100644
index b4accf98..00000000
--- a/app/src/views/dataset-view/ChartView.vue
+++ /dev/null
@@ -1,357 +0,0 @@
-
-
-
-
-
- .div
- .span(:style='isCollapsed ? "font-size: 10pt; width: 150px;" : "font-size: 14pt;"') {{this.title}}
- svg(:id='uniqueId' :style='!loading ? "visibility: visible" : "visibility: hidden"')
- .loading(:style='loading ? "visibility: visible" : "visibility: hidden"')
- LoadingSpinner
- .tooltip(:style='"top: " + tooltipOffsetVertical + "px; left: " + tooltipOffsetHorizontal + "px; visibility: " + showTooltip' v-if='showSmiles')
- pre Count: {{currentTimesAppearing}}
- .svg(
- v-html='molHtml'
- )
- .molloading(:style='this.molloading ? "visibility: visible" : "visibility: hidden"')
- LoadingSpinner
-
diff --git a/app/src/views/dataset-view/MainDatasetView.scss b/app/src/views/dataset-view/MainDatasetView.scss
new file mode 100644
index 00000000..380978be
--- /dev/null
+++ b/app/src/views/dataset-view/MainDatasetView.scss
@@ -0,0 +1,182 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../../styles/vars.scss' as vars;
+
+#dataset-main {
+ padding: 2rem;
+
+ h1 {
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ font-weight: 700;
+ }
+}
+
+#charts {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 2rem;
+ margin-bottom: 2rem;
+}
+
+.charts-container {
+ height: fit-content;
+ background: white;
+ border-radius: 0.5rem;
+ padding: 1.5rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ border: 1px solid vars.$lightgrey;
+}
+
+.charts-header {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 1rem;
+
+ #expand {
+ button {
+ background: white;
+ border: 1px solid vars.$medgrey;
+ border-radius: 0.25rem;
+ padding: 0.5rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+
+ &:hover {
+ background: vars.$lightgrey;
+ }
+
+ .material-icons {
+ font-size: 1.2rem;
+ color: vars.$darkgrey;
+ }
+ }
+ }
+}
+
+#chartsection {
+ display: flex;
+ flex-direction: column;
+}
+
+.charts-content {
+ display: block;
+
+ &.expanded {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ }
+}
+
+#chartsectioncharts {
+ .chart-placeholder {
+ background-color: white;
+ border: 1px solid vars.$medgrey;
+ border-radius: 0.5rem;
+ padding: 1rem;
+ margin-bottom: 1rem;
+
+ h3 {
+ margin: 0 0 0.5rem 0;
+ font-size: 1.25rem;
+ font-weight: 600;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ font-style: italic;
+ }
+ }
+}
+
+#datasection {
+ .h4 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ }
+
+ > table {
+ width: 100%;
+ background-color: white;
+ border-collapse: collapse;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ margin-bottom: 2rem;
+
+ tr {
+ &:nth-child(even) {
+ background-color: #f8f9fa;
+ }
+ }
+
+ td {
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid vars.$medgrey;
+
+ &:first-child {
+ font-weight: 600;
+ background-color: vars.$lightgrey;
+ white-space: nowrap;
+ }
+
+ &:last-child {
+ width: 100%;
+ }
+ }
+ }
+
+ .search-results {
+ .results-placeholder {
+ background-color: white;
+ border-radius: 0.5rem;
+ padding: 1rem;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+ .result-item {
+ padding: 0.5rem 0;
+ border-bottom: 1px solid vars.$medgrey;
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
+
+ .no-results {
+ text-align: center;
+ padding: 2rem;
+
+ .title {
+ font-size: 1.25rem;
+ color: #666;
+ }
+ }
+
+ .loading {
+ display: flex;
+ justify-content: center;
+ padding: 2rem;
+ }
+ }
+}
diff --git a/app/src/views/dataset-view/MainDatasetView.tsx b/app/src/views/dataset-view/MainDatasetView.tsx
new file mode 100644
index 00000000..d5f44b09
--- /dev/null
+++ b/app/src/views/dataset-view/MainDatasetView.tsx
@@ -0,0 +1,151 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import ChartView from './ChartView';
+import SearchResults from './SearchResults';
+import { useSearchTask } from '../../hooks/useSearchTask';
+import type { Dataset } from '../../types/search';
+import './MainDatasetView.scss';
+
+const MainDatasetView: React.FC = () => {
+ const { datasetId } = useParams<{ datasetId: string }>();
+ const [isCollapsed, setIsCollapsed] = useState(true);
+
+ const datasetQuery = `?dataset_id=${datasetId}&limit=100`;
+ const { data: searchData, isFetching, error } = useSearchTask(datasetId ? datasetQuery : null, !!datasetId);
+ const searchResults = searchData?.status === 'success' ? searchData.results : [];
+ const loading = !!datasetId && (isFetching || searchData?.status === 'pending');
+
+ const { data: datasetData, error: datasetError } = useQuery
+
+ {title}
+
+
+
+
+
+
+
+
+ {showSmiles && (
+
+
+ )}
+ Count: {currentTimesAppearing}
+
+
+
+
+
+ );
+};
+
+export default MainDatasetView;
diff --git a/app/src/views/dataset-view/MainDatasetView.vue b/app/src/views/dataset-view/MainDatasetView.vue
deleted file mode 100644
index c763e10e..00000000
--- a/app/src/views/dataset-view/MainDatasetView.vue
+++ /dev/null
@@ -1,300 +0,0 @@
-
-
-
-
-
-#dataset-main
- h1 Dataset View
- #charts(:style='this.isCollapsed ? "display: grid" : "display: flex; flex-direction: column"')
- #chartsection(:style='this.isCollapsed ? "width: 40%" : "width: 100%"')
- #chartsectioncharts(:style='this.isCollapsed ? "display: block" : "display: flex"')
- ChartView(
- uniqueId='reactantsFrequency'
- title='Frequency of Reactants'
- apiCall='input_stats'
- role='reactant'
- :isCollapsed='this.isCollapsed'
- )
- ChartView(
- uniqueId='productsFrequency'
- title='Frequency of Products'
- apiCall='product_stats'
- role='product'
- :isCollapsed='this.isCollapsed'
- )
- #expand
- button(@click='expandOrShrink')
- i.material-icons(:style='"margin-top: 15%"' :title='this.isCollapsed ? "Expand" : "Collapse"') {{ this.isCollapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left" }}
- #datasection
- .h4 Dataset Metadata
- table
- tr
- td Dataset ID:
- td {{datasetData.dataset_id ?? '(no id)'}}
- tr
- td Dataset Name:
- td {{datasetData.name ?? '(no name)'}}
- tr
- td Dataset Description:
- td {{datasetData.description ?? '(no description)'}}
- tr
- td Number of Reactions in Dataset:
- td {{datasetData.num_reactions}}
- .search-results
- SearchResults(
- :searchResults='searchResults'
- :isOverflow='datasetData.num_reactions > searchResults?.length'
- v-if='!loading && searchResults?.length'
- )
- .no-results(v-else-if='!loading && !searchResults?.length')
- .title This dataset contains no reactions.
- .loading(v-else)
- LoadingSpinner
-
-
-
diff --git a/app/src/views/dataset-view/SearchResults.scss b/app/src/views/dataset-view/SearchResults.scss
new file mode 100644
index 00000000..bbb72e7a
--- /dev/null
+++ b/app/src/views/dataset-view/SearchResults.scss
@@ -0,0 +1,90 @@
+/**
+ * Copyright 2026 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// SearchResults component styles
+@use '../../styles/vars.scss' as vars;
+
+.search-results {
+ &__action-buttons {
+ margin: -2.5rem 0 1rem; // bring button row inline with title without having to pass too much into EntityTable
+ display: flex;
+ justify-content: flex-end;
+ column-gap: 0.5rem;
+
+ button {
+ padding: 0.5rem 1rem;
+ background-color: vars.$linkblue;
+ color: white;
+ border: none;
+ border-radius: 0.25rem;
+ cursor: pointer;
+ transition: background-color 0.25s;
+
+ &:hover:not(:disabled) {
+ background-color: vars.$hoverblue;
+ }
+
+ &:disabled {
+ background-color: vars.$darkgrey;
+ cursor: not-allowed;
+ }
+ }
+ }
+
+ &__reaction-wrapper {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ &__checkbox {
+ margin-top: 1rem;
+ cursor: pointer;
+ }
+
+ &__view-selected {
+ position: fixed;
+ bottom: 2rem;
+ right: 6.5rem;
+ z-index: 1000;
+ transition: opacity 0.25s ease-in-out;
+ }
+
+ &__view-selected-button {
+ padding: 0.5rem 1rem;
+ color: white;
+ background-color: vars.$linkblue;
+ border-radius: 0.25rem;
+ cursor: pointer;
+ box-shadow: 0 0 5px vars.$darkgrey;
+ animation: bounce 5s infinite ease-in-out;
+
+ @keyframes bounce {
+ 0%,
+ 20% {
+ transform: translateY(0);
+ }
+ 10% {
+ transform: translateY(-10px);
+ }
+ }
+ }
+
+ @media (max-width: 1000px) {
+ margin-top: 2.5rem;
+ }
+}
diff --git a/app/src/views/dataset-view/SearchResults.tsx b/app/src/views/dataset-view/SearchResults.tsx
new file mode 100644
index 00000000..797b27ae
--- /dev/null
+++ b/app/src/views/dataset-view/SearchResults.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright 2026 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import EntityTable from '../../components/EntityTable';
+import ReactionCard from '../../components/ReactionCard';
+import CopyButton from '../../components/CopyButton';
+import DownloadResults from '../../components/DownloadResults';
+import type { SearchResult } from '../../types/search';
+import './SearchResults.scss';
+
+interface SearchResultsProps {
+ searchResults: SearchResult[];
+ isOverflow: boolean;
+}
+
+const SearchResults: React.FCDataset View
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ Dataset Metadata
+ {datasetError ? (
+
+
+ ) : (
+ Failed to load dataset metadata: {datasetError.message}
+ | Dataset ID: | +{datasetData?.dataset_id ?? '(no id)'} | +
| Dataset Name: | +{datasetData?.name ?? '(no name)'} | +
| Dataset Description: | +{datasetData?.description ?? '(no description)'} | +
| Number of Reactions in Dataset: | +{datasetData?.num_reactions} | +
+ {error ? (
+ searchResults.length}
+ />
+ ) : (
+
+
+
+ ) : loading ? (
+ Failed to load reactions: {error.message}
+
+
+ ) : searchResults.length > 0 ? (
+
+
+ )}
+ This dataset contains no reactions.
+
+
+ {entities => (
+ <>
+
+
+ result.reaction_id)}
+ showDownloadResults={showDownloadResults}
+ onHideDownloadResults={() => setShowDownloadResults(false)}
+ />
+
+ );
+};
+
+export default SearchResults;
diff --git a/app/src/views/dataset-view/SearchResults.vue b/app/src/views/dataset-view/SearchResults.vue
deleted file mode 100644
index b866515d..00000000
--- a/app/src/views/dataset-view/SearchResults.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-
-
-
-
-
-.search-results-main
- EntityTable(
- :tableData='formattedResults'
- :title='isOverflow ? "100 Reactions From This Dataset (Sample)" : "Reactions in this Dataset (" + formattedResults.length + " Reactions)"',
- v-slot='{ entities }'
- v-if='formattedResults.length'
- :displaySearch='false'
- )
- .action-button-holder
- CopyButton(
- :textToCopy='fullUrl'
- icon='share'
- buttonText='Shareable Link'
- )
- button(
- :disabled='!formattedResults.length'
- @click='showDownloadResults=true'
- ) Download All Search Results
- ReactionCard(
- v-for='row in entities'
- :reaction='row'
- :isSelectable='false'
- :isSelected='selectedReactions.includes(row.reaction_id)'
- @clickedSelect='updateSelectedReactions'
- )
- transition(
- name='fade'
- )
- .view-selected-container(v-if='selectedReactions.length')
- .view-selected-button(@click='goToViewSelected') View {{selectedReactions.length}} selected reactions
- DownloadResults(
- :reactionIds='formattedResults.map(result => result.reaction_id)'
- :showDownloadResults='showDownloadResults'
- @hideDownloadResults='showDownloadResults=false'
- )
-
-
-
diff --git a/app/src/views/reaction-view/CompoundView.scss b/app/src/views/reaction-view/CompoundView.scss
new file mode 100644
index 00000000..2b215323
--- /dev/null
+++ b/app/src/views/reaction-view/CompoundView.scss
@@ -0,0 +1,47 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../../styles/vars' as vars;
+
+.compound-view {
+ display: grid;
+ align-items: center;
+
+ * {
+ padding: 0.5rem;
+ }
+
+ .label {
+ font-weight: 700;
+ border-bottom: 1px solid #000;
+ }
+
+ .raw {
+ .button {
+ padding: 0.5rem;
+ background-color: vars.$darkgrey;
+ color: white;
+ border-radius: 0.25rem;
+ cursor: pointer;
+ }
+ }
+
+ .data {
+ width: 100%;
+ height: 100%;
+ overflow-x: auto;
+ }
+}
diff --git a/app/src/views/reaction-view/CompoundView.tsx b/app/src/views/reaction-view/CompoundView.tsx
new file mode 100644
index 00000000..28a3798d
--- /dev/null
+++ b/app/src/views/reaction-view/CompoundView.tsx
@@ -0,0 +1,197 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import reaction_pb from 'ord-schema';
+import type { Compound, ProductCompound } from 'ord-schema/proto/reaction_pb';
+import FloatingModal from '../../components/FloatingModal';
+import { amountObj, amountStr } from '../../utils/amount';
+import { enumName } from '../../utils/enum';
+import './CompoundView.scss';
+
+// CompoundView is invoked with both reaction inputs (Compound) and outcome
+// products (ProductCompound); the two protobuf messages share most rendered
+// fields but each carries a few of its own (Compound: reactionRole / preparationsList,
+// ProductCompound: isDesiredProduct / isolatedColor / texture).
+type ComponentLike = Partial
+
+
+ {entities.map(row => (
+
+ setShowRawData(false)}
+ >
+
+ )}
+
+ );
+};
+
+export default CompoundView;
diff --git a/app/src/views/reaction-view/CompoundView.vue b/app/src/views/reaction-view/CompoundView.vue
deleted file mode 100644
index ca3ecd7a..00000000
--- a/app/src/views/reaction-view/CompoundView.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-
-
-
-
-
-.compound-view(
- :style='{gridTemplateColumns: gridColumns}'
-)
- .label Compound
- .label(v-if='component.amount') Amount
- .label Role
- .label Raw
- .svg(
- v-html='compoundSVG'
- )
- .amount(v-if='component.amount') {{compoundAmount}}
- .role {{compoundRole.toLowerCase()}}
- .raw
- .button(@click='showRawData=true') <>
- floating-modal(
- v-if='showRawData'
- title="Raw Data"
- @closeModal='showRawData=false'
- )
- .data
- pre(v-for='identifier in rawData.identifiers') identifiers: {{identifier}}
- pre(v-if='rawData.amount') amount: {{rawData.amount}}
- pre reaction_role: {{rawData.reaction_role}}
- pre(v-if='rawData.is_desired_product') is_desired_product: {{rawData.is_desired_product}}
- pre(v-if='rawData.isolated_color') isolated_color: {{rawData.isolated_color}}
- pre(v-if='rawData.texture') texture: {{rawData.texture}}
- pre(v-for='prep in rawData.preparations') preparations: {{prep}}
-
-
-
diff --git a/app/src/views/reaction-view/ConditionsView.scss b/app/src/views/reaction-view/ConditionsView.scss
new file mode 100644
index 00000000..162fc67e
--- /dev/null
+++ b/app/src/views/reaction-view/ConditionsView.scss
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.conditions-view {
+ .details {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+ }
+}
diff --git a/app/src/views/reaction-view/ConditionsView.tsx b/app/src/views/reaction-view/ConditionsView.tsx
new file mode 100644
index 00000000..ec8516a6
--- /dev/null
+++ b/app/src/views/reaction-view/ConditionsView.tsx
@@ -0,0 +1,242 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {
+ electrochemType,
+ flowType,
+ illumType,
+ lengthStr,
+ pressureAtmo,
+ pressureSetPoint,
+ pressureType,
+ stirRate,
+ stirType,
+ tempSetPoint,
+ tempType,
+} from '../../utils/conditions';
+import type { ReactionConditionsData } from '../../types/search';
+import './ConditionsView.scss';
+
+interface ConditionsViewProps {
+ conditions: ReactionConditionsData | undefined;
+ display: string;
+}
+
+const ConditionsView: React.FCCompound
+ {component?.amount && Amount
}
+ Role
+ Raw
+
+
+ {component?.amount && {compoundAmount}
}
+ {compoundRole.toLowerCase()}
+
+
+
+ {showRawData && (
+ setShowRawData(true)}
+ >
+ <>
+
+
+ {rawData.identifiers?.map((identifier, index) => (
+
+ {`identifiers: ${JSON.stringify(identifier)}`}
+ ))}
+ {rawData.amount && amount: {JSON.stringify(rawData.amount)}}
+ reaction_role: {rawData.reaction_role}
+ {rawData.is_desired_product && is_desired_product: {rawData.is_desired_product}}
+ {rawData.isolated_color && isolated_color: {rawData.isolated_color}}
+ {rawData.texture && texture: {JSON.stringify(rawData.texture)}}
+ {rawData.preparations?.map((prep, index) => (
+ preparations: {JSON.stringify(prep)}
+ ))}
+
+
+ );
+ }
+
+ if (display === 'pressure') {
+ const p = conditions.pressure;
+ return (
+
+
+ Control Type
+ {tempType(t?.control?.type)}
+ {t?.control?.details && (
+ <>
+ Details
+ {t.control.details}
+
+ )}
+ Setpoint
+ {tempSetPoint(t?.setpoint)}
+ {t?.measurementsList && t.measurementsList.length > 0 && (
+ <>
+ Measurements
+ {/* TODO: render temperature measurements once the schema's shape is fully ported. */}
+ {t.measurementsList.length} recorded
+
+ )}
+
+
+ );
+ }
+
+ if (display === 'stirring') {
+ const s = conditions.stirring;
+ return (
+
+
+ Control Type
+ {pressureType(p?.control?.type)}
+ {p?.control?.details && (
+ <>
+ Details
+ {p.control.details}
+
+ )}
+ Setpoint
+ {pressureSetPoint(p?.setpoint)}
+ Atmosphere
+ {pressureAtmo(p?.atmosphere)}
+ {p?.measurementsList && p.measurementsList.length > 0 && (
+ <>
+ Measurements
+ {/* TODO: render pressure measurements once the schema's shape is fully ported. */}
+ {p.measurementsList.length} recorded
+
+ )}
+
+
+ );
+ }
+
+ if (display === 'illumination') {
+ const i = conditions.illumination;
+ const distance = lengthStr(i?.distanceToVessel);
+ return (
+
+
+ Type
+ {stirType(s?.type)}
+ {s?.details && (
+ <>
+ Details
+ {s.details}
+
+ )}
+ Rate
+ {stirRate(s?.rate) || 'UNSPECIFIED'}
+ {s?.rate?.rpm !== undefined && s.rate.rpm !== 0 && (
+ <>
+ RPM
+ {s.rate.rpm}
+
+ )}
+
+
+ );
+ }
+
+ if (display === 'electrochemistry') {
+ const e = conditions.electrochemistry;
+ return (
+
+
+ Type
+ {illumType(i)}
+ Peak Wavelength
+ {lengthStr(i?.peakWavelength) ?? 'None'}
+ {i?.color && (
+ <>
+ Color
+ {i.color}
+
+ )}
+ Distance to Vessel
+ {distance ?? 'None'}
+
+
+ );
+ }
+
+ if (display === 'flow') {
+ const f = conditions.flow;
+ return (
+
+
+ Type
+ {electrochemType(e?.type)}
+ {e?.details && (
+ <>
+ Details
+ {e.details}
+
+ )}
+ {e?.anodeMaterial && (
+ <>
+ Anode
+ {e.anodeMaterial}
+
+ )}
+ {e?.cathodeMaterial && (
+ <>
+ Cathode
+ {e.cathodeMaterial}
+
+ )}
+ {/* TODO: render current, voltage, electrodeSeparation, and measurementsList. */}
+
+
+ );
+ }
+
+ if (display === 'other') {
+ return (
+
+
+ Type
+ {flowType(f?.type)}
+ {f?.details && (
+ <>
+ Details
+ {f.details}
+
+ )}
+ {f?.pumpType && (
+ <>
+ Pump Type
+ {f.pumpType}
+
+ )}
+ {/* TODO: render tubing dimensions if/when needed. */}
+
+
+ );
+ }
+
+ return null;
+};
+
+export default ConditionsView;
diff --git a/app/src/views/reaction-view/ConditionsView.vue b/app/src/views/reaction-view/ConditionsView.vue
deleted file mode 100644
index 01c87529..00000000
--- a/app/src/views/reaction-view/ConditionsView.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-
-
-
-
-
-.conditions-view
- .temperature.details(v-if='display==="temperature"')
- .label Control Type
- .value {{tempType}}
- template(v-if='conditions.temperature?.control.details')
- .label Details
- .value {{conditions.temperature.control.details}}
- .label Setpoint
- .value {{tempSetPoint}}
- // TODO Flesh out temp measurements
- template(v-if='conditions.temperature?.measurementsList?.length')
- .label Measurements
- .value {{conditions.temperature.measurementsList}}
-
- .pressure.details(v-if='display==="pressure"')
- .label Control Type
- .value {{pressureType}}
- template(v-if='conditions.pressure?.control.details')
- .label Details
- .value {{conditions.pressure.control.details}}
- .label Setpoint
- .value {{pressureSetPoint}}
- .label Atmosphere
- .value {{pressureAtmo}}
- // TODO Flesh out pressure measurements
- template(v-if='conditions.pressure?.measurementsList?.length')
- .label Measurements
- .value {{conditions.pressure.measurementsList}}
-
- .stirring.details(v-if='display==="stirring"')
- .label Type
- .value {{stirType}}
- template(v-if='conditions.stirring?.details')
- .label Details
- .value {{conditions.stirring.details}}
- .label Rate
- .value {{stirRate || "UNSPECIFIED"}}
- template(v-if='conditions.stirring?.rate?.rpm')
- .label RPM
- .value {{conditions.stirring.rate.rpm}}
-
- .illumination.details(v-if='display==="illumination"')
- .label Type
- .value {{illumType}}
- // TODO flesh out wave length
- .label Peak Wavelength
- .value {{conditions.illumination.peakWaveLength || "None"}}
- template(v-if='conditions.illumination?.color')
- .label Color
- .value {{conditions.illumination.color}}
- // TODO flesh out distance
- .label Distance to Vessel
- .value {{conditions.illumination.distanceToVessel || "None"}}
-
- // TODO flesh out electrochemistry
- .electro.details(v-if='display === "electrochemistry"')
- .label Type
- .value {{conditions.electrochemistry}}
-
- // TODO flesh out flow
- .electro.details(v-if='display === "flow"')
- .label Type
- .value {{conditions.flow}}
-
- // TODO flesh out other
- .other.details(v-if='display === "other"')
- template(v-if='conditions.reflux')
- .label Reflux
- .value {{conditions.reflux}}
- template(v-if='conditions.ph')
- .label pH
- .value {{conditions.ph}}
- template(v-if='conditions.conditions_are_dynamic')
- .label Conditions are dynamic
- .value {{conditions.conditions_are_dynamic}}
- template(v-if='conditions.details')
- .label Details
- .value {{conditions.details}}
-
-
-
diff --git a/app/src/views/reaction-view/EventsView.scss b/app/src/views/reaction-view/EventsView.scss
new file mode 100644
index 00000000..5e17ad4b
--- /dev/null
+++ b/app/src/views/reaction-view/EventsView.scss
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../../styles/vars' as vars;
+
+.events-view {
+ .tabs {
+ display: flex;
+ column-gap: 0.5rem;
+ row-gap: 0.5rem;
+ margin-bottom: 0.5rem;
+ flex-wrap: wrap;
+
+ .tab {
+ padding: 0.5rem 1rem;
+ border-radius: 0.25rem;
+ border: 1px solid vars.$medgrey;
+ cursor: pointer;
+ transition: 0.25s;
+
+ &.selected {
+ background-color: vars.$linkblue;
+ color: white;
+ border-color: vars.$linkblue;
+ cursor: default;
+ }
+
+ &.capitalize {
+ text-transform: capitalize;
+ }
+ }
+ }
+
+ .details {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+ }
+}
diff --git a/app/src/views/reaction-view/EventsView.tsx b/app/src/views/reaction-view/EventsView.tsx
new file mode 100644
index 00000000..df161e78
--- /dev/null
+++ b/app/src/views/reaction-view/EventsView.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import type { RecordEvent } from 'ord-schema/proto/reaction_pb';
+import './EventsView.scss';
+
+interface EventsViewProps {
+ events: RecordEvent.AsObject[];
+}
+
+const EventsView: React.FC
+ {conditions.reflux && (
+ <>
+
+ Reflux
+ yes
+
+ )}
+ {/* See WorkupsView for the proto3 zero-default tradeoff: 0 means
+ "default unset" *or* a real, strongly-acidic pH. Match the Vue
+ v-if='conditions.ph' behavior and hide on 0. */}
+ {conditions.ph !== undefined && conditions.ph !== 0 && (
+ <>
+ pH
+ {conditions.ph}
+
+ )}
+ {conditions.conditionsAreDynamic && (
+ <>
+ Conditions are dynamic
+ yes
+
+ )}
+ {conditions.details && (
+ <>
+ Details
+ {conditions.details}
+
+ )}
+
+
+ );
+};
+
+export default EventsView;
diff --git a/app/src/views/reaction-view/EventsView.vue b/app/src/views/reaction-view/EventsView.vue
deleted file mode 100644
index 875872c7..00000000
--- a/app/src/views/reaction-view/EventsView.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-
-
-
-
-
-.events-view
- .tabs
- .tab(
- v-for='(event, idx) in events'
- @click='eventIdx = idx'
- :class='eventIdx === idx ? "selected" : ""'
- ) {{new Date(event.time.value).toLocaleString()}}
- .details
- template(v-if='events[eventIdx].details')
- .label Details
- .value {{events[eventIdx].details}}
- template(v-if='events[eventIdx].person?.username')
- .label Username
- .value {{events[eventIdx].person.username}}
- template(v-if='events[eventIdx].person?.name')
- .label Name
- .value {{events[eventIdx].person.name}}
- template(v-if='events[eventIdx].person?.orcid')
- .label ORCID
- .value {{events[eventIdx].person.orcid}}
- template(v-if='events[eventIdx].person?.organization')
- .label Organization
- .value {{events[eventIdx].person.organization}}
- template(v-if='events[eventIdx].person?.email')
- .label Email
- .value {{events[eventIdx].person.email}}
-
-
-
-
diff --git a/app/src/views/reaction-view/MainReactionView.scss b/app/src/views/reaction-view/MainReactionView.scss
new file mode 100644
index 00000000..7d6d634b
--- /dev/null
+++ b/app/src/views/reaction-view/MainReactionView.scss
@@ -0,0 +1,132 @@
+/*
+ Copyright 2023 Open Reaction Database Project Authors
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+@use '../../styles/vars.scss' as vars;
+@use '../../styles/tabs.scss' as tabs;
+@use '../../styles/transition.scss' as transition;
+
+.main-reaction-view {
+ min-height: 90vh;
+
+ .reaction-transition {
+ margin: 2rem 0;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ }
+
+ .nav-holder {
+ height: 100%;
+
+ .nav {
+ background-color: white;
+ border-radius: 0.25rem;
+ box-sizing: border-box;
+ margin-left: 1rem;
+ min-width: 8rem;
+ width: 15vw;
+ height: auto;
+ max-height: 70vh;
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: sticky;
+ top: 1rem;
+ display: block;
+
+ .nav-item {
+ padding: 0.5rem 1rem;
+ text-transform: capitalize;
+ cursor: pointer;
+ transition: 0.16s;
+ color: black;
+
+ &.active {
+ color: white;
+ background-color: vars.$linkblue;
+ }
+ }
+ }
+ }
+
+ .loading {
+ position: absolute;
+ width: 100%;
+ padding-top: 15vh;
+ }
+
+ .title {
+ font-weight: 700;
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .section,
+ .title {
+ width: calc(85vw - 3rem);
+ min-width: calc(800px - 11rem); // (min main width) - (nav width plus gutters)
+ margin: 0;
+ }
+
+ .section {
+ background-color: white;
+ border-radius: 0.25rem;
+ margin-bottom: 1rem;
+ padding: 1rem;
+ box-sizing: border-box;
+
+ .title {
+ font-size: 1.5rem;
+ }
+
+ &#summary {
+ overflow-x: scroll;
+ }
+
+ .identifiers {
+ display: grid;
+ grid-template-columns: auto auto 1fr;
+ column-gap: 1rem;
+ }
+
+ .input {
+ .details {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ margin-bottom: 1rem;
+
+ .label {
+ &:first-letter {
+ text-transform: uppercase;
+ }
+ }
+ }
+
+ .compound {
+ width: fit-content;
+ }
+ }
+
+ .full-record.button {
+ padding: 0.5rem 1rem;
+ background-color: vars.$linkblue;
+ border-radius: 0.25rem;
+ width: fit-content;
+ color: white;
+ cursor: pointer;
+ }
+ }
+}
diff --git a/app/src/views/reaction-view/MainReactionView.tsx b/app/src/views/reaction-view/MainReactionView.tsx
new file mode 100644
index 00000000..a736d0e9
--- /dev/null
+++ b/app/src/views/reaction-view/MainReactionView.tsx
@@ -0,0 +1,501 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import reaction_pb from 'ord-schema';
+import type { ReactionInput, RecordEvent } from 'ord-schema/proto/reaction_pb';
+import CompoundView from './CompoundView';
+import SetupView from './SetupView';
+import ConditionsView from './ConditionsView';
+import NotesView from './NotesView';
+import ObservationsView from './ObservationsView';
+import WorkupsView from './WorkupsView';
+import OutcomesView from './OutcomesView';
+import ProvenanceView from './ProvenanceView';
+import EventsView from './EventsView';
+import FloatingModal from '../../components/FloatingModal';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import { base64ToBytes } from '../../utils/base64';
+import { enumName } from '../../utils/enum';
+import { formattedTime } from '../../utils/outcomes';
+import type { ReactionData } from '../../types/search';
+import './MainReactionView.scss';
+
+const MainReactionView: React.FC = () => {
+ const { reactionId } = useParams<{ reactionId: string }>();
+ const [reaction, setReaction] = useState
+ {events.map((event, idx) => (
+
+
+ setEventIdx(idx)}
+ >
+ {event.time?.value ? new Date(event.time.value).toLocaleString() : ''}
+
+ ))}
+
+ {currentEvent?.details && (
+ <>
+
+ Details
+ {currentEvent.details}
+
+ )}
+
+ {currentEvent?.person?.username && (
+ <>
+ Username
+ {currentEvent.person.username}
+
+ )}
+
+ {currentEvent?.person?.name && (
+ <>
+ Name
+ {currentEvent.person.name}
+
+ )}
+
+ {currentEvent?.person?.orcid && (
+ <>
+ ORCID
+ {currentEvent.person.orcid}
+
+ )}
+
+ {currentEvent?.person?.organization && (
+ <>
+ Organization
+ {currentEvent.person.organization}
+
+ )}
+
+ {currentEvent?.person?.email && (
+ <>
+ Email
+ {currentEvent.person.email}
+
+ )}
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ );
+};
+
+export default MainReactionView;
diff --git a/app/src/views/reaction-view/MainReactionView.vue b/app/src/views/reaction-view/MainReactionView.vue
deleted file mode 100644
index 4615a840..00000000
--- a/app/src/views/reaction-view/MainReactionView.vue
+++ /dev/null
@@ -1,426 +0,0 @@
-
-
-
-
-
-.main-reaction-view
- transition(name="fade")
- .loading(v-if='loading')
- LoadingSpinner
- transition(name="fade")
- .reaction-transition(v-if='!loading')
- .nav-holder
- .nav
- .nav-item(
- v-for='item in navItems'
- :class='activeNav == item ? "active" : ""'
- @click='scrollTo(item)'
- ) {{item.replaceAll("-"," ")}}
- .content
- .title Summary
- #summary.section
- .summary(v-if='reactionSummary')
- .display(v-html='reactionSummary')
- #identifiers(v-if='reaction?.identifiersList?.length')
- .title Identifiers
- .section
- .identifiers
- template(v-for='identifier in reaction.identifiersList')
- .value {{getReactionType(identifier.type)}}
- .value {{identifier.value}}
- .value {{identifier.details}}
- #inputs(v-if='reaction?.inputsMap?.length')
- .title Inputs
- .section
- .tabs
- .tab(
- v-for='(input, idx) in reaction.inputsMap'
- @click='inputsIdx = idx'
- :class='inputsIdx == idx ? "selected" : ""'
- ) {{input[0]}}
- .input
- .title Details
- .details
- template(v-for='key in Object.keys(displayDetails)')
- .label {{key.replaceAll(/(?=[A-Z])/g, ' ')}}
- .value {{displayDetails[key]}}
- .title Components
- .compound
- template(v-for='component in reaction.inputsMap[inputsIdx][1].componentsList')
- CompoundView(
- :component='component'
- )
- #setup(v-if='reaction?.setup')
- .title Setup
- .section
- .tabs
- template(
- v-for='tab in setupTabs'
- )
- .tab.capitalize(
- @click='setupTab = tab'
- :class='setupTab === tab ? "selected" : ""'
- v-if='tab !== "automation" || reaction.setup.is_automated'
- ) {{tab}}
- .details
- SetupView(
- :setup='reaction.setup'
- :display='setupTab'
- )
- #conditions(v-if='reaction?.conditions')
- .title Conditions
- .section
- .tabs
- template(
- v-for='tab in conditionTabs'
- )
- .tab.capitalize(
- @click='conditionTab = tab'
- :class='conditionTab === tab ? "selected" : ""'
- v-if='reaction.conditions[tab] || (tab === "other" && displayConditionsOther)'
- ) {{tab}}
- .details
- ConditionsView(
- :conditions='reaction.conditions'
- :display='conditionTab'
- )
- #notes(v-if='reaction.notes')
- .title Notes
- .section
- .details
- NotesView(
- :notes='reaction.notes'
- )
- #observations(v-if='reaction.observationsList?.length')
- .title Observations
- .section
- .details
- ObservationsView(
- :observations='reaction.observationsList'
- )
- // TODO flesh out workups section
- #workups(v-if='reaction.workupsList?.length')
- .title Workups
- .section
- .tabs
- .tab.capitalize(
- v-for='(workup, idx) in reaction.workupsList'
- @click='workupsTab = idx'
- :class='workupsTab === idx ? "selected" : ""'
- ) {{getWorkupLabel(workup.type)}}
- .details
- WorkupsView(
- :workup='reaction.workupsList[workupsTab]'
- )
- #outcomes(v-if='reaction.outcomesList?.length')
- .title Outcomes
- .section
- .tabs
- .tab.capitalize(
- v-for='(outcome, idx) in reaction.outcomesList'
- @click='outcomesTab = idx'
- :class='outcomesTab === idx ? "selected" : ""'
- ) Outcome {{idx + 1}}
- .details
- OutcomesView(
- :outcome='reaction.outcomesList[outcomesTab]'
- )
- #provenance(v-if='reaction.provenance')
- .title Provenance
- .section
- ProvenanceView(:provenance='reaction.provenance')
- #events(v-if='events?.length')
- .title Record Events
- .section
- EventsView(:events='events')
- #full-record(v-if='reaction')
- .title Full Record
- .section
- .full-record.button(@click='showRawReaction=true') View Full Record
- FloatingModal(
- v-if='showRawReaction'
- title="Raw Data"
- @closeModal='showRawReaction=false'
- )
- .data
- pre {{reaction}}
-
-
-
diff --git a/app/src/views/reaction-view/NotesView.scss b/app/src/views/reaction-view/NotesView.scss
new file mode 100644
index 00000000..1ea9d69a
--- /dev/null
+++ b/app/src/views/reaction-view/NotesView.scss
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.notes-view {
+ .details {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+
+ .label {
+ &:first-letter {
+ text-transform: capitalize;
+ }
+ }
+ }
+}
diff --git a/app/src/views/reaction-view/NotesView.tsx b/app/src/views/reaction-view/NotesView.tsx
new file mode 100644
index 00000000..3498f9fc
--- /dev/null
+++ b/app/src/views/reaction-view/NotesView.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo } from 'react';
+import type { ReactionNotesData } from '../../types/search';
+import './NotesView.scss';
+
+interface NotesViewProps {
+ notes: ReactionNotesData | undefined;
+}
+
+interface NoteToDisplay {
+ val: string;
+ label: string;
+}
+
+const NotesView: React.FC
+
+
+
+
+
+ {navItems.map(item => (
+
+ scrollTo(item)}
+ >
+ {item.replace(/-/g, ' ')}
+
+ ))}
+
+ setShowRawReaction(false)}
+ >
+
+ )}
+
+ Summary
+
+ {reactionSummary && (
+
+
+ {reaction?.identifiersList && reaction.identifiersList.length > 0 && (
+
+
+
+ )}
+
+
+ )}
+
+ {reaction?.inputsMap && reaction.inputsMap.length > 0 && (
+ Identifiers
+
+
+
+ {reaction.identifiersList.map((identifier, index) => (
+
+
+ ))}
+
+ {getReactionType(identifier.type)}
+ {identifier.value}
+ {identifier.details}
+
+
+ )}
+
+ {reaction?.setup && (
+ Inputs
+
+
+
+ {reaction.inputsMap.map(([key], idx) => (
+
+ setInputsIdx(idx)}
+ >
+ {key}
+
+ ))}
+
+
+ Details
+
+ {Object.keys(displayDetails).map(key => (
+
+
+ ))}
+
+ {key.replace(/(?=[A-Z])/g, ' ')}
+ {displayDetails[key]}
+ Components
+
+ {reaction.inputsMap[inputsIdx][1].componentsList?.map((component, index) => (
+
+
+
+ )}
+
+ {reaction?.conditions && (
+ Setup
+
+
+
+ {setupTabs.map(
+ tab =>
+ (tab !== 'automation' || reaction.setup?.isAutomated) && (
+
+ setSetupTab(tab)}
+ >
+ {tab}
+
+ ),
+ )}
+
+
+
+
+ )}
+
+ {reaction?.notes && (
+ Conditions
+
+
+
+ {conditionTabs.map(
+ tab =>
+ (reaction.conditions?.[tab as keyof typeof reaction.conditions] ||
+ (tab === 'other' && displayConditionsOther)) && (
+
+ setConditionTab(tab)}
+ >
+ {tab}
+
+ ),
+ )}
+
+
+
+
+ )}
+
+ {reaction?.observationsList && reaction.observationsList.length > 0 && (
+ Notes
+
+
+
+
+
+
+ )}
+
+ {reaction?.workupsList && reaction.workupsList.length > 0 && (
+ Observations
+
+
+
+
+
+
+ )}
+
+ {reaction?.outcomesList && reaction.outcomesList.length > 0 && (
+ Workups
+
+
+
+ {reaction.workupsList.map((workup, idx) => (
+
+ setWorkupsTab(idx)}
+ >
+ {getWorkupLabel(workup.type)}
+
+ ))}
+
+
+
+
+ )}
+
+ {reaction?.provenance && (
+ Outcomes
+
+
+
+ {reaction.outcomesList.map((_outcome, idx) => (
+
+ setOutcomesTab(idx)}
+ >
+ Outcome {idx + 1}
+
+ ))}
+
+ {/* key=outcomesTab so the inner tab/modal state resets when the user switches outcomes. */}
+
+
+
+ )}
+
+ {events.length > 0 && (
+ Provenance
+
+
+
+
+ )}
+
+ {reaction && (
+ Record Events
+
+
+
+
+ )}
+
+ {showRawReaction && reaction && (
+ Full Record
+
+
+ setShowRawReaction(true)}
+ >
+ View Full Record
+
+
+
+ {JSON.stringify(reaction, null, 2)}
+
+
+ );
+};
+
+export default NotesView;
diff --git a/app/src/views/reaction-view/NotesView.vue b/app/src/views/reaction-view/NotesView.vue
deleted file mode 100644
index 9c02e694..00000000
--- a/app/src/views/reaction-view/NotesView.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
-
-
-
-.notes-view
- .details
- template(v-for='note in notesToDisplay')
- .label {{note.label}}
- .value {{note.val}}
-
-
-
diff --git a/app/src/views/reaction-view/ObservationsView.scss b/app/src/views/reaction-view/ObservationsView.scss
new file mode 100644
index 00000000..a729f126
--- /dev/null
+++ b/app/src/views/reaction-view/ObservationsView.scss
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.observations-view {
+ .details {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+
+ .label {
+ font-weight: bold;
+ }
+ }
+}
diff --git a/app/src/views/reaction-view/ObservationsView.tsx b/app/src/views/reaction-view/ObservationsView.tsx
new file mode 100644
index 00000000..7d297180
--- /dev/null
+++ b/app/src/views/reaction-view/ObservationsView.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { formattedTime } from '../../utils/outcomes';
+import type { ReactionObservationData } from '../../types/search';
+import './ObservationsView.scss';
+
+interface ObservationsViewProps {
+ observations: ReactionObservationData[];
+}
+
+const ObservationsView: React.FC
+ {notesToDisplay.map((note, index) => (
+
+
+ ))}
+
+ {note.label}
+ {note.val}
+
+
+ );
+};
+
+export default ObservationsView;
diff --git a/app/src/views/reaction-view/ObservationsView.vue b/app/src/views/reaction-view/ObservationsView.vue
deleted file mode 100644
index 9baba981..00000000
--- a/app/src/views/reaction-view/ObservationsView.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-
-
-
-
-
-.notes-view
- .details
- .label Time
- .label Comment
- template(v-for='obs in observations')
- .value {{getTime(obs.time)}}
- .value {{obs.comment}}
-
-
-
diff --git a/app/src/views/reaction-view/OutcomesView.scss b/app/src/views/reaction-view/OutcomesView.scss
new file mode 100644
index 00000000..d553c968
--- /dev/null
+++ b/app/src/views/reaction-view/OutcomesView.scss
@@ -0,0 +1,78 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../../styles/vars' as vars;
+
+.outcomes-view {
+ .title {
+ font-weight: 700;
+ font-size: 1.5rem;
+ margin-bottom: 0.25rem;
+ margin-top: 1rem;
+ }
+
+ .details {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+
+ > * {
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ .sub-section {
+ border: 1px solid vars.$medgrey;
+ border-radius: 0.25rem;
+ padding: 1rem;
+
+ .compound {
+ width: fit-content;
+ }
+
+ .sub-title {
+ font-size: 1.25rem;
+ font-weight: 700;
+ }
+
+ .measurements {
+ display: grid;
+ grid-template-columns: repeat(4, auto) 1fr;
+ column-gap: 0.5rem;
+ row-gap: 1rem;
+ padding: 0.5rem;
+ width: fit-content;
+ align-items: center;
+
+ .label {
+ font-weight: 700;
+ }
+ }
+
+ .raw {
+ .button {
+ padding: 0.5rem;
+ background-color: vars.$darkgrey;
+ color: white;
+ border-radius: 0.25rem;
+ cursor: pointer;
+ width: fit-content;
+ }
+ }
+ }
+}
diff --git a/app/src/views/reaction-view/OutcomesView.tsx b/app/src/views/reaction-view/OutcomesView.tsx
new file mode 100644
index 00000000..173cfe80
--- /dev/null
+++ b/app/src/views/reaction-view/OutcomesView.tsx
@@ -0,0 +1,236 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import reaction_pb from 'ord-schema';
+import type { Analysis, ProductMeasurement } from 'ord-schema/proto/reaction_pb';
+import CompoundView from './CompoundView';
+import FloatingModal from '../../components/FloatingModal';
+import { amountObj, amountStr } from '../../utils/amount';
+import { enumName } from '../../utils/enum';
+import { formatPercentage, formattedTime } from '../../utils/outcomes';
+import type { ReactionOutcomeData } from '../../types/search';
+import './OutcomesView.scss';
+
+interface OutcomesViewProps {
+ outcome: ReactionOutcomeData | undefined;
+}
+
+const measurementType = (type: number | undefined): string =>
+ enumName(reaction_pb.ProductMeasurement.ProductMeasurementType, type) ?? '';
+
+const analysisType = (type: number | undefined): string => enumName(reaction_pb.Analysis.AnalysisType, type) ?? '';
+
+const measurementValue = (measurement: ProductMeasurement.AsObject): string => {
+ if (measurement.percentage) return formatPercentage(measurement.percentage);
+ if (measurement.amount) return amountStr(amountObj(measurement.amount));
+ if (measurement.floatValue) return String(measurement.floatValue.value);
+ if (measurement.stringValue) return measurement.stringValue;
+ return '';
+};
+
+const measurementWithNamedType = (measurement: ProductMeasurement.AsObject) => ({
+ ...measurement,
+ type: measurementType(measurement.type),
+});
+
+const analysisWithNamedType = (analysis: Analysis.AsObject) => ({
+ ...analysis,
+ type: analysisType(analysis.type),
+});
+
+const OutcomesView: React.FC
+
+
+ ))}
+
+ Time
+ Comment
+ {observations.map((obs, idx) => (
+ {formattedTime(obs.time) ?? ''}
+ {obs.comment}
+
+ {showDetails && (
+ <>
+ setRawAnalysis(null)}
+ >
+
+ )}
+
+ )}
+
+ );
+};
+
+export default OutcomesView;
diff --git a/app/src/views/reaction-view/OutcomesView.vue b/app/src/views/reaction-view/OutcomesView.vue
deleted file mode 100644
index bb20d2d8..00000000
--- a/app/src/views/reaction-view/OutcomesView.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-
-
-
-
-
-.outcomes-view
- template(v-if='outcome.reactionTime || outcome.conversion')
- .title Details
- .details
- template(v-if='outcome.reactionTime')
- .label Reaction Time
- .value {{reactionTime}}
- template(v-if='outcome.conversion')
- .label Conversion
- .value {{outcome.conversion.value}} {{isNaN(outcome.conversion.precision) ? "" : `± ${outcome.conversion.precision}`}}
- .title Products
- .sub-section
- .tabs
- .tab(
- v-for='(product, idx) in outcome.productsList'
- @click='productsIdx = idx'
- :class='productsIdx === idx ? "selected" : ""'
- ) Product {{idx + 1}}
- .compound
- CompoundView(
- :component='outcome.productsList[productsIdx]'
- )
- .sub-title Measurements
- .measurements
- .label Type
- .label
- .label Value
- .label Analysis
- .label Raw
- template(v-for='measurement in outcome.productsList[productsIdx].measurementsList')
- .value(v-if='getMeasurementType(measurement.type) == CUSTOM')
- .button(@click='setCustomMeasurementDetails(measurement)') {{'CUSTOM'}}
- .value(v-else) {{getMeasurementType(measurement.type)}}
- .value
- .value {{getMeasurementValue(measurement)}}
- .value {{measurement.analysisKey}}
- .value
- .raw
- .button(@click='setRawMeasurement(measurement)') <>
- floating-modal(
- v-if='showRawMeasurement'
- title="Raw Data"
- @closeModal='showRawMeasurement=false'
- )
- .data
- pre {{rawMeasurement}}
- floating-modal(
- v-if='showCustomMeasurementDetails'
- title="Custom Measurement Details"
- @closeModal='showCustomMeasurementDetails=false'
- )
- .data
- pre {{customMeasurementDetails}}
- template(v-if='outcome.analysesMap?.length')
- .title Analyses
- .sub-section
- .tabs
- .tab(
- v-for='(analysis, idx) in outcome.analysesMap'
- @click='analysesIdx = idx'
- :class='analysesIdx === idx ? "selected" : ""'
- ) {{analysis[0]}}
- .details
- .label Type
- .value {{getAnalysisType(outcome.analysesMap[analysesIdx][1].type)}}
- .label Details
- .value {{outcome.analysesMap[analysesIdx][1].details}}
- .label Raw
- .value
- .raw
- .button(@click='setRawAnalysis(outcome.analysesMap[analysesIdx][1])') <>
- floating-modal(
- v-if='showRawAnalysis'
- title="Raw Data"
- @closeModal='showRawAnalysis=false'
- )
- .data
- pre {{rawAnalysis}}
-
-
-
-
-
diff --git a/app/src/views/reaction-view/ProvenanceView.scss b/app/src/views/reaction-view/ProvenanceView.scss
new file mode 100644
index 00000000..8a94fd2f
--- /dev/null
+++ b/app/src/views/reaction-view/ProvenanceView.scss
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.provenance-view {
+ .title {
+ font-weight: 700;
+ font-size: 1.5rem;
+ margin-bottom: 0.25rem;
+ }
+
+ .details {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+
+ &.experimenter {
+ grid-template-columns: repeat(4, auto) 1fr;
+
+ .label {
+ font-weight: 700;
+ }
+ }
+ }
+}
diff --git a/app/src/views/reaction-view/ProvenanceView.tsx b/app/src/views/reaction-view/ProvenanceView.tsx
new file mode 100644
index 00000000..a2b6db56
--- /dev/null
+++ b/app/src/views/reaction-view/ProvenanceView.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import type { ReactionProvenanceData } from '../../types/search';
+import './ProvenanceView.scss';
+
+interface ProvenanceViewProps {
+ provenance: ReactionProvenanceData | undefined;
+}
+
+const ProvenanceView: React.FCDetails
+
+ {reactionTime && (
+ <>
+
+
+ )}
+
+ Reaction Time
+ {reactionTime}
+
+ )}
+ {conversion && (
+ <>
+ Conversion
+ {formatPercentage(conversion)}
+
+ )}
+ Products
+
+ setRawMeasurement(null)}
+ >
+
+ )}
+
+ {customDetails !== null && (
+ setCustomDetails(null)}
+ >
+
+ )}
+
+
+ {outcome.analysesMap && outcome.analysesMap.length > 0 && (
+ <>
+
+ {outcome.productsList?.map((_product, idx) => (
+
+
+ {currentProduct && (
+ <>
+ setProductsIdx(idx)}
+ >
+ Product {idx + 1}
+
+ ))}
+
+
+
+ Measurements
+
+
+ {typeName === 'CUSTOM' ? (
+
+ );
+ })}
+
+
+ )}
+
+ {rawMeasurement && (
+ Type
+
+ Value
+ Analysis
+ Raw
+ {currentProduct.measurementsList.map((measurement, idx) => {
+ const typeName = measurementType(measurement.type);
+ return (
+
+
+ ) : (
+
+ setCustomDetails(
+ measurement.details ||
+ 'Please contact the author for details on this custom measurement.',
+ )
+ }
+ >
+ CUSTOM
+
+ {typeName}
+ )}
+
+ {measurementValue(measurement)}
+ {measurement.analysisKey}
+
+
+
+
+ setRawMeasurement(measurementWithNamedType(measurement))}
+ >
+ <>
+
+
+
+ {JSON.stringify(rawMeasurement, null, 2)}
+
+
+ {customDetails}
+ Analyses
+
+
+
+ {rawAnalysis && (
+
+ {outcome.analysesMap.map(([key], idx) => (
+
+ {currentAnalysis && (
+ setAnalysesIdx(idx)}
+ >
+ {key}
+
+ ))}
+
+
+ )}
+ Type
+ {analysisType(currentAnalysis.type)}
+ Details
+ {currentAnalysis.details}
+ Raw
+
+
+
+
+ setRawAnalysis(analysisWithNamedType(currentAnalysis))}
+ >
+ <>
+
+
+
+ {JSON.stringify(rawAnalysis, null, 2)}
+
+ {provenance?.experimenter && (
+ <>
+
+ );
+};
+
+export default ProvenanceView;
diff --git a/app/src/views/reaction-view/ProvenanceView.vue b/app/src/views/reaction-view/ProvenanceView.vue
deleted file mode 100644
index 9d98b224..00000000
--- a/app/src/views/reaction-view/ProvenanceView.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-
-
-
-
-
-.provenance-view
- template(v-if='provenance.experimenter')
- .title Experimenter
- .details.experimenter
- .label Username
- .label Name
- .label ORCID
- .label Organization
- .label Email
- .value {{provenance.experimenter.username}}
- .value {{provenance.experimenter.name}}
- .value {{provenance.experimenter.orcid}}
- .value {{provenance.experimenter.organization}}
- .value {{provenance.experimenter.email}}
- .details
- template(v-if='provenance.city')
- .label City
- .value {{provenance.city}}
- template(v-if='provenance.experimentStart')
- .label City
- .value {{new Date(provenance.experimentStart).toLocaleDateString()}}
- template(v-if='provenance.doi')
- .label DOI
- .value {{provenance.doi}}
- template(v-if='provenance.patent')
- .label Patent
- .value {{provenance.patent}}
- template(v-if='provenance.publicationUrl')
- .label Publication URL
- .value
- a(:href='provenance.publicationUrl' target="_blank") {{provenance.publicationUrl}}
-
-
-
diff --git a/app/src/views/reaction-view/SetupView.scss b/app/src/views/reaction-view/SetupView.scss
new file mode 100644
index 00000000..c8003892
--- /dev/null
+++ b/app/src/views/reaction-view/SetupView.scss
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.setup-view {
+ .details {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+ }
+}
diff --git a/app/src/views/reaction-view/SetupView.tsx b/app/src/views/reaction-view/SetupView.tsx
new file mode 100644
index 00000000..6fd85a1f
--- /dev/null
+++ b/app/src/views/reaction-view/SetupView.tsx
@@ -0,0 +1,135 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo } from 'react';
+import reaction_pb from 'ord-schema';
+import { enumName } from '../../utils/enum';
+import type { ReactionSetupData } from '../../types/search';
+import './SetupView.scss';
+
+interface SetupViewProps {
+ setup: ReactionSetupData | undefined;
+ display: string;
+}
+
+const SetupView: React.FCExperimenter
+
+
+
+ )}
+
+ Username
+ Name
+ ORCID
+ Organization
+ Email
+ {provenance.experimenter.username}
+ {provenance.experimenter.name}
+ {provenance.experimenter.orcid}
+ {provenance.experimenter.organization}
+ {provenance.experimenter.email}
+
+ {provenance?.city && (
+ <>
+
+ City
+ {provenance.city}
+
+ )}
+
+ {provenance?.experimentStart?.value && (
+ <>
+ Experiment Start
+ {new Date(provenance.experimentStart.value).toLocaleDateString()}
+
+ )}
+
+ {provenance?.doi && (
+ <>
+ DOI
+ {provenance.doi}
+
+ )}
+
+ {provenance?.patent && (
+ <>
+ Patent
+ {provenance.patent}
+
+ )}
+
+ {provenance?.publicationUrl && (
+ <>
+ Publication URL
+
+
+ )}
+
+ {display === 'vessel' && (
+
+ );
+};
+
+export default SetupView;
diff --git a/app/src/views/reaction-view/SetupView.vue b/app/src/views/reaction-view/SetupView.vue
deleted file mode 100644
index 6081290d..00000000
--- a/app/src/views/reaction-view/SetupView.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-
-
-
-
-
-.setup-view
- .vessel.details(v-if='display=="vessel"')
- .label Type
- .value {{vesselType}}
- template(v-if='vessel.details')
- .label Details
- .value {{vessel.details}}
- .label Material
- .value {{vesselMaterial || "UNSPECIFIED"}}
- .label Volume
- .value {{vesselVolume}}
- template(v-if='vessel.attachmentsList?.length')
- .label Attachments
- .value {{vesselAttachments}}
- template(v-if='vessel.preparationsList?.length')
- .label Preparations
- .value {{vesselPrep}}
- .environment.details(v-if='display=="environment"')
- .label Type
- .value {{reactionEnv || "UNSPECIFIED"}}
- template(v-if='setup.environment?.details')
- .label Details
- .value {{setup.environment.details}}
- .automated.details(v-if='display=="automated"')
- .label Platform
- .value {{setup.automation_platform || "UNSPECIFIED"}}
-
-
-
diff --git a/app/src/views/reaction-view/WorkupsView.scss b/app/src/views/reaction-view/WorkupsView.scss
new file mode 100644
index 00000000..6641c3a9
--- /dev/null
+++ b/app/src/views/reaction-view/WorkupsView.scss
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.workups-view {
+ .details {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+ }
+
+ .inputs {
+ margin-top: 0.5rem;
+
+ .title {
+ font-weight: 700;
+ }
+
+ .components {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+ }
+ }
+}
diff --git a/app/src/views/reaction-view/WorkupsView.tsx b/app/src/views/reaction-view/WorkupsView.tsx
new file mode 100644
index 00000000..7bff7ee0
--- /dev/null
+++ b/app/src/views/reaction-view/WorkupsView.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import reaction_pb from 'ord-schema';
+import type { CompoundIdentifier } from 'ord-schema/proto/reaction_pb';
+import { amountObj, amountStr } from '../../utils/amount';
+import { enumName } from '../../utils/enum';
+import { formattedTime } from '../../utils/outcomes';
+import type { ReactionWorkupData } from '../../types/search';
+import './WorkupsView.scss';
+
+interface WorkupsViewProps {
+ workup: ReactionWorkupData | undefined;
+}
+
+const NAME_IDENTIFIER_TYPE = reaction_pb.CompoundIdentifier.CompoundIdentifierType.NAME;
+
+const getNameIdentifier = (identifiers: CompoundIdentifier.AsObject[]): string => {
+ // Falls back to the first identifier when the compound has no NAME entry,
+ // rather than throwing the way the Vue source did.
+ const nameIdentifier = identifiers.find(identifier => identifier.type === NAME_IDENTIFIER_TYPE);
+ return nameIdentifier?.value ?? identifiers[0]?.value ?? '';
+};
+
+const WorkupsView: React.FC
+
+ )}
+
+ {display === 'environment' && (
+ Type
+ {vesselType}
+
+ {vessel?.details && (
+ <>
+ Details
+ {vessel.details}
+
+ )}
+
+ Material
+ {vesselMaterial || 'UNSPECIFIED'}
+
+ Volume
+ {vesselVolume}
+
+ {vessel?.attachmentsList && vessel.attachmentsList.length > 0 && (
+ <>
+ Attachments
+ {vesselAttachments}
+
+ )}
+
+ {vessel?.preparationsList && vessel.preparationsList.length > 0 && (
+ <>
+ Preparations
+ {vesselPrep}
+
+ )}
+
+
+ )}
+
+ {display === 'automation' && (
+ Type
+ {reactionEnv || 'UNSPECIFIED'}
+
+ {setup?.environment?.details && (
+ <>
+ Details
+ {setup.environment.details}
+
+ )}
+
+
+ )}
+ Platform
+ {setup?.automationPlatform || 'UNSPECIFIED'}
+
+
+ );
+};
+
+export default WorkupsView;
diff --git a/app/src/views/reaction-view/WorkupsView.vue b/app/src/views/reaction-view/WorkupsView.vue
deleted file mode 100644
index ac2eb985..00000000
--- a/app/src/views/reaction-view/WorkupsView.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-
-
-
-
-
-.workups-view
- .details
- .label Type
- .value {{workupType}}
- template(v-if='workup.details')
- .label Details
- .value {{workup.details}}
- template(v-if='workup.duration')
- .label Duration
- .value {{workup.duration}}
- template(v-if='workup.amount')
- .label Aliquot amount
- .value {{workup.amount}}
- template(v-if='workup.keepPhase')
- .label Phase kept
- .value {{workup.keepPhase}}
- template(v-if='workup.targetPh')
- .label Target pH
- .value {{workup.targetPh}}
- template(v-if='workup.isAutomated')
- .label Automated
- .value {{workup.Automated}}
- .inputs(v-if='workup.input')
- .title Inputs
- .components
- template(v-for='component in workup.input.componentsList')
- .identifier {{getIdentifier(component.identifiersList)}}
- .amount {{getAmount(component.amount)}}
-
-
-
-
diff --git a/app/src/views/search/MainSearch.scss b/app/src/views/search/MainSearch.scss
new file mode 100644
index 00000000..f38e73ae
--- /dev/null
+++ b/app/src/views/search/MainSearch.scss
@@ -0,0 +1,99 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../../styles/vars';
+
+#search-main {
+ width: 95%;
+ margin: 1rem 2.5%;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ min-width: 800px;
+
+ .search-options-container {
+ .title {
+ font-size: 2rem;
+ font-weight: 700;
+ margin-bottom: 0.85rem;
+ }
+
+ .options-holder {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 1rem;
+ background-color: white;
+ padding: 1rem;
+ box-sizing: border-box;
+ border-radius: 0.25rem;
+ overflow-y: auto;
+ }
+ }
+
+ .no-results {
+ margin-top: 1rem;
+ text-align: center;
+ }
+
+ @media (max-width: 1000px) {
+ grid-template-columns: 1fr;
+
+ .title {
+ display: none;
+ }
+
+ .search-options-container {
+ position: fixed;
+ height: 100vh;
+ width: 90%;
+ transition: 0.5s;
+ top: 0;
+
+ &.hidden {
+ left: -81%;
+ }
+
+ &.slide-out {
+ left: 0;
+ }
+
+ .options-holder {
+ width: 90%;
+ height: 100%;
+ overflow-y: auto;
+ box-shadow: 0 0 5px $darkgrey;
+ }
+
+ .slide-out-tab {
+ background-color: white;
+ position: absolute;
+ left: 89.5%;
+ width: 7.5%;
+ top: 4rem;
+ box-shadow: 6px 3px 5px #ccc;
+ padding: 0.5rem 0;
+ border-bottom-right-radius: 0.25rem;
+
+ .line {
+ background-color: black;
+ height: 2px;
+ width: 60%;
+ margin: 0.5rem auto;
+ }
+ }
+ }
+ }
+}
diff --git a/app/src/views/search/MainSearch.tsx b/app/src/views/search/MainSearch.tsx
new file mode 100644
index 00000000..12237f1e
--- /dev/null
+++ b/app/src/views/search/MainSearch.tsx
@@ -0,0 +1,151 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import SearchOptions from './SearchOptions';
+import SearchResults from './SearchResults';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import { useSearchTask } from '../../hooks/useSearchTask';
+import './MainSearch.scss';
+
+interface SearchOptionsData {
+ reagent: {
+ reagents: Array<{ smileSmart: string; source: string; matchMode: string }>;
+ useStereochemistry: boolean;
+ similarityThreshold: number;
+ };
+ reaction: {
+ reactionIds: string[];
+ reactionSmarts: string[];
+ min_yield: number;
+ max_yield: number;
+ min_conversion: number;
+ max_conversion: number;
+ };
+ dataset: {
+ datasetIds: string[];
+ DOIs: string[];
+ };
+ general: {
+ limit: number;
+ };
+}
+
+const MEANINGFUL_QUERY_PARAMS = [
+ 'component',
+ 'dataset_id',
+ 'doi',
+ 'reaction_id',
+ 'reaction_smarts',
+ 'min_yield',
+ 'max_yield',
+ 'min_conversion',
+ 'max_conversion',
+];
+
+const MainSearch: React.FC = () => {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const [showOptions, setShowOptions] = useState(false);
+
+ const hasSearchParams = useMemo(() => {
+ const params = new URLSearchParams(location.search);
+ return MEANINGFUL_QUERY_PARAMS.some(param => params.has(param));
+ }, [location.search]);
+
+ const { data, isFetching, error } = useSearchTask(location.search, hasSearchParams);
+ const searchResults = data?.status === 'success' ? data.results : [];
+ const loading = hasSearchParams && (isFetching || data?.status === 'pending');
+
+ const updateSearchOptions = (options: SearchOptionsData) => {
+ const searchParams = new URLSearchParams();
+
+ if (options.reagent.reagents.length) {
+ options.reagent.reagents.forEach(reagent => {
+ searchParams.append('component', `${reagent.smileSmart};${reagent.source};${reagent.matchMode.toLowerCase()}`);
+ });
+ searchParams.set('use_stereochemistry', options.reagent.useStereochemistry.toString());
+ searchParams.set('similarity', options.reagent.similarityThreshold.toString());
+ }
+
+ options.dataset.datasetIds.forEach(id => searchParams.append('dataset_id', id));
+ options.dataset.DOIs.forEach(doi => searchParams.append('doi', doi));
+ options.reaction.reactionIds.forEach(id => searchParams.append('reaction_id', id));
+ options.reaction.reactionSmarts.forEach(smarts => searchParams.append('reaction_smarts', smarts));
+
+ // Yield/conversion: only include when narrower than the full 0-100 range.
+ if (options.reaction.min_yield !== 0 || options.reaction.max_yield !== 100) {
+ searchParams.set('min_yield', options.reaction.min_yield.toString());
+ searchParams.set('max_yield', options.reaction.max_yield.toString());
+ }
+ if (options.reaction.min_conversion !== 0 || options.reaction.max_conversion !== 100) {
+ searchParams.set('min_conversion', options.reaction.min_conversion.toString());
+ searchParams.set('max_conversion', options.reaction.max_conversion.toString());
+ }
+
+ searchParams.set('limit', options.general.limit.toString() || '100');
+
+ navigate({ pathname: '/search', search: searchParams.toString() });
+ };
+
+ return (
+
+
+
+ {workup.input && workup.input.componentsList.length > 0 && (
+ Type
+ {workupType}
+
+ {workup.details && (
+ <>
+ Details
+ {workup.details}
+
+ )}
+
+ {duration && (
+ <>
+ Duration
+ {duration}
+
+ )}
+
+ {aliquotAmount && (
+ <>
+ Aliquot amount
+ {aliquotAmount}
+
+ )}
+
+ {workup.keepPhase && (
+ <>
+ Phase kept
+ {workup.keepPhase}
+
+ )}
+
+ {/* proto3 defaults targetPh to 0 when unset, so 0 is ambiguous (default
+ vs. "actually strongly acidic"). Match the Vue v-if='workup.targetPh'
+ behavior and hide on 0; if a record ever sets it to 0 explicitly,
+ we'll need a `has*` helper from the schema to disambiguate. */}
+ {workup.targetPh !== undefined && workup.targetPh !== 0 && (
+ <>
+ Target pH
+ {workup.targetPh}
+
+ )}
+
+ {workup.isAutomated && (
+ <>
+ Automated
+ yes
+
+ )}
+
+
+ )}
+ Inputs
+
+ {workup.input.componentsList.map((component, idx) => (
+
+
+ ))}
+
+ {getNameIdentifier(component.identifiersList)}
+ {amountStr(amountObj(component.amount))}
+
+
+ );
+};
+
+export default MainSearch;
diff --git a/app/src/views/search/MainSearch.vue b/app/src/views/search/MainSearch.vue
deleted file mode 100644
index d4638bdc..00000000
--- a/app/src/views/search/MainSearch.vue
+++ /dev/null
@@ -1,286 +0,0 @@
-
-
-
-
-
-#search-main
- .search-options-container(:class='showOptions ? "slide-out" : "hidden"')
- .title Filters & Options
- .options-holder
- SearchOptions(
- @searchOptions='updateSearchOptions'
- )
- .slide-out-tab(@click='showOptions=!showOptions')
- .line
- .line
- .line
- .search-results
- SearchResults(
- :searchResults='searchResults'
- v-if='!loading && searchResults?.length'
- )
- .no-results(v-else-if='!loading && !searchResults?.length && !urlQuery')
- .title Configure the filters on the left to search the database.
- .no-results(v-else-if='!loading && !searchResults?.length')
- .title No results. Adjust the filters and options and search again.
- .loading(v-else)
- LoadingSpinner
-
-
-
-
diff --git a/app/src/views/search/SearchItemList.scss b/app/src/views/search/SearchItemList.scss
new file mode 100644
index 00000000..1f7e6259
--- /dev/null
+++ b/app/src/views/search/SearchItemList.scss
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.item-list {
+ .title {
+ font-size: 1.25rem;
+ font-weight: 700;
+ }
+
+ .list {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 0.5rem;
+ row-gap: 0.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .input {
+ display: flex;
+
+ button {
+ display: flex;
+ align-items: center;
+ margin-left: 0.5rem;
+
+ i {
+ font-size: 1.1rem;
+ }
+ }
+ }
+}
diff --git a/app/src/views/search/SearchItemList.tsx b/app/src/views/search/SearchItemList.tsx
new file mode 100644
index 00000000..0c2dcd81
--- /dev/null
+++ b/app/src/views/search/SearchItemList.tsx
@@ -0,0 +1,87 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect } from 'react';
+import './SearchItemList.scss';
+
+interface SearchItemListProps {
+ title: string;
+ itemList: string[];
+ onUpdateItemList: (newList: string[]) => void;
+}
+
+const SearchItemList: React.FC
+
+
+ Filters & Options
+
+
+ setShowOptions(!showOptions)}
+ >
+
+
+
+
+
+ {!hasSearchParams && (
+
+
+
+ )}
+ {hasSearchParams && error && (
+ Enter search criteria using the filters and options panel, then click Search.
+
+
+ )}
+ {hasSearchParams && !error && !loading && searchResults.length > 0 && (
+ Search failed: {error.message}
+
+
+ )}
+ {hasSearchParams && !error && loading && (
+ No results. Adjust the filters and options and search again.
+
+
+ )}
+
+
+ );
+};
+
+export default SearchItemList;
diff --git a/app/src/views/search/SearchItemList.vue b/app/src/views/search/SearchItemList.vue
deleted file mode 100644
index b34ff8b9..00000000
--- a/app/src/views/search/SearchItemList.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-
-
-
-
-
-.item-list
- .title {{title}}
- .list
- template(v-for='(item, idx) in mutatedList')
- .text {{item}}
- .delete
- button(@click='deleteItem(idx)')
- i.material-icons delete
- .input
- input(
- type="text"
- v-model='itemToAdd'
- )
- button(@click='updateList')
- i.material-icons add
- span Add
-
-
-
diff --git a/app/src/views/search/SearchOptions.scss b/app/src/views/search/SearchOptions.scss
new file mode 100644
index 00000000..8449014e
--- /dev/null
+++ b/app/src/views/search/SearchOptions.scss
@@ -0,0 +1,205 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../../styles/vars';
+@import '../../styles/transition';
+@import '../../styles/tabs';
+
+.search-options {
+ max-height: 90vh;
+
+ .options-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ cursor: pointer;
+ padding: 0.5rem 1rem;
+ border-top-left-radius: 0.25rem;
+ border-top-right-radius: 0.25rem;
+ margin-top: 1rem;
+ color: white;
+ background-color: $linkblue;
+ display: flex;
+ align-content: center;
+ justify-content: space-between;
+ width: 100%;
+ box-sizing: border-box;
+ transition: 0.25s;
+
+ i {
+ font-size: 2rem;
+ transition: 0.25s;
+ }
+
+ &.closed {
+ border-radius: 0.25rem;
+
+ i {
+ transform: rotate(180deg);
+ }
+ }
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &#searchParameters {
+ cursor: default;
+ }
+ }
+
+ .options-container {
+ background-color: white;
+ border-bottom-left-radius: 0.25rem;
+ border-bottom-right-radius: 0.25rem;
+ padding: 1rem;
+ margin-bottom: 1rem;
+ display: grid;
+ row-gap: 1rem;
+ border: 1px solid $medgrey;
+
+ .subtitle {
+ font-size: 1.25rem;
+ font-weight: 700;
+ margin-bottom: 0.5rem;
+ }
+
+ .options {
+ margin-left: 1rem;
+ }
+
+ button {
+ display: flex;
+ align-items: center;
+
+ i {
+ font-size: 1.1rem;
+ }
+ }
+
+ input,
+ select {
+ font-size: 1rem;
+ }
+
+ .search-button {
+ grid-column: 1 / 2;
+ margin-top: 1rem;
+
+ button {
+ font-size: 1.2rem;
+ padding: 0.5rem 1rem;
+ }
+ }
+ }
+
+ #searchByReagent {
+ .reagent.options {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+ align-items: center;
+
+ .label {
+ font-size: 1.1rem;
+ }
+
+ #add-component,
+ .copy {
+ grid-column: 1 / 4;
+ }
+
+ .field.long {
+ min-width: 250px;
+
+ input {
+ width: 95%;
+ }
+ }
+ }
+
+ .general.options {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+
+ input[type='checkbox'] {
+ max-width: 15px;
+ text-align: center;
+ }
+
+ .slider-input {
+ display: flex;
+ column-gap: 0.5rem;
+
+ #similarity {
+ max-width: 8rem;
+ }
+ }
+ }
+ }
+
+ #searchByReaction {
+ .slider-input {
+ display: grid;
+ grid-template-columns: 10rem 2.5rem 1fr;
+ column-gap: 0.5rem;
+
+ .value {
+ text-align: right;
+ }
+
+ &.multi {
+ grid-template-columns: 4rem 6rem 1fr;
+ align-items: center;
+
+ .range-container {
+ display: flex;
+ align-items: center;
+ padding: 10px 0;
+
+ /* Ensure the range slider takes full width */
+ > div {
+ width: 100%;
+ }
+
+ .range-track {
+ height: 6px;
+ width: 100%;
+ background-color: #ccc;
+ border-radius: 3px;
+ }
+
+ .range-thumb {
+ height: 20px;
+ width: 20px;
+ background-color: $linkblue;
+ border-radius: 50%;
+ border: 2px solid white;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+ cursor: pointer;
+
+ &:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/app/src/views/search/SearchOptions.tsx b/app/src/views/search/SearchOptions.tsx
new file mode 100644
index 00000000..6e50d794
--- /dev/null
+++ b/app/src/views/search/SearchOptions.tsx
@@ -0,0 +1,612 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Range } from 'react-range';
+import ModalKetcher from '../../components/ModalKetcher';
+import SearchItemList from './SearchItemList';
+import './SearchOptions.scss';
+
+interface ReagentComponent {
+ smileSmart: string;
+ source: string;
+ matchMode?: string;
+}
+
+interface ReagentOptions {
+ reactants: ReagentComponent[];
+ products: ReagentComponent[];
+ matchMode: string;
+ useStereochemistry: boolean;
+ similarityThreshold: number;
+}
+
+interface ReactionOptions {
+ reactionIds: string[];
+ reactionSmarts: string[];
+ min_yield: number;
+ max_yield: number;
+ min_conversion: number;
+ max_conversion: number;
+}
+
+interface DatasetOptions {
+ datasetIds: string[];
+ DOIs: string[];
+}
+
+interface SearchParams {
+ limit: number;
+}
+
+interface SearchOptionsData {
+ reagent: {
+ reagents: Array<{ smileSmart: string; source: string; matchMode: string }>;
+ useStereochemistry: boolean;
+ similarityThreshold: number;
+ };
+ reaction: ReactionOptions;
+ dataset: DatasetOptions;
+ general: SearchParams;
+}
+
+interface SearchOptionsProps {
+ onSearchOptions: (options: SearchOptionsData) => void;
+}
+
+const SearchOptions: React.FC{title}
+
+ {mutatedList.map((item, idx) => (
+
+
+ ))}
+
+ {item}
+
+
+
+
+ setItemToAdd(e.target.value)}
+ onKeyPress={handleKeyPress}
+ />
+
+
+
+ {/* Components Section */}
+ setShowKetcherModal(false)}
+ />
+ )}
+
+ );
+};
+
+export default SearchOptions;
diff --git a/app/src/views/search/SearchOptions.vue b/app/src/views/search/SearchOptions.vue
deleted file mode 100644
index 97f2ff0a..00000000
--- a/app/src/views/search/SearchOptions.vue
+++ /dev/null
@@ -1,439 +0,0 @@
-
-
-
-
-
-.search-options
- .options-title(
- @click='showReagentOptions = !showReagentOptions'
- :class='showReagentOptions ? "" : "closed"'
- )
- span Components
- i.material-icons expand_less
- transition(name="expand")
- #searchByReagent.options-container(
- v-if='showReagentOptions'
- )
- .section
- .subtitle
- .tabs
- .tab.capitalize(
- v-for='mode in matchModes'
- @click='reagentOptions.matchMode = mode'
- :class='reagentOptions.matchMode === mode ? "selected" : ""'
- ) {{mode}}
- .section
- .subtitle General Options
- .general.options
- label(for='stereo') Use Stereochemistry
- input#stereo(
- type='checkbox'
- v-model='reagentOptions.useStereochemistry'
- )
- template(v-if='reagentOptions.matchMode === "similar"')
- label(for='similarity') Similarity Threshold
- .slider-input
- .value {{simThresholdDisplay}}
- input#similarity(
- type='range'
- min="0.1"
- max="1.0"
- step="0.01"
- v-model='reagentOptions.similarityThreshold'
- )
- .section
- .subtitle Reactants & Reagents
- .reagent.options
- template(v-for='(reactant, idx) in reagentOptions.reactants')
- .draw
- button(@click='openKetcherModal("reactants", idx)')
- i.material-icons draw
- .field.long
- input(
- type='text'
- v-model='reactant.smileSmart'
- )
- .delete
- button(@click='reagentOptions.reactants.splice(idx,1)')
- i.material-icons delete
- .copy(v-if='!reagentOptions.reactants?.length') No components
- #add-component
- button(
- type='button'
- @click='this.reagentOptions.reactants.push({smileSmart: "", source: "input"})'
- )
- i.material-icons add
- | Add Component
- .section
- .subtitle Products
- .reagent.options
- template(v-for='(product, idx) in reagentOptions.products')
- .draw
- button(@click='openKetcherModal("products", idx)')
- i.material-icons draw
- .field.long
- input(
- type='text'
- v-model='product.smileSmart'
- )
- .delete
- button(@click='reagentOptions.products.splice(idx,1)')
- i.material-icons delete
- .copy(v-if='!reagentOptions.products?.length') No components
- #add-component
- button(
- type='button'
- @click='this.reagentOptions.products.push({smileSmart: "", source: "output"})'
- )
- i.material-icons add
- | Add Component
- .options-title(
- @click='showReactionOptions = !showReactionOptions'
- :class='showReactionOptions ? "" : "closed"'
- )
- span Reactions
- i.material-icons expand_less
- transition(name="expand")
- #searchByReaction.options-container(
- v-if='showReactionOptions'
- )
- SearchItemList(
- title='Reaction IDs'
- :itemList.sync='reactionOptions.reactionIds'
- )
- SearchItemList(
- title='Reaction SMARTS'
- :itemList.sync='reactionOptions.reactionSmarts'
- )
- .slider-input.multi
- label(for='yield') Yield
- .value {{reactionOptions.min_yield}}% - {{reactionOptions.max_yield}}%
- MultiRangeSlider(
- baseClassName="multi-range-slider"
- :miin='0'
- :max='100'
- :step='1'
- :ruler='false'
- :label='false'
- :minValue='reactionOptions.min_yield'
- :maxValue='reactionOptions.max_yield'
- @input='updateYield'
- )
- .slider-input.multi
- label(for='yield') Conversion
- .value {{reactionOptions.min_conversion}}% - {{reactionOptions.max_conversion}}%
- MultiRangeSlider(
- baseClassName="multi-range-slider"
- :miin='0'
- :max='100'
- :step='1'
- :ruler='false'
- :label='false'
- :minValue='reactionOptions.min_conversion'
- :maxValue='reactionOptions.max_conversion'
- @input='updateConversion'
- )
- .options-title(
- @click='showDatasetOptions = !showDatasetOptions'
- :class='showDatasetOptions ? "" : "closed"'
- )
- span Datasets
- i.material-icons expand_less
- transition(name="expand")
- #searchByDataset.options-container(
- v-if='showDatasetOptions'
- )
- SearchItemList(
- title='Dataset IDs'
- :itemList.sync='datasetOptions.datasetIds'
- )
- SearchItemList(
- title='DOIs'
- :itemList.sync='datasetOptions.DOIs'
- )
- #searchParameters.options-title Search Parameters
- .options-container
- .section
- label(for='limit') Result Limit
- input#limit(
- type='number'
- min='0'
- v-model='searchParams.limit'
- )
- .search-button
- button(
- @click='emitSearchOptions'
- )
- b Search
-ModalKetcher(
- v-if='showKetcherModal'
- :smiles='reagentOptions[ketcherModalSet][ketcherModalSmile].smileSmart'
- @updateSmiles='(newSmiles) => reagentOptions[ketcherModalSet][ketcherModalSmile].smileSmart = newSmiles'
- @closeModal='showKetcherModal = false'
-)
-
-
-
diff --git a/app/src/views/search/SearchResults.scss b/app/src/views/search/SearchResults.scss
new file mode 100644
index 00000000..57b0f427
--- /dev/null
+++ b/app/src/views/search/SearchResults.scss
@@ -0,0 +1,126 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../../styles/vars';
+@import '../../styles/transition';
+
+.search-results-main {
+ .action-button-holder {
+ margin: -2.5rem 0 1rem; // bring button row inline with title without having to pass too much into EntityTable
+ display: flex;
+ justify-content: flex-end;
+ column-gap: 0.5rem;
+ }
+
+ .reaction-container {
+ text-decoration: none;
+
+ .row {
+ background-color: white;
+ border-radius: 0.25rem;
+ padding: 0.75rem;
+ margin-bottom: 1rem;
+ transition: 0.25s;
+ border: 4px solid white;
+
+ &:hover {
+ box-shadow: 0 0 5px $darkgrey;
+ }
+
+ .select {
+ input,
+ label {
+ cursor: pointer;
+ }
+ }
+
+ .reaction-table {
+ color: black;
+ overflow-x: wrap;
+ }
+
+ .info {
+ display: grid;
+ grid-template-columns: repeat(2, 50%);
+ row-gap: 0.5rem;
+ column-gap: 1rem;
+ margin-top: 1rem;
+
+ .col.full {
+ grid-column: 1/3;
+
+ button {
+ font-size: 1.2rem;
+ }
+ }
+
+ .col {
+ * {
+ margin-top: 0.5rem;
+ }
+ }
+
+ .smile {
+ display: flex;
+ column-gap: 0.5rem;
+ align-items: center;
+ margin-top: 0.25rem;
+
+ .value {
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+ &.selected {
+ border-color: $linkblue;
+ }
+ }
+ }
+
+ .view-selected-container {
+ position: fixed;
+ bottom: 2rem;
+ right: 6.5rem;
+
+ .view-selected-button {
+ padding: 0.5rem 1rem;
+ color: white;
+ background-color: $linkblue;
+ border-radius: 0.25rem;
+ cursor: pointer;
+ box-shadow: 0 0 5px $darkgrey;
+ animation: bounce 5s infinite ease-in-out;
+
+ @keyframes bounce {
+ 0%,
+ 20% {
+ transform: translateY(0);
+ }
+ 10% {
+ transform: translateY(-10px);
+ }
+ }
+ }
+ }
+
+ @media (max-width: 1000px) {
+ margin-top: 2.5rem;
+ }
+}
diff --git a/app/src/views/search/SearchResults.tsx b/app/src/views/search/SearchResults.tsx
new file mode 100644
index 00000000..8043689b
--- /dev/null
+++ b/app/src/views/search/SearchResults.tsx
@@ -0,0 +1,132 @@
+/**
+ * Copyright 2023 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import EntityTable from '../../components/EntityTable';
+import ReactionCard from '../../components/ReactionCard';
+import CopyButton from '../../components/CopyButton';
+import DownloadResults from '../../components/DownloadResults';
+import type { SearchResult } from '../../types/search';
+import './SearchResults.scss';
+
+interface SearchResultsProps {
+ searchResults: SearchResult[];
+}
+
+const SearchResults: React.FC setShowReagentOptions(!showReagentOptions)}
+ >
+ Components
+ expand_less
+
+
+ {showReagentOptions && (
+
+
+ )}
+
+ {/* Reactions Section */}
+
+
+
+
+
+
+ {matchModes.map(mode => (
+
+ setReagentOptions(prev => ({ ...prev, matchMode: mode }))}
+ >
+ {mode}
+
+ ))}
+
+
+
+ General Options
+
+
+ setReagentOptions(prev => ({ ...prev, useStereochemistry: e.target.checked }))}
+ />
+ {reagentOptions.matchMode === 'similar' && (
+ <>
+
+
+
+
+
+ )}
+ {simThresholdDisplay}
+
+ setReagentOptions(prev => ({ ...prev, similarityThreshold: Number(e.target.value) }))
+ }
+ />
+
+
+
+ Reactants & Reagents
+
+ {reagentOptions.reactants.map((reactant, idx) => (
+
+
+ ))}
+ {!reagentOptions.reactants?.length &&
+
+
+
+
+ updateReactantSmiles(idx, e.target.value)}
+ />
+
+
+
+
+ No components
}
+
+
+
+
+
+ Products
+
+ {reagentOptions.products.map((product, idx) => (
+
+
+ ))}
+ {!reagentOptions.products?.length &&
+
+
+
+
+ updateProductSmiles(idx, e.target.value)}
+ />
+
+
+
+
+ No components
}
+
+
+
+ setShowReactionOptions(!showReactionOptions)}
+ >
+ Reactions
+ expand_less
+
+
+ {showReactionOptions && (
+
+ setReactionOptions(prev => ({ ...prev, reactionIds: newList }))}
+ />
+ setReactionOptions(prev => ({ ...prev, reactionSmarts: newList }))}
+ />
+
+
+ )}
+
+ {/* Datasets Section */}
+
+
+
+
+
+ {reactionOptions.min_yield}% - {reactionOptions.max_yield}%
+
+
+
+ setReactionOptions(prev => ({
+ ...prev,
+ min_yield: values[0],
+ max_yield: values[1],
+ }))
+ }
+ renderTrack={({ props, children }) => (
+
+
+ {children}
+
+ )}
+ renderThumb={({ props }) => (
+
+ )}
+ />
+
+
+
+
+ {reactionOptions.min_conversion}% - {reactionOptions.max_conversion}%
+
+
+
+ setReactionOptions(prev => ({
+ ...prev,
+ min_conversion: values[0],
+ max_conversion: values[1],
+ }))
+ }
+ renderTrack={({ props, children }) => (
+
+
+ {children}
+
+ )}
+ renderThumb={({ props }) => (
+
+ )}
+ />
+ setShowDatasetOptions(!showDatasetOptions)}
+ >
+ Datasets
+ expand_less
+
+
+ {showDatasetOptions && (
+
+ setDatasetOptions(prev => ({ ...prev, datasetIds: newList }))}
+ />
+ setDatasetOptions(prev => ({ ...prev, DOIs: newList }))}
+ />
+
+ )}
+
+ {/* Search Parameters Section */}
+
+ Search Parameters
+
+
+
+
+ {/* Ketcher Modal */}
+ {showKetcherModal && (
+
+
+ setSearchParams(prev => ({ ...prev, limit: Number(e.target.value) }))}
+ />
+
+
+
+
+
+ {searchResults.length > 0 && (
+
+ {entities => (
+ <>
+
+ )}
+
+ {selectedReactions.length > 0 && (
+ result.reaction_id)}
+ showDownloadResults={showDownloadResults}
+ onHideDownloadResults={() => setShowDownloadResults(false)}
+ />
+
+ );
+};
+
+export default SearchResults;
diff --git a/app/src/views/search/SearchResults.vue b/app/src/views/search/SearchResults.vue
deleted file mode 100644
index 3b161868..00000000
--- a/app/src/views/search/SearchResults.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-
-
-
-
-
-.search-results-main
- EntityTable(
- :tableData='formattedResults'
- title="Search Results",
- v-slot='{ entities }'
- v-if='formattedResults.length'
- :displaySearch='false'
- )
- .action-button-holder
- CopyButton(
- :textToCopy='fullUrl'
- icon='share'
- buttonText='Shareable Link'
- )
- button(
- :disabled='!formattedResults.length'
- @click='showDownloadResults=true'
- ) Download All Search Results
- ReactionCard(
- v-for='row in entities'
- :reaction='row'
- :isSelectable='true'
- :isSelected='selectedReactions.includes(row.reaction_id)'
- @clickedSelect='updateSelectedReactions'
- )
- transition(
- name='fade'
- )
- .view-selected-container(v-if='selectedReactions.length')
- .view-selected-button(@click='goToViewSelected') View {{selectedReactions.length}} selected reactions
- DownloadResults(
- :reactionIds='formattedResults.map(result => result.reaction_id)'
- :showDownloadResults='showDownloadResults'
- @hideDownloadResults='showDownloadResults=false'
- )
-
-
-
diff --git a/app/src/views/viewKetcher/MainKetcher.vue b/app/src/views/viewKetcher/MainKetcher.vue
deleted file mode 100644
index 03a58db1..00000000
--- a/app/src/views/viewKetcher/MainKetcher.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-
-//- This is a simple view which emulates the html file and pulls in the js and css files for the ketcher interface
-//- It expects a folder "ketcher" to be in the root of src with files extracted from:
-//- https://github.com/epam/ketcher/releases/download/v2.5.1/ketcher-standalone-2.5.1.zip
-#ketcher
- noscript You need to enable JavaScript to run this app.
- #root
-
-
-
-
-
-
diff --git a/app/tsconfig.app.json b/app/tsconfig.app.json
new file mode 100644
index 00000000..a9b5a59c
--- /dev/null
+++ b/app/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/app/tsconfig.json b/app/tsconfig.json
new file mode 100644
index 00000000..d32ff682
--- /dev/null
+++ b/app/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "files": [],
+ "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}
diff --git a/app/tsconfig.node.json b/app/tsconfig.node.json
new file mode 100644
index 00000000..7a77bab3
--- /dev/null
+++ b/app/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "types": [],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/app/vite.config.js b/app/vite.config.js
deleted file mode 100644
index 64394059..00000000
--- a/app/vite.config.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright 2026 Open Reaction Database Project Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import vue from '@vitejs/plugin-vue';
-import { defineConfig } from 'vite';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-export default defineConfig({
- plugins: [
- vue(),
- // Ketcher's chemical templates ship inside src/ketcher/templates and must
- // end up at /templates in the build output (the Ketcher JS bundle fetches
- // them at runtime). Ketcher v2.5.1 is otherwise self-contained — its main
- // JS bundles all assets except an `overlay.svg` referenced via a relative
- // url() that Vite resolves at build time. If Ketcher is ever updated to a
- // chunked build, the copy targets here will need to grow.
- viteStaticCopy({
- targets: [
- {
- src: 'src/ketcher/templates/*',
- dest: 'templates',
- },
- ],
- }),
- ],
- resolve: {
- alias: {
- '@': path.resolve(__dirname, 'src'),
- },
- },
- server: {
- port: 8080,
- proxy: {
- // 127.0.0.1 (not localhost / 0.0.0.0): on macOS, localhost resolves to
- // ::1 first, and AirPlay Receiver also listens on *:5000. uvicorn binds
- // 127.0.0.1 only, so the explicit IPv4 address dodges the collision.
- '^/api': {
- target: 'http://127.0.0.1:5000',
- changeOrigin: true,
- },
- },
- },
-});
diff --git a/app/vite.config.ts b/app/vite.config.ts
new file mode 100644
index 00000000..788ec420
--- /dev/null
+++ b/app/vite.config.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2026 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ port: 8080, // parity with old vue app
+ proxy: {
+ '/api': {
+ target: 'http://127.0.0.1:5000',
+ changeOrigin: true,
+ },
+ },
+ },
+});
diff --git a/ord_interface/Dockerfile b/ord_interface/Dockerfile
index 9156a7be..02f06f57 100644
--- a/ord_interface/Dockerfile
+++ b/ord_interface/Dockerfile
@@ -74,13 +74,19 @@ COPY ord_interface/editor/build.sh ord_interface/editor
WORKDIR /app/ord-interface/ord_interface/editor
RUN ./build.sh
WORKDIR /app/ord-interface
-# Build the Vue app.
+# Build the SPA (React + TypeScript + Vite).
COPY app/ app/
WORKDIR /app/ord-interface/app
-RUN cp -r /app/ord-interface/ord_interface/standalone/ /app/ord-interface/app/src/ketcher \
+# NOTE(skearnes): package-lock.json is regenerated inside the image because npm
+# stores rollup's platform-specific optional binaries by host OS, so a lockfile
+# captured on macOS (or any non-Linux dev box) won't include
+# @rollup/rollup-linux-x64-gnu and vite build fails with MODULE_NOT_FOUND.
+# See https://github.com/npm/cli/issues/4828.
+RUN cp -r /app/ord-interface/ord_interface/standalone/ /app/ord-interface/app/public/ketcher \
+ && rm -f package-lock.json \
&& npm install \
&& npm run build \
- && mv dist/ /app/ord-interface/vue
+ && mv dist/ /app/ord-interface/spa
WORKDIR /app/ord-interface
# Copy the rest of the editor files.
COPY ord_interface/editor/ ord_interface/editor/
diff --git a/ord_interface/api/search.py b/ord_interface/api/search.py
index 97395293..db835024 100644
--- a/ord_interface/api/search.py
+++ b/ord_interface/api/search.py
@@ -27,7 +27,7 @@
from uuid import uuid4
import psycopg
-from fastapi import APIRouter, BackgroundTasks, Depends, Query, Response, status
+from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException, Query, Response, status
from ord_schema.logging import get_logger
from ord_schema.orm.database import get_connection_string
from ord_schema.proto import dataset_pb2
@@ -205,6 +205,20 @@ async def get_datasets() -> list[DatasetInfo]:
return [DatasetInfo(**row) async for row in cursor]
+@router.get("/dataset")
+async def get_dataset(dataset_id: str) -> DatasetInfo:
+ """Returns info about a single dataset."""
+ async with get_cursor() as cursor:
+ await cursor.execute(
+ "SELECT dataset_id, name, description, num_reactions FROM dataset WHERE dataset_id = %s",
+ (dataset_id,),
+ )
+ row = await cursor.fetchone()
+ if row is None:
+ raise HTTPException(status_code=404, detail=f"dataset not found: {dataset_id}")
+ return DatasetInfo(**row)
+
+
@router.get("/molfile")
async def get_molfile(smiles: str) -> str:
"""Returns a molblock for the given SMILES."""
diff --git a/ord_interface/api/search_test.py b/ord_interface/api/search_test.py
index 3a847c79..4a86a0a9 100644
--- a/ord_interface/api/search_test.py
+++ b/ord_interface/api/search_test.py
@@ -79,6 +79,19 @@ def test_get_datasets(test_client):
assert len(dataset_info) == 3
+def test_get_dataset(test_client):
+ dataset_id = "ord_dataset-89b083710e2d441aa0040c361d63359f"
+ response = test_client.get("/api/dataset", params={"dataset_id": dataset_id})
+ response.raise_for_status()
+ dataset_info = response.json()
+ assert dataset_info["dataset_id"] == dataset_id
+
+
+def test_get_dataset_not_found(test_client):
+ response = test_client.get("/api/dataset", params={"dataset_id": "ord_dataset-does-not-exist"})
+ assert response.status_code == 404
+
+
def test_get_molfile(test_client):
response = test_client.get("/api/molfile", params={"smiles": "C(=O)N"})
response.raise_for_status()
diff --git a/ord_interface/nginx.conf b/ord_interface/nginx.conf
index 12fab41e..2d1c1a71 100644
--- a/ord_interface/nginx.conf
+++ b/ord_interface/nginx.conf
@@ -29,7 +29,7 @@ http {
listen 8080;
location / {
- root /app/ord-interface/vue;
+ root /app/ord-interface/spa;
index index.html;
try_files $uri $uri/ /index.html;
}
+
+ {entities.map(row => (
+
+
+ )}
+
+
+ View {selectedReactions.length} selected reactions
+
+