Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update demo to connect with MPI #267

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+104 −1
Open

Update demo to connect with MPI #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions demo/lib/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
Image,
Input,
Menu,
Message,
Sidebar,
} from "semantic-ui-react";
import seqparse from "seqparse";
Expand All @@ -21,6 +22,7 @@ import { chooseRandomColor } from "../../src/colors";
import { AnnotationProp, Primer, TranslationProp } from "../../src/elements";
import Header from "./Header";
import file from "./file";
import { useEffect, useState } from "react";

const viewerTypeOptions = [
{ key: "both", text: "Both", value: "both" },
Expand All @@ -29,6 +31,11 @@ const viewerTypeOptions = [
{ key: "both_flip", text: "Both Flip", value: "both_flip" },
];

interface Message {
positive: boolean
visible: boolean
}

interface AppState {
annotations: AnnotationProp[];
customChildren: boolean;
Expand All @@ -45,6 +52,7 @@ interface AppState {
showSidebar: boolean;
translations: TranslationProp[];
viewer: string;
message: Message;
zoom: number;
}

Expand Down Expand Up @@ -101,6 +109,10 @@ export default class App extends React.Component<any, AppState> {
{ end: 1147, name: "", start: 736 },
{ end: 1885, name: "ORF 2", start: 1165 },
],
message: {
positive: true,
visible: false
},
viewer: "both",
zoom: 50,
};
Expand All @@ -123,6 +135,34 @@ export default class App extends React.Component<any, AppState> {
this.setState({ showSelectionMeta: !showSelectionMeta });
};

sendToMPI = async () => {
try {
const { seq, name, annotations } = this.state;
const response = await fetch(`https://mpi.f4hcvcnn7c36k.us-east-1.cs.amazonlightsail.com/sequences`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ seq, name, type: "dna", annotations }),
});
const res = await response.json();
if (res.statusCode && res.statusCode != 201) {
throw "Not possible to export sequence."
}
this.setState({ message: { positive: true, visible: true } })
} catch (e) {
this.setState({ message: { positive: false, visible: true } })
}

this.closeMessage()
};

closeMessage = () => {
setTimeout(() => {
this.setState({ message: { positive: true, visible: false } });
}, 3000);
};

handleHide = () => {
this.setState({ showSidebar: false });
};
Expand Down Expand Up @@ -192,6 +232,7 @@ export default class App extends React.Component<any, AppState> {

return (
<div style={{ height: "100vh" }}>
<Alert visible={this.state.message.visible} positive={this.state.message.positive} />
<Sidebar.Pushable className="sidebar-container">
<Sidebar
animation="overlay"
Expand Down Expand Up @@ -245,6 +286,7 @@ export default class App extends React.Component<any, AppState> {
showSelectionMeta={this.state.showSelectionMeta}
toggleShowSelectionMeta={this.toggleShowSelectionMeta}
toggleSidebar={this.toggleSidebar}
sendToMPI={this.sendToMPI}
/>
<div id="seqviewer">
{this.state.seq && (
Expand Down Expand Up @@ -441,3 +483,25 @@ const SidebarFooter = () => (
</p>
</div>
);

const Alert = ({ visible, positive }) => {
if (visible) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

If not visible doesn't return anything? If so, maybe we can remove the prop and do:

this.state.message.visible && <Alert positive={this.state.message.positive} />

if (positive) {
return (
<Message id="alert-message" positive>
Copy link
Collaborator

Choose a reason for hiding this comment

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

nit: a version that uses less code could be something like:

      <Message id="alert-message" positive={positive} negative={!positive}>
        <p>
          { positive ? "Sequence successfully exported to MPI." : "Error exporting sequence to MPI. Try again later".
        </p>
      </Message>

<p>
Sequence successfully exported to MPI.
</p>
</Message>
);
}
return (
<Message id="alert-message" negative>
<p>
Error exporting sequence to MPI. Try again later.
</p>
</Message>
);
}
};

13 changes: 12 additions & 1 deletion demo/lib/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from "react";
import { Button, Icon, Image, Popup } from "semantic-ui-react";

const Header = ({ selection, showSelectionMeta, toggleShowSelectionMeta, toggleSidebar }) => (
const Header = ({ selection, showSelectionMeta, toggleShowSelectionMeta, toggleSidebar, sendToMPI }) => (
<div className="header" id="app-header">
<div id="header-primary">
<Popup
Expand All @@ -17,6 +17,9 @@ const Header = ({ selection, showSelectionMeta, toggleShowSelectionMeta, toggleS
showSelectionMeta={showSelectionMeta}
toggleShowSelectionMeta={toggleShowSelectionMeta}
/>
<ExportToMPI
sendToMPI={sendToMPI}
Copy link
Collaborator

Choose a reason for hiding this comment

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

nit: why passing this as a prop instead of just declaring the function here?

/>
<a href="https://github.com/Lattice-Automation/seqviz" id="github-link" rel="noopener noreferrer" target="_blank">
<Icon name="github" size="large" />
</a>
Expand All @@ -40,6 +43,14 @@ const ToggleSelectionMetaButton = ({ showSelectionMeta, toggleShowSelectionMeta
</div>
);

const ExportToMPI = ({ sendToMPI }) => (
<div className="mpi-block">
<Button id="mpi-button" onClick={sendToMPI}>
Export to MPI
</Button>
</div>
);

const SelectionMetaRow = ({ selection }) => {
const { end, feature, length, start } = selection;
const noneSelected = start === end;
Expand Down
28 changes: 28 additions & 0 deletions demo/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,6 +375,19 @@ input#part-input {
padding-right: 16px !important;
margin: auto 0 !important;
vertical-align: middle;
}

#alert-message {
position: absolute;
bottom: 1rem;
left: 1rem;
}

.mpi-block {
padding-left: 16px !important;
padding-right: 16px !important;
margin: auto 0 !important;
vertical-align: middle;
flex: 1;
}

Expand Down Expand Up @@ -402,6 +415,21 @@ input#part-input {
box-shadow: 0 1px 3px rgba(124, 124, 124, 0.12), 0 1px 2px rgba(124, 124, 124, 0.24) !important;
}

#mpi-button {
margin: 0;
padding: 10px 12px;
width: 120px;
background: #f0f0f0;
border-radius: 0.25rem;
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
box-shadow: 0 1px 3px rgba(124, 124, 124, 0.12), 0 1px 2px rgba(124, 124, 124, 0.24) !important;
background-color: #14b7db !important;
color: white !important;
}
#mpi-button:hover {
background: #11a3c4 !important;
}

#header-meta {
max-width: 100%;
height: 24px;
Expand Down
Loading