-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
628 additions
and
701 deletions.
There are no files selected for viewing
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,28 +1,34 @@ | ||
| import { memo } from 'react' | ||
| import { Flex } from '@radix-ui/themes' | ||
| import { Handle, Position, NodeProps } from 'reactflow' | ||
| import Image from 'next/image' | ||
| import { ChemNodeData } from '@/types' | ||
| import { memo } from "react"; | ||
| import { Flex } from "@radix-ui/themes"; | ||
| import { Handle, Position, NodeProps, NodeToolbar } from "reactflow"; | ||
| import Image from "next/image"; | ||
| import { ChemNodeData } from "@/types"; | ||
| import ChemicalDetail from "./_ChemicalDetail"; | ||
| import SynthesisDetail from "./_SynthesisDetail"; | ||
|
|
||
| function ChemNode({ data }: NodeProps<ChemNodeData>) { | ||
| function ChemNode({ data, id }: NodeProps<ChemNodeData>) { | ||
| const handleStyle = { | ||
| width: '2px', | ||
| height: '10px', | ||
| borderRadius: '1px', | ||
| backgroundColor: '#778899', | ||
| } | ||
| width: "2px", | ||
| height: "10px", | ||
| borderRadius: "1px", | ||
| backgroundColor: "#778899", | ||
| }; | ||
|
|
||
| return ( | ||
| <Flex | ||
| direction='column' | ||
| className='relative bg-green-100 w-20 h-20 p-1 rounded-md hover:bg-green-300' | ||
| direction="column" | ||
| className="relative bg-green-100 w-20 h-20 p-1 rounded-md hover:bg-green-300" | ||
| > | ||
| <Handle style={handleStyle} type='target' position={Position.Left} /> | ||
| <Image src={data.imgUrl} fill alt='chem' /> | ||
| <NodeToolbar> | ||
| <SynthesisDetail smiles={data.smiles} id={id} /> | ||
| <ChemicalDetail smiles={data.smiles} /> | ||
| </NodeToolbar> | ||
| <Handle style={handleStyle} type="target" position={Position.Left} /> | ||
| <Image src={data.imgUrl} fill alt="chem" /> | ||
| {!data.isTarget && ( | ||
| <Handle style={handleStyle} type='source' position={Position.Right} /> | ||
| <Handle style={handleStyle} type="source" position={Position.Right} /> | ||
| )} | ||
| </Flex> | ||
| ) | ||
| ); | ||
| } | ||
| export default memo(ChemNode) | ||
| export default memo(ChemNode); |
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
Empty file.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,109 +1,30 @@ | ||
| import { useState } from "react"; | ||
| import { Flex, Separator, Text } from "@radix-ui/themes"; | ||
| import { Flex, Separator } from "@radix-ui/themes"; | ||
| import Search from "./Search"; | ||
| import Chart from "./Chart"; | ||
| import { Node } from "reactflow"; | ||
| import Reactions from "./Reactions"; | ||
| import NodeDetail from "./NodeDetail"; | ||
| import RouteDetail from "./RouteDetail"; | ||
| import Conditions from "./Conditions"; | ||
| import { ToastProvider } from "./CustomToast"; | ||
| import { useCurrentLocale } from "next-i18n-router/client"; | ||
| import i18nConfig from "../../i18nConfig"; | ||
|
|
||
| type Props = { | ||
| content?: string; | ||
| }; | ||
|
|
||
| export default function Dashboard(props: Props) { | ||
| const locale = useCurrentLocale(i18nConfig); | ||
| const [currentNode, setCurrentNode] = useState<Node | null>(null); | ||
| const [routes, setRoutes] = useState([]); | ||
| const [conditions, setConditions] = useState([]); | ||
| const [selectCondition, setSelectCondition] = useState<any>({}); | ||
|
|
||
| const handleSelect = (node: Node | null) => { | ||
| setRoutes([]); | ||
| setConditions([]); | ||
| setSelectCondition({}); | ||
| setCurrentNode(node); | ||
| }; | ||
|
|
||
| return ( | ||
| <Flex direction="column" width="100%" className="h-full"> | ||
| {!props.content && ( | ||
| <> | ||
| <Search | ||
| setRoutes={setRoutes} | ||
| setConditions={setConditions} | ||
| setCurrentNode={setCurrentNode} | ||
| /> | ||
| <Search /> | ||
| <Separator | ||
| orientation="horizontal" | ||
| size="4" | ||
| className="bg-gray-500" | ||
| /> | ||
| </> | ||
| )} | ||
| <Flex width="100%" className="h-1/2"> | ||
| <Flex width="100%" className="h-full"> | ||
| <ToastProvider> | ||
| <Chart handleSelect={handleSelect} content={props.content} /> | ||
| <Chart content={props.content} /> | ||
| </ToastProvider> | ||
| </Flex> | ||
| <Separator orientation="horizontal" size="4" className="bg-gray-500" /> | ||
| <Flex className="h-1/2" width="100%" direction="row"> | ||
| <Flex className="w-3/4 h-full" direction="column"> | ||
| {Boolean(routes.length) && ( | ||
| <Reactions | ||
| routes={routes} | ||
| currentNode={currentNode} | ||
| locale={locale!} | ||
| /> | ||
| )} | ||
| {Boolean(conditions.length) && ( | ||
| <Conditions | ||
| conditions={conditions} | ||
| currentNode={currentNode} | ||
| setSelectCondition={setSelectCondition} | ||
| locale={locale!} | ||
| /> | ||
| )} | ||
| </Flex> | ||
| <Flex | ||
| className="w-1/4 ml-2 h-full" | ||
| align="center" | ||
| direction="column" | ||
| gap="2" | ||
| style={{ backgroundColor: "var(--gray-a4)" }} | ||
| > | ||
| <Text align="center" className="text-gray-300"> | ||
| {currentNode | ||
| ? locale === "en" | ||
| ? "Current Target" | ||
| : "当前目标" | ||
| : locale === "en" | ||
| ? "No Target" | ||
| : "未选中目标"}{" "} | ||
| </Text> | ||
| <Flex className="w-64" direction="column"> | ||
| {currentNode && currentNode.type === "chemNode" && ( | ||
| <NodeDetail | ||
| setRoutes={setRoutes} | ||
| currentNode={currentNode} | ||
| locale={locale!} | ||
| /> | ||
| )} | ||
| {currentNode && currentNode.type === "reactionNode" && ( | ||
| <RouteDetail | ||
| setConditions={setConditions} | ||
| currentNode={currentNode} | ||
| selectCondition={selectCondition} | ||
| locale={locale!} | ||
| /> | ||
| )} | ||
| </Flex> | ||
| </Flex> | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| } |
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
Oops, something went wrong.