-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MSA viz inclusive of changes suggested
- Loading branch information
Showing
9 changed files
with
116 additions
and
10,214 deletions.
There are no files selected for viewing
Binary file not shown.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 24 additions & 20 deletions
44
frontend/src/components/nightingale-wrapper/NightingaleMSAWrapper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,33 @@ | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import '@nightingale-elements/nightingale-msa'; | ||
| import { Region, SequencesMSA } from '@nightingale-elements/nightingale-msa'; | ||
| import React, { useEffect, useRef } from "react"; | ||
| import "@nightingale-elements/nightingale-msa"; | ||
| import type { Region, SequencesMSA } from "@nightingale-elements/nightingale-msa"; | ||
|
|
||
| interface NightingaleMSAWrapperProps { | ||
| sequences: SequencesMSA; | ||
| features: Array<Region>; | ||
| } | ||
| type Props = { | ||
| sequences: SequencesMSA; | ||
| features?: Region[]; | ||
| }; | ||
|
|
||
| // Define the type for the custom element | ||
| interface NightingaleMSAElement extends HTMLElement { | ||
| data: SequencesMSA; | ||
| features: Array<Region>; | ||
| } | ||
| type NightingaleMSAElement = { | ||
| data: SequencesMSA; | ||
| features?: Region[]; | ||
| } & HTMLElement; | ||
|
|
||
| const NightingaleMSAWrapper: React.FC<NightingaleMSAWrapperProps> = ({ sequences, features }) => { | ||
| const msaRef = useRef<NightingaleMSAElement>(null); | ||
| const NightingaleMSAWrapper = ({ sequences, features }: Props) => { | ||
| const msaRef = useRef<NightingaleMSAElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| if (msaRef.current) { | ||
| msaRef.current.data = sequences; | ||
| msaRef.current.features = features; | ||
| } | ||
| }, [sequences, features]); | ||
| useEffect(() => { | ||
| if (msaRef.current) { | ||
| msaRef.current.data = sequences; | ||
| if (features) { | ||
| msaRef.current.features = features.map(feature => ({ | ||
| ...feature, | ||
| })); | ||
| } | ||
| } | ||
| }, [sequences, features]); | ||
|
|
||
| return <nightingale-msa ref={msaRef}></nightingale-msa>; | ||
| return <nightingale-msa ref={msaRef}></nightingale-msa>; | ||
| }; | ||
|
|
||
| export default NightingaleMSAWrapper; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,41 @@ | ||
| import { | ||
| FaArrowRightFromBracket, | ||
| FaBarsStaggered, | ||
| FaFeatherPointed, | ||
| } from 'react-icons/fa6'; | ||
| import { useLocation } from 'react-router-dom'; | ||
| import { LuShapes } from 'react-icons/lu'; | ||
| import { TbBinaryTree } from 'react-icons/tb'; | ||
| import Heading from '@/components/Heading'; | ||
| import Section from '@/components/Section'; | ||
| import Tabs, { Tab } from '@/components/Tabs'; | ||
| import DomainArch from '@/pages/analysis/outputs/DomainArch'; | ||
| import Homology from '@/pages/analysis/outputs/Homology'; | ||
| import Phylogeny from '@/pages/analysis/outputs/Phylogeny'; | ||
| import Summary from '@/pages/analysis/outputs/Summary'; | ||
| import NightingaleMSAWrapper from '@/components/nightingale-wrapper/NightingaleMSAWrapper'; | ||
| import { Region, SequencesMSA } from '@nightingale-elements/nightingale-msa'; | ||
|
|
||
| interface ExtendedRegion extends Region { | ||
| start: number; | ||
| end: number; | ||
| type: string; | ||
| description: string; | ||
| } | ||
| FaArrowRightFromBracket, | ||
| FaBarsStaggered, | ||
| FaFeatherPointed, | ||
| } from "react-icons/fa6"; | ||
| import { LuShapes } from "react-icons/lu"; | ||
| import { TbBinaryTree } from "react-icons/tb"; | ||
| import Heading from "@/components/Heading"; | ||
| import Section from "@/components/Section"; | ||
| import Tabs, { Tab } from "@/components/Tabs"; | ||
| import DomainArch from "@/pages/analysis/outputs/DomainArch"; | ||
| import Homology from "@/pages/analysis/outputs/Homology"; | ||
| import Phylogeny from "@/pages/analysis/outputs/Phylogeny"; | ||
| import Summary from "@/pages/analysis/outputs/Summary"; | ||
|
|
||
| const Outputs = () => { | ||
|
|
||
| const location = useLocation(); | ||
| const msaData = location.state?.msaData; | ||
|
|
||
|
|
||
| /** parsing Input msaData **/ | ||
| const parseSequences = (data: string): SequencesMSA => { | ||
| const lines = data.split('\n'); | ||
| return lines | ||
| .map(line => { | ||
| const [name, sequence] = line.split(/\s+/); | ||
| if (name && sequence) { | ||
| return { name, sequence }; | ||
| } | ||
| return null; | ||
| }) | ||
| .filter((seq): seq is { name: string; sequence: string } => seq !== null); | ||
| }; | ||
|
|
||
| const sequences: SequencesMSA = msaData ? parseSequences(msaData) : []; | ||
|
|
||
| // Define features based on your requirements | ||
| const features: ExtendedRegion[] = [ | ||
| { | ||
| type: "domain", | ||
| start: 1, | ||
| end: 10, | ||
| description: "Domain 1", | ||
| residues: { from: 1, to: 10 }, | ||
| sequences: { from: 0, to: sequences.length - 1 }, | ||
| mouseOverFillColor: "rgba(255, 0, 0, 0.5)", | ||
| fillColor: "rgba(255, 0, 0, 0.3)", | ||
| borderColor: "rgba(255, 0, 0, 1)", | ||
| }, | ||
| // Add more features as needed | ||
| ]; | ||
|
|
||
| return ( | ||
| <Section> | ||
| <Heading level={2} icon={<FaArrowRightFromBracket />}> | ||
| Outputs | ||
| </Heading> | ||
|
|
||
| <Tabs syncWithUrl="output-tab"> | ||
| <Tab text="Summary" icon={<FaFeatherPointed />}> | ||
| <Summary /> | ||
| </Tab> | ||
| <Tab text="Domain Arch." icon={<FaBarsStaggered />}> | ||
| <DomainArch /> | ||
| </Tab> | ||
| <Tab text="Phylogeny" icon={<TbBinaryTree />}> | ||
| <Phylogeny /> | ||
| </Tab> | ||
| <Tab text="Homology" icon={<LuShapes />}> | ||
| <Homology /> | ||
| </Tab> | ||
| <Tab text="MSA Visualization" icon={<FaBarsStaggered />}> | ||
| {sequences.length > 0 ? ( | ||
| <NightingaleMSAWrapper sequences={sequences} features={features} /> | ||
| ) : ( | ||
| <p>No valid MSA data available</p> | ||
| )} | ||
| </Tab> | ||
| </Tabs> | ||
| </Section> | ||
| ); | ||
| return ( | ||
| <Section> | ||
| <Heading level={2} icon={<FaArrowRightFromBracket />}> | ||
| Outputs | ||
| </Heading> | ||
|
|
||
| <Tabs syncWithUrl="output-tab"> | ||
| <Tab text="Summary" icon={<FaFeatherPointed />}> | ||
| <Summary /> | ||
| </Tab> | ||
| <Tab text="Domain Arch." icon={<FaBarsStaggered />}> | ||
| <DomainArch /> | ||
| </Tab> | ||
| <Tab text="Phylogeny" icon={<TbBinaryTree />}> | ||
| <Phylogeny /> | ||
| </Tab> | ||
| <Tab text="Homology" icon={<LuShapes />}> | ||
| <Homology /> | ||
| </Tab> | ||
| </Tabs> | ||
| </Section> | ||
| ); | ||
| }; | ||
|
|
||
| export default Outputs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters