Skip to content

Commit fc16f8b

Browse files
mwittepmwittep
authored
Merge pull request #76 from Integrative-Transcriptomics/dev
Dev
2 parents 5766cec + eb66a6e commit fc16f8b

27 files changed

+1462
-379
lines changed

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,13 @@
77
"@fortawesome/free-brands-svg-icons": "^6.7.2",
88
"@fortawesome/pro-light-svg-icons": "^6.7.2",
99
"@fortawesome/react-fontawesome": "^0.2.2",
10+
"@tanstack/react-query": "^5.66.3",
11+
"@tanstack/react-table": "^8.21.2",
12+
"@tanstack/react-virtual": "^3.13.0",
1013
"@upsetjs/react": "^1.11.0",
1114
"@vitejs/plugin-react-swc": "^3.7.2",
1215
"axios": "^1.7.9",
13-
"gosling.js": "^0.17.0",
16+
"gosling.js": "^1.0.0",
1417
"higlass": "^1.13.5",
1518
"jszip": "^3.10.1",
1619
"npm-run-all": "^4.1.5",

‎src/components/Main.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,8 @@ function Main() {
453453
const handleParameters = (event) => {
454454
const { name, id: directParent } = event.target;
455455
const { value, valueAsNumber } = event.target;
456+
457+
console.log(name, value, valueAsNumber, directParent)
456458
const checkingTypeOrCluster = ["typeofstudy", "clustermethod"].includes(name)
457459
let val = checkingTypeOrCluster ? value : valueAsNumber;
458460
if (!checkingTypeOrCluster)
@@ -678,6 +680,8 @@ function Main() {
678680
* updates parameters according to the chosen parameter preset
679681
*/
680682
const handleParameterPreset = (event) => {
683+
console.log(event.target.value)
684+
681685
setParameterPreset(event.target.value);
682686
const preset = event.target.value.replace(" ", "");
683687
if (typeof parameters.parameterBox !== "undefined" && event.target.value !== "custom") {

‎src/components/Main/ConfigList.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function ConfigList({ configData }) {
77
<h3 className='header click-param' onClick={() => setShowConfig(!showConfig)}>
88
{showConfig ? "-" : "+"} Show config used
99
</h3>
10-
<div className={!showConfig && " hidden"} >
10+
<div className={!showConfig ? " hidden" : ""} >
1111
{
1212
!configData ? null : <div
1313

‎src/components/Main/Parameter.jsx

Lines changed: 68 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
2+
import { useState, useEffect, useRef } from 'react';
33
/** creates a parameter with label and input
44
*
55
* @param parameter: parameter
@@ -11,7 +11,7 @@ function Parameter({ parameter, onChange, grid }) {
1111
// for combo box
1212
let value1 = 'condition';
1313
let value2 = 'genome';
14-
if(parameter.name === 'cluster method') {
14+
if (parameter.name === 'cluster method') {
1515
value1 = parameter.combo1
1616
value2 = parameter.combo2
1717
}
@@ -27,18 +27,78 @@ function Parameter({ parameter, onChange, grid }) {
2727
</div>
2828
);
2929

30-
// combobox
30+
// combobox
3131
} else {
3232
return (
33-
<div className={grid ? 'parameter-select' : 'parameter-box margin-left'}>
33+
<div style={{ alignItems: "center" }} className={grid ? 'parameter-select' : 'parameter-box margin-left'}>
3434
<label className='element element-text' data-title={parameter.tooltip}> {parameter.name}</label>
35-
<select value={parameter.value} name={parameter.key} id={parameter.group} onChange={(e) => onChange(e)}>
36-
<option value={value1}>{parameter.combo1}</option>
37-
<option value={value2}>{parameter.combo2}</option>
38-
</select>
35+
<DropDownWithoutHeader
36+
label={parameter.name}
37+
value={parameter.value}
38+
onChange={(value) => {
39+
let tmp = { target: { name: parameter.key, value: value, id: parameter.group, key: parameter.key } }
40+
onChange(tmp)
41+
}}
42+
options={[
43+
{ value: value1, label: parameter.combo1 },
44+
{ value: value2, label: parameter.combo2 },
45+
]}
46+
/>
3947
</div>
4048
);
4149
}
4250
}
4351

52+
function DropDownWithoutHeader({ value, onChange, options, textColor = "black", style }) {
53+
54+
const [isOpen, setIsOpen] = useState(false);
55+
const [selectedOption, setSelectedOption] = useState(value);
56+
const dropdownRef = useRef(null);
57+
58+
useEffect(() => {
59+
function handleClickOutside(event) {
60+
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
61+
setIsOpen(false);
62+
}
63+
}
64+
document.addEventListener("mousedown", handleClickOutside);
65+
return () => {
66+
document.removeEventListener("mousedown", handleClickOutside);
67+
};
68+
}, []);
69+
70+
const toggleDropdown = () => setIsOpen(!isOpen);
71+
72+
const handleSelection = (option) => {
73+
setSelectedOption(option);
74+
onChange(option);
75+
setIsOpen(false);
76+
};
77+
return (<>
78+
<div className="custom-dropdown"
79+
style={{ width: "80%", color: textColor, ...style }}
80+
ref={dropdownRef}>
81+
<div className="dropdown-header" onClick={toggleDropdown}>
82+
{options.find((opt) => opt.value === selectedOption)?.label || "Select..."}
83+
<span className="dropdown-arrow">▼</span>
84+
</div>
85+
86+
{isOpen && (
87+
<div className="dropdown-list">
88+
{options.map((option, i) => (
89+
<label
90+
key={i}
91+
className="dropdown-item"
92+
onClick={() => handleSelection(option.value)}
93+
>
94+
{option.label}
95+
</label>
96+
))}
97+
</div>
98+
)}
99+
</div>
100+
</>
101+
)
102+
}
103+
44104
export default Parameter

‎src/components/Main/ParameterInputField.jsx

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import "../../css/Tabs.css";
77
import "../../css/App.css";
88
import "../../css/Grid.css";
99
import "../../css/DragDrop.css";
10+
import SingleSelectDropdown from "../Result/SingleSelect";
1011

1112

1213
function FormConfig({
@@ -160,12 +161,20 @@ function FormConfig({
160161
) : (
161162
<>
162163
{parameters.setup.typeofstudy.value === "genome" ? (
164+
163165
<div
166+
164167
className={parameters.setup.typeofstudy.value === "genome"
165168
? "file-box-align"
166169
: "file-box-align vis-hidden"}
167170
title='Select the xmfa alignment file containing the aligned genomes.'
168171
>
172+
<div style={{
173+
display: "flex",
174+
alignItems: "center",
175+
gap: "12px",
176+
width: "50vw",
177+
}}>
169178
<p className='file-row'>Alignment File</p>
170179
<label className='element-row file-row' htmlFor='alignment-file'>
171180
<input
@@ -181,6 +190,7 @@ function FormConfig({
181190
)}
182191
</label>
183192
</div>
193+
</div>
184194
) : (
185195
<></>
186196
)}
@@ -208,30 +218,38 @@ function FormConfig({
208218

209219
<div className={showParam ? "show margin-left file-column" : "hidden"}>
210220
<div className='element-row'>
211-
<label className='element preset-label' htmlFor='preset'>
212-
{" "}
213-
parameter preset
214-
</label>
215-
<select
216-
className='param-preset'
217-
value={parameterPreset}
218-
name='parameter-preset'
219-
id='preset'
220-
onChange={(e) => handleParameterPreset(e)}
221+
<div
222+
style={{
223+
display: "flex",
224+
alignItems: "center",
225+
gap: "12px",
226+
width: "50vw",
227+
}}
221228
>
222-
<option value='custom'>custom</option>
223-
<option value='very specific'>very specific</option>
224-
<option value='more specific'>more specific</option>
225-
<option value='default'>default</option>
226-
<option value='more sensitive'>more sensitive</option>
227-
<option value='very sensitive'>very sensitive</option>
228-
</select>
229+
230+
<SingleSelectDropdown
231+
label='Prediction parameters Preset'
232+
value={parameterPreset}
233+
onChange={(value) => {
234+
let tmp = { target: { name: 'parameter-preset', value: value, id: 'preset' } }
235+
handleParameterPreset(tmp)
236+
}}
237+
options={[
238+
{ value: 'custom', label: 'custom' },
239+
{ value: 'very specific', label: 'very specific' },
240+
{ value: 'more specific', label: 'more specific' },
241+
{ value: 'default', label: 'default' },
242+
{ value: 'more sensitive', label: 'more sensitive' },
243+
{ value: 'very sensitive', label: 'very sensitive' },
244+
]}
245+
headerStyle={{ fontSize: '1.05em' }}
246+
/>
229247

230248
<label
231249
className='grid-checkbox'
232250
htmlFor='check'
233251
data-title='If this option is enabled, the normalized RNA-seq graphs are written. Note that writing the graphs will increase the runtime.'
234-
>
252+
>
235253
<input
236254
type='checkbox'
237255
name='rna-seq-graph'
@@ -241,6 +259,7 @@ function FormConfig({
241259
write rna-seq graph
242260
</label>
243261
</div>
262+
</div>
244263

245264
{!parameters.parameterBox ? (
246265
<p></p>

‎src/components/Main/UploadFile.jsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,12 @@ function UploadFile({ file, id, studyType, genomes, saveIndividualFile, show, sa
6464
if (label === 'genomeannotation') {
6565
return (
6666
<div className={show ? 'file-box' : 'hidden'} data-title={file.tooltip}>
67+
<div style={{
68+
display: "flex",
69+
alignItems: "center",
70+
gap: "12px",
71+
width: "50vw",
72+
}} >
6773
<p className='file-row'>{file.name}</p>
6874
<label className='element-row file-row element-text'>
6975

@@ -86,11 +92,18 @@ function UploadFile({ file, id, studyType, genomes, saveIndividualFile, show, sa
8692
</>
8793
}
8894
</label>
95+
</div>
8996
</div>
9097
)
9198
} else {
9299
return (
93100
<div className={show ? 'file-box' : 'hidden'} data-title={file.tooltip}>
101+
< div style={{
102+
display: "flex",
103+
alignItems: "center",
104+
gap: "12px",
105+
width: "50vw",
106+
}} >
94107
<p className='file-row'>{file.name}</p>
95108
<label className='element-row file-row element-text'>
96109

@@ -101,6 +114,7 @@ function UploadFile({ file, id, studyType, genomes, saveIndividualFile, show, sa
101114
{typeof fileName === 'undefined' ? (disabled === true ? <p className='file-name'>No file needed.</p> : <p className='file-name'>No file selected.</p>)
102115
: <p className='file-name'>{fileName}</p>}
103116
</label>
117+
</div>
104118
</div>
105119
)
106120
}

0 commit comments

Comments
 (0)