solved key prop warnings from cohort and individual panels

dashboard/src/components/cohortPanel.js

@@ -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} />}

dashboard/src/components/individualPanel.js

@@ -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>
                   )}

dashboard/src/components/queryPanel.js

@@ -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)}

dashboard/src/components/scatterplot.d3.js

@@ -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");
             }

dashboard/src/components/scatterplot.js

@@ -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>