Skip to content

Commit

Permalink
up
Browse files Browse the repository at this point in the history
  • Loading branch information
@theosanderson
theosanderson committed Sep 12, 2023
1 parent 7742e56 commit 86a362c
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 167 deletions.
1 change: 1 addition & 0 deletions taxonium_component/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"react-icons": "^4.8.0",
"react-modal": "^3.16.1",
"react-spinners": "^0.13.8",
"react-tabs": "4",
"react-tooltip": "^4.2.21",
"readable-web-to-node-stream": "^3.0.2",
"sb": "^7.0.14",
Expand Down
326 changes: 160 additions & 166 deletions taxonium_component/src/components/DeckSettingsModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import React from 'react';
import Modal from "react-modal";
import ColorPicker from "./ColorPicker";
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const settingsModalStyle = {
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
//width: '50%',
backgroundColor: "#fafafa",
border: '1px solid #e2e8f0',
borderRadius: '8px',
padding: '20px',
maxWidth: '500px',
},
};

Expand All @@ -18,182 +22,172 @@ const prettifyMutationTypes = {
nt: "Nucleotide",
};

const DeckSettingsModal = ({
settings,
deckSettingsOpen,
setDeckSettingsOpen,
}) => {
const DeckSettingsModal = ({ settings, deckSettingsOpen, setDeckSettingsOpen }) => {
return (
<Modal
isOpen={deckSettingsOpen}
style={settingsModalStyle}
onRequestClose={() => setDeckSettingsOpen(false)}
contentLabel="Example Modal"
contentLabel="Deck Settings Modal"
>
<h2 className="font-medium mb-3">Settings</h2>
<div className="text-sm">
<div>
<label>
<input
type="checkbox"
className="mr-1"
checked={settings.minimapEnabled}
onChange={() => settings.toggleMinimapEnabled()}
/>{" "}
Enable minimap
</label>
</div>
<div>
<label>
<input
type="checkbox"
className="mr-1"
checked={settings.displayTextForInternalNodes}
onChange={() =>
settings.setDisplayTextForInternalNodes(
!settings.displayTextForInternalNodes
)
}
/>{" "}
Display labels for internal nodes if present
</label>
</div>
<div>
<label>
<input
type="checkbox"
className="mr-1"
checked={settings.displayPointsForInternalNodes}
onChange={() =>
settings.setDisplayPointsForInternalNodes(
!settings.displayPointsForInternalNodes
)
}
/>{" "}
Display points for internal nodes
</label>
</div>

<div>
<label>
Max density of node label text:{" "}
<input
type="number"
value={settings.thresholdForDisplayingText}
onChange={(e) =>
settings.setThresholdForDisplayingText(
parseFloat(e.target.value)
)
}
step="0.1"
min="0"
max="10"
className="border py-1 px-1 text-grey-darkest text-sm"
/>
</label>
</div>
<div>
<label>
Max clade labels to show
<input
type="number"
value={settings.maxCladeTexts}
onChange={(e) =>
settings.setMaxCladeTexts(parseInt(e.target.value))
}
step="1"
min="0"
max="10000000"
className="border py-1 px-1 text-grey-darkest text-sm"
/>
</label>
</div>
<div>
<label>
Color for terminal node labels
<ColorPicker
color={settings.terminalNodeLabelColor}
setColor={settings.setTerminalNodeLabelColor}
/>
</label>
</div>
<div>
<label>
Color for tree lines
<ColorPicker
color={settings.lineColor}
setColor={settings.setLineColor}
/>
</label>
</div>
<h2 className="font-medium mb-5 text-lg">Settings</h2>
<Tabs>
<TabList>
<Tab>Toggle</Tab>
<Tab>Appearance</Tab>
<Tab>Mutation Types</Tab>
<Tab>Search</Tab>
</TabList>

<div>
<label>
Color for clade labels
<ColorPicker
color={settings.cladeLabelColor}
setColor={settings.setCladeLabelColor}
/>
</label>
</div>
<h3 className="mt-5 font-medium">Mutation types enabled</h3>
<div className="mt-2">
{Object.keys(settings.mutationTypesEnabled).map((key) => (
<div key={key}>
<label key={key}>
<TabPanel>
<div className="space-y-3">
<div>
<label>
<input
type="checkbox"
className="mr-1"
checked={settings.mutationTypesEnabled[key]}
onChange={() =>
settings.setMutationTypeEnabled(
key,
!settings.mutationTypesEnabled[key]
)
}
checked={settings.minimapEnabled}
onChange={() => settings.toggleMinimapEnabled()}
/>{" "}
{prettifyMutationTypes[key] ? prettifyMutationTypes[key] : key}
Enable minimap
</label>
</div>
))}
</div>
<div className="mt-2">
<h3 className="mt-5 font-medium">Search</h3>
<label>
<input
type="checkbox"
className="mr-1"
checked={settings.displaySearchesAsPoints}
onChange={() =>
settings.setDisplaySearchesAsPoints(
!settings.displaySearchesAsPoints
)
}
/>{" "}
Display searches as points
</label>
</div>
<div className="mt-2">
<label>
Point Size:{" "}
<input
type="number"
value={settings.searchPointSize}
onChange={(e) =>
settings.setSearchPointSize(parseInt(e.target.value))
}
step="1"
min="1"
max="10"
className={`border py-1 px-1 text-grey-darkest text-sm ${
!settings.displaySearchesAsPoints ? "bg-gray-200" : ""
}`}
disabled={!settings.displaySearchesAsPoints}
/>
</label>
</div>
</div>
<div>
<label>
<input
type="checkbox"
className="mr-1"
checked={settings.displayTextForInternalNodes}
onChange={() => settings.setDisplayTextForInternalNodes(!settings.displayTextForInternalNodes)}
/>{" "}
Display labels for internal nodes if present
</label>
</div>
<div>
<label>
<input
type="checkbox"
className="mr-1"
checked={settings.displayPointsForInternalNodes}
onChange={() => settings.setDisplayPointsForInternalNodes(!settings.displayPointsForInternalNodes)}
/>{" "}
Display points for internal nodes
</label>
</div>
</div>
</TabPanel>

<TabPanel>
<div className="space-y-3">
<div>
<label>
Max density of node label text:{" "}
<input
type="number"
value={settings.thresholdForDisplayingText}
onChange={(e) => settings.setThresholdForDisplayingText(parseFloat(e.target.value))}
step="0.1"
min="0"
max="10"
className="border py-1 px-1 text-grey-darkest text-sm"
/>
</label>
</div>
<div>
<label>
Max clade labels to show
<input
type="number"
value={settings.maxCladeTexts}
onChange={(e) => settings.setMaxCladeTexts(parseInt(e.target.value))}
step="1"
min="0"
max="10000000"
className="border py-1 px-1 text-grey-darkest text-sm"
/>
</label>
</div>
<div>
<label>
Color for terminal node labels
<ColorPicker
color={settings.terminalNodeLabelColor}
setColor={settings.setTerminalNodeLabelColor}
/>
</label>
</div>
<div>
<label>
Color for tree lines
<ColorPicker
color={settings.lineColor}
setColor={settings.setLineColor}
/>
</label>
</div>
<div>
<label>
Color for clade labels
<ColorPicker
color={settings.cladeLabelColor}
setColor={settings.setCladeLabelColor}
/>
</label>
</div>
</div>
</TabPanel>

<TabPanel>
<div className="space-y-3">
<h3 className="font-medium">Mutation types enabled</h3>
{Object.keys(settings.mutationTypesEnabled).map((key) => (
<div key={key}>
<label>
<input
type="checkbox"
className="mr-1"
checked={settings.mutationTypesEnabled[key]}
onChange={() => settings.setMutationTypeEnabled(key, !settings.mutationTypesEnabled[key])}
/>{" "}
{prettifyMutationTypes[key] ? prettifyMutationTypes[key] : key}
</label>
</div>
))}
</div>
</TabPanel>

<TabPanel>
<div className="space-y-3">
<h3 className="font-medium">Search</h3>
<label>
<input
type="checkbox"
className="mr-1"
checked={settings.displaySearchesAsPoints}
onChange={() => settings.setDisplaySearchesAsPoints(!settings.displaySearchesAsPoints)}
/>{" "}
Display searches as points
</label>
<div>
<label>
Point Size:{" "}
<input
type="number"
value={settings.searchPointSize}
onChange={(e) => settings.setSearchPointSize(parseInt(e.target.value))}
step="1"
min="1"
max="10"
className={`border py-1 px-1 text-grey-darkest text-sm ${!settings.displaySearchesAsPoints ? "bg-gray-200" : ""}`}
disabled={!settings.displaySearchesAsPoints}
/>
</label>
</div>
</div>
</TabPanel>
</Tabs>
</Modal>
);
};

export default DeckSettingsModal;
10 changes: 9 additions & 1 deletion taxonium_component/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8899,7 +8899,7 @@ prompts@^2.4.0:
kleur "^3.0.3"
sisteransi "^1.0.5"

prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@^15.0.0, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
Expand Down Expand Up @@ -9306,6 +9306,14 @@ react-spinners@^0.13.8:
resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==

react-tabs@4:
version "4.3.0"
resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-4.3.0.tgz#9f4db0fd209ba4ab2c1e78993ff964435f84af62"
integrity sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==
dependencies:
clsx "^1.1.0"
prop-types "^15.5.0"

react-tooltip@^4.2.21:
version "4.5.1"
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.5.1.tgz#77eccccdf16adec804132e558ec20ca5783b866a"
Expand Down

0 comments on commit 86a362c

Please sign in to comment.