bobby/open_dbm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

solved key prop warnings from cohort and individual panels

Browse Source
This commit is contained in:
Carla Floricel
2022-08-02 10:48:10 -04:00
parent 05e52aa52b
commit dac4e30a42
5 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
dashboard/src/components/cohortPanel.js
View File

@@ -72,6 +72,7 @@ function CohortPanel() {
attr.forEach((e, i) => {
attrDict[e] = metadataColorList[i + 1]
})
if(data.length > 0)
data.forEach(e => {
if (e['attr']) {
metaColorData[e['id']] = attrDict[e['attr']]
@@ -280,7 +281,7 @@ function CohortPanel() {
<div style={{ display: "flex", flexDirection: "row", justifyContent: 'flex-end', margin: "auto", marginLeft: "20px", opacity: "0" }} id="metadataAttributes">
<div style={{ marginLeft: "5px", fontWeight: "bolder" }}>Attributes:</div>
{metadataColorList.map((value, index) =>
<div style={{ display: "flex", flexDirection: "row", opacity: "0", marginLeft: "20px" }} id={value + "AttrContainer"} className="metadataAttr">
<div style={{ display: "flex", flexDirection: "row", opacity: "0", marginLeft: "20px" }} id={value + "AttrContainer"} key={value+"color"} className="metadataAttr">
<svg height="14" width="14" transform="translate(3,3)" id="1circle">
<circle cx="7" cy="7" r="50%" fill={value === "none" ? "#69b3a2" : value} />
@@ -355,7 +356,7 @@ function CohortPanel() {
<button type="button" className={`btn ${checkedHideIdsState === true ? 'btn-primary' : 'btn-outline-primary'} btn-sm`} style={{ marginTop: "10px" }} onClick={handleHideIds}>Hide Unselected</button>
<div style={{ display: "inline-flex", flexDirection: "column", marginTop: "10px", height: "94%", overflowY: "auto", }}>
{idData.map((value, index) =>
<label className="id_checkbox_container" id={value + "_id_container"}>
<label className="id_checkbox_container" id={value + "_id_container"} key={value + "id"}>
<input
type="checkbox"
id={value + "_id"}
@@ -369,7 +370,7 @@ function CohortPanel() {
<Col id="distributionChartContainer" style={{ height: "93%", overflowY: "auto" }}>
<h6 style={{ fontWeight: "bolder" }}>Attribute Distribution</h6>
{distrArgs.map((value) =>
<div style={{ display: "inline-flex", flexDirection: "row", marginLeft: "10px" }}>
<div style={{ display: "inline-flex", flexDirection: "row", marginLeft: "10px" }} key={value + "distr"}>
{<DistributionChart data={distrData} attr={value} id={"distributionChart_" + value}
filteredIds={filteredIdData} metadata={metadataButton === true ? metadata : []}
hideIds={checkedHideIdsState} metadataAttrColor={metadataAttrColor} />}

17
dashboard/src/components/individualPanel.js
View File

@@ -276,6 +276,7 @@ function IndividualPanel() {
if (corrMatrix_args.length === 0) {
corrMatrix_args = meanEmotionsSoft.map(e => e.replace("_mean", ""))
}
var sendId = typeof id === 'string' ? id : selectedId
fetch("/updateCorrMatrix", {
method: "POST",
headers: {
@@ -284,7 +285,7 @@ function IndividualPanel() {
body: JSON.stringify({
"corrMatrix_args": corrMatrix_args,
"individual": true,
"id": id ? id : selectedId
"id": sendId
})
}).then(
res => res.json()
@@ -360,7 +361,7 @@ function IndividualPanel() {
step="1" value={timeslotValue} onChange={setTime} list="steplist"></input>
<datalist id="steplist" style={{ display: "inline-flex", marginTop: "-10px !important" }}>
{timepoints.map((e, i) =>
<option value={e} style={{ marginLeft: "2px", marginRight: "4px", fontSize: "0.7rem" }}>{i === 0 ? "*" : e}</option>
<option value={e} style={{ marginLeft: "2px", marginRight: "4px", fontSize: "0.7rem" }} key={e+"timepoint"}>{i === 0 ? "*" : e}</option>
)}
</datalist>
</div>
@@ -391,7 +392,7 @@ function IndividualPanel() {
<Row style={{ marginTop: "300px" }}>
<div style={{ width: "100%", height: "3vh", fontSize: "0.7rem", paddingLeft: "0px", paddingRight: "0px", marginBottom: "5px" }}>
{AUsButton && emotions.map((value, index) =>
<label className="id_checkbox_container" style={{ marginRight: "3px" }}>
<label className="id_checkbox_container" style={{ marginRight: "3px" }} key={value+"AU"}>
<input
type="checkbox"
id={value + "_highlight"}
@@ -410,7 +411,7 @@ function IndividualPanel() {
<button type="button" className='btn btn-primary btn-sm'>Filter ID(s)</button>
<div style={{ fontSize: "0.8rem", width: "210px", display: "inline-flex", flexDirection: "column", marginTop: "10px", overflowY: "auto" }}>
{idData.map((value, index) =>
<label className="id_checkbox_container" id={value + "_id_"}>
<label className="id_checkbox_container" id={value + "_id_"} key={value+"idIndividual"}>
<input
type="checkbox"
id={value + "_id_checkbox"}
@@ -442,7 +443,7 @@ function IndividualPanel() {
</Col>
<Col className='col-2' style={{ width: "77%", height: "100%", overflowY: "hidden" }}>
{facialAttr.map((value) =>
<div style={{ display: "inline-flex", flexDirection: "row", padding: "10px", fontSize: "0.8rem", }}>
<div style={{ display: "inline-flex", flexDirection: "row", padding: "10px", fontSize: "0.8rem", }} key={value+"facHistogram"}>
{<Histogram data={rawFacialData} derivedData={derivedData} attr={value} id={"histogram_" + value} color={["#41ab5d", "#c7e9c0"]} timeframe={timeslotValue} />}
</div>
)}
@@ -474,7 +475,7 @@ function IndividualPanel() {
<Col className='col-4'>
<h6 style={{ marginBotom: "10px", fontWeight: "bolder" }}>Speech</h6>
{speechDerivedData && speechDerivedData.map((value, index) =>
<div style={{ fontSize: "0.8rem" }}>{DBMDict[value]['label'] + ": " + derivedData[value]}</div>
<div style={{ fontSize: "0.8rem" }} key={value +"speech"}>{DBMDict[value]['label'] + ": " + derivedData[value]}</div>
)}
</Col>
</div>}
@@ -513,7 +514,7 @@ function IndividualPanel() {
</Col>
<Col className='col-2' style={{ width: "80%", height: "100%", overflowY: "hidden" }}>
{movementAttr.map((value) =>
<div style={{ display: "inline-flex", flexDirection: "row", padding: "10px", fontSize: "0.8rem", }}>
<div style={{ display: "inline-flex", flexDirection: "row", padding: "10px", fontSize: "0.8rem", }} key={value+"movHistogram"}>
{<Histogram data={rawMovementData} derivedData={derivedData} attr={value} id={"histogram_" + value} color={["#4292c6", "#c6dbef"]} timeframe={timeslotValue} />}
</div>
)}
@@ -538,7 +539,7 @@ function IndividualPanel() {
</Col>
<Col className='col-2' style={{ width: "80%", height: "100%", overflowY: "hidden", fontSize: "0.8rem", }}>
{acousticAttr.map((value) =>
<div style={{ display: "inline-flex", flexDirection: "row", padding: "10px" }}>
<div style={{ display: "inline-flex", flexDirection: "row", padding: "10px" }} key={value+"acoHistogram"}>
{<Histogram data={rawAcousticData} derivedData={derivedData} attr={value} id={"histogram_" + value} color={["#807dba", "#dadaeb"]} timeframe={timeslotValue} />}
</div>
)}

16
dashboard/src/components/queryPanel.js
View File

@@ -5,11 +5,11 @@ const QueryPanel = ({ allAcousticArg, allMovementArg, allSpeechArg, allFacialArg
<div>
{allFacialArg.length > 0 && <h6 style={{ marginTop: "10px", fontWeight: "bolder" }}>Facial</h6>}
{allFacialArg.length > 0 && allFacialArg.map((value, index) =>
<div><label className="">
<div key= {idVal + value+"key"}><label className="">
<input
type="checkbox"
id={idVal + value}
key={idVal + value}
checked={checkedState[index]}
className={idVal}
onChange={() => handleCheckboxChange(index)}
@@ -20,11 +20,11 @@ const QueryPanel = ({ allAcousticArg, allMovementArg, allSpeechArg, allFacialArg
}
{allMovementArg.length > 0 && <h6 style={{ marginBotom: "10px", fontWeight: "bolder" }}>Movement</h6>}
{allMovementArg.length > 0 && allMovementArg.map((value, index) =>
<div><label className="">
<div key={idVal + value+"key"}><label className="">
<input
type="checkbox"
id={idVal + value}
key="{idVal + value}"
checked={checkedState[index + allFacialArg.length]}
className={idVal}
onChange={() => handleCheckboxChange(index + allFacialArg.length)}
@@ -35,11 +35,11 @@ const QueryPanel = ({ allAcousticArg, allMovementArg, allSpeechArg, allFacialArg
}
{allAcousticArg.length > 0 && <h6 style={{ marginBotom: "10px", fontWeight: "bolder" }}>Acoustics</h6>}
{allAcousticArg.length > 0 && allAcousticArg.map((value, index) =>
<div><label className="">
<div key={idVal + value+"key"}><label className="">
<input
type="checkbox"
id={idVal + value}
key={idVal + value}
checked={checkedState[index + allFacialArg.length + allMovementArg.length]}
className={idVal}
onChange={() => handleCheckboxChange(index + allFacialArg.length + allMovementArg.length)}
@@ -50,11 +50,11 @@ const QueryPanel = ({ allAcousticArg, allMovementArg, allSpeechArg, allFacialArg
}
{allSpeechArg.length > 0 && <h6 style={{ fontWeight: "bolder" }}>Speech</h6>}
{allSpeechArg.map((value, index) =>
<div><label className="">
<div key={idVal + value+"key"}><label className="">
<input
type="checkbox"
id={idVal + value}
key={idVal + value}
checked={checkedState[index + allFacialArg.length + allAcousticArg.length + allMovementArg.length]}
className={idVal}
onChange={() => handleCheckboxChange(index + allFacialArg.length + allAcousticArg.length + allMovementArg.length)}

1
dashboard/src/components/scatterplot.d3.js
View File

@@ -100,7 +100,6 @@ export default class ScatterplotD3 {
$(".dot_" + k).css("fill", "red")
})
if($('#metadataButton').hasClass("btn-outline-primary")){
console.log("e checked")
}
svg.property("value", value).dispatch("input");
}

1
dashboard/src/components/scatterplot.js
View File

@@ -14,7 +14,6 @@ const Scatterplot = ({ data, filteredIds, metadata, hideIds, metadataAttrColor }
}, [data])
return (
// <div ref={ref}></div>
<React.Fragment>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<h6 style={{ fontWeight: "bolder" }}>PCA</h6>