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

ui for assay selection #4

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

ui for assay selection #4

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
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<title>LunaticDB Explorer</title>
<script src="./server.js"></script>
</head>
<body>
Expand Down
89 changes: 81 additions & 8 deletions src/TabComps/Explorer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,11 @@ const Explorer = (props) => {
const [plotColorGradientMinMax, setPlotColorGradientMinMax] = useState(null);

// #### ASSAY ####
const [chooseAssayUI, setChooseAssayUI] = useState(null);
const [assayNamesUI, setAssayNamesUI] = useState(null);
const [selectedAssayNameUI, setSelectedAssayNameUI] = useState(null);
const [normalizeUI, setNormalizeUI] = useState(null);

const [assay, setAssay] = useState(null);
const [nomalizeCountsUI, setNormalizeCountsUI] = useState(null);
const [expression, setExpression] = useState(null);

useEffect(() => {
Expand All @@ -97,14 +99,11 @@ const Explorer = (props) => {
// when the component is Loaded
async function fetchData() {
let markers = await wobbegongapi.findMarkerFiles(record.path);
console.log(markers);
let conversion = await wobbegongapi.convertAllFiles(record.path, markers);
console.log(conversion);
let mapping = await wobbegongapi.matchMarkersToExperiment(
conversion.path,
conversion.markers
);
console.log(mapping);
let sce = await wb.load(
conversion.path,
wobbegongapi.fetchJson,
Expand Down Expand Up @@ -133,10 +132,27 @@ const Explorer = (props) => {
setSelectedColNameUI("0");
}

let assay_names = await sce.assayNames();
let chosen = wobbegongapi.chooseAssay(sce);

if (assay_names !== null) {
let asynames = [];
let chosen_index = null;
assay_names.forEach((x, i) => {
asynames.push({ key: String(i), label: x });
if (chosen.assay == x) {
chosen_index = String(i);
}
});
setAssayNamesUI(asynames);
setSelectedAssayNameUI(chosen_index);
setNormalizeUI(chosen.normalize);
}

let red_names = await sce.reducedDimensionNames();
if (red_names !== null) {
let rednames = [];
sce.reducedDimensionNames().forEach((x, i) => {
red_names.forEach((x, i) => {
rednames.push({ key: String(i), label: x });
});
setRedDimNamesUI(rednames);
Expand Down Expand Up @@ -197,6 +213,28 @@ const Explorer = (props) => {
}
}, [selectedredDimNamesUI]);

// When an Assay for selected
useEffect(() => {
// apparently a new way to call async functions within components
// to keep react happy
async function fetchData() {
let ass = await sce.assay(
assayNamesUI[parseInt(selectedAssayNameUI)]["label"]
);
let vals = await ass.row(0, { asDense: true });
if (normalizeUI) {
let sf = await wobbegongapi.computeSizeFactors(ass);
console.log(sf);
vals = wobbegongapi.normalizeCounts(vals, sf, true);
}
console.log(vals);
}

if (sce !== null) {
fetchData();
}
}, [selectedAssayNameUI]);

// useEffect(() => {
// // apparently a new way to call async functions within components
// // to keep react happy
Expand All @@ -209,7 +247,7 @@ const Explorer = (props) => {
// if (chosen.normalize) {
// let sf = await wobbegongapi.computeSizeFactors(ass);
// console.log(sf);
// vals = await wobbegongapi.normalizeCounts(vals, sf, true);
// vals = wobbegongapi.normalizeCounts(vals, sf, true);
// }
// console.log(vals);
// }
Expand Down Expand Up @@ -243,7 +281,6 @@ const Explorer = (props) => {
const colKey = colNamesUI[parseInt(selectedColNameUI)]["label"];

for (let i = 0; i < data.x.length; i++) {
console.log(coldataCache);
if (colKey in coldataCache) {
const _col = coldataCache[colKey];
if (_col.type == "string") {
Expand Down Expand Up @@ -397,6 +434,14 @@ const Explorer = (props) => {
setSelectedColNameUI(obj.key);
}

function onAssaySelectionChange(obj) {
setSelectedAssayNameUI(obj.key);
}

function onNomalizeUIChange(obj) {
setNormalizeUI(obj.target.checked);
}

return (
<Content>
<Collapse
Expand Down Expand Up @@ -463,6 +508,33 @@ const Explorer = (props) => {
</Dropdown>
</>
)}
{assayNamesUI && sce && selectedAssayNameUI && (
<>
{" "}
Explore assay:{" "}
<Dropdown
menu={{
items: assayNamesUI,
selectable: true,
defaultSelectedKeys: [selectedAssayNameUI],
onSelect: onAssaySelectionChange,
}}
trigger={["click"]}
>
<a onClick={(e) => e.preventDefault()}>
<Space>
{assayNamesUI[parseInt(selectedAssayNameUI)]["label"]}
<DownOutlined />
</Space>
</a>
</Dropdown>{" "}
{normalizeUI !== null && (
<Checkbox checked={normalizeUI} onChange={onNomalizeUIChange}>
Normalize ?
</Checkbox>
)}
</>
)}
<Flex gap="middle" vertical>
<Splitter
style={{
Expand Down Expand Up @@ -546,6 +618,7 @@ const Explorer = (props) => {
Object.keys(plotColorMapper),
(item, i) => (
<Typography.Text
key={i}
style={{
color: plotColorMapper[item],
}}
Expand Down