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

fixed requests after first end-user evaluation

Browse Source
This commit is contained in:
Carla Floricel
2022-08-08 19:52:28 -04:00
parent d5662113b6
commit b5569e3bbb
119 changed files with 406 additions and 117673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
dashboard/src/DBM_attribute_dict.json
View File

@@ -2505,69 +2505,331 @@
"data_category": "derived",
"range": []
},
"fac_tremor_median_5": {
"label": "tremor_median_5",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_tremor_median_12": {
"label": "tremor_median_12",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_tremor_median_8": {
"label": "tremor_median_8",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_tremor_median_48": {
"label": "tremor_median_48",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_tremor_median_54": {
"label": "tremor_median_54",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_tremor_median_28": {
"label": "tremor_median_28",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_tremor_median_51": {
"label": "tremor_median_51",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_tremor_median_66": {
"label": "tremor_median_66",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_tremor_median_57": {
"label": "tremor_median_57",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_features_mean_5": {
"label": "features_mean_5",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_features_mean_12": {
"label": "features_mean_12",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_features_mean_8": {
"label": "features_mean_8",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_features_mean_48": {
"label": "features_mean_48",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_features_mean_54": {
"label": "features_mean_54",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_features_mean_28": {
"label": "features_mean_28",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_features_mean_51": {
"label": "features_mean_51",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_features_mean_66": {
"label": "features_mean_66",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_features_mean_57": {
"label": "features_mean_57",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_disp_median_5": {
"label": "disp_median_5",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_disp_median_12": {
"label": "disp_median_12",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_disp_median_8": {
"label": "disp_median_8",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_disp_median_48": {
"label": "disp_median_48",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_disp_median_54": {
"label": "disp_median_54",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_disp_median_28": {
"label": "disp_median_28",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_disp_median_51": {
"label": "disp_median_51",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_disp_median_66": {
"label": "disp_median_66",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_disp_median_57": {
"label": "disp_median_57",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_corr_5": {
"label": "corr_5",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_corr_12": {
"label": "corr_12",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_corr_8": {
"label": "corr_8",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_corr_48": {
"label": "corr_48",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_corr_54": {
"label": "corr_54",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_corr_28": {
"label": "corr_28",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_corr_51": {
"label": "corr_51",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_corr_66": {
"label": "corr_66",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_corr_57": {
"label": "corr_57",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "raw",
"range": []
},
"fac_tremor_median_5_mean": {
"label": "tremor_median_5_mean",
"dbm_category": "facial",
"prefix": "fac_",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "derived",
"range": []
},
"fac_tremor_median_12_mean": {
"label": "tremor_median_12_mean",
"dbm_category": "facial",
"prefix": "fac_",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "derived",
"range": []
},
"fac_tremor_median_8_mean": {
"label": "tremor_median_8_mean",
"dbm_category": "facial",
"prefix": "fac_",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "derived",
"range": []
},
"fac_tremor_median_48_mean": {
"label": "tremor_median_48_mean",
"dbm_category": "facial",
"prefix": "fac_",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "derived",
"range": []
},
"fac_tremor_median_54_mean": {
"label": "tremor_median_54_mean",
"dbm_category": "facial",
"prefix": "fac_",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "derived",
"range": []
},
"fac_tremor_median_28_mean": {
"label": "tremor_median_28_mean",
"dbm_category": "facial",
"prefix": "fac_",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "derived",
"range": []
},
"fac_tremor_median_51_mean": {
"label": "tremor_median_51_mean",
"dbm_category": "facial",
"prefix": "fac_",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "derived",
"range": []
},
"fac_tremor_median_66_mean": {
"label": "tremor_median_66_mean",
"dbm_category": "facial",
"prefix": "fac_",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "derived",
"range": []
},
"fac_tremor_median_57_mean": {
"label": "tremor_median_57_mean",
"dbm_category": "facial",
"prefix": "fac_",
"dbm_category": "movement",
"prefix": "mov_",
"data_category": "derived",
"range": []
},
"fac_asymmaskmouth": {
"label": "asymmaskmouth",
"dbm_category": "facial",

3
dashboard/src/components/cohortPanel.css
View File

@@ -14,11 +14,12 @@
#metadataAttributes {
display: flex;
flex--direction: row;
flex-direction: row;
justify-content: flex-end;
margin: auto;
margin-left: 20px;
opacity: 0;
color: #000;
}
.metadataAttr {

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

@@ -37,7 +37,7 @@ function CohortPanel() {
const [allDBMArg, setAllDBMArg] = useState([])
const [metadata, setMetadata] = useState([])
const metadataColorList = ['none', 'gold', 'blue', 'brown', 'purple', 'orange']
const metadataColorList = ['none', 'gold', 'blue', 'deeppink', 'darkviolet', 'cyan', 'black', 'brown', 'greenyellow', 'orchid','mediumpurple']
const [metadataAttrColor, setMetadataAttrColor] = useState({})
useEffect(() => {
@@ -64,9 +64,9 @@ function CohortPanel() {
res => res.json()
).then(
data => {
setMetadata(data)
var attr = [...new Set(Object.values(data).map(el => el['attr']).filter(e => e != null))]
if (attr.length <= metadataColorList.length - 1) {
setMetadata(data)
var metaColorData = {}
var attrDict = {}
attr.forEach((e, i) => {
@@ -228,11 +228,12 @@ function CohortPanel() {
const handleIdCheckboxChange = ev => {
$('#' + ev.target.id).is(":checked") ?
$(".dot_" + ev.target.id.replace("_id", "")).css("fill", "red") :
$(".dot_" + ev.target.id.replace("_id", "")).css("fill", "darkorange") :
$(".dot_" + ev.target.id.replace("_id", "")).css("fill",
(Object.keys(metadataAttrColor).includes(ev.target.id.replace("_id", "")) &
metadataButton) ? metadataAttrColor[ev.target.id.replace("_id", "")] : "#69b3a2")
metadataButton
? metadataAttrColor[ev.target.id.replace("_id", "")] : "#41ab5d")
var filteredIdData_aux = idData.filter(id =>
$('#' + id + "_id").is(":checked"))
@@ -272,16 +273,15 @@ function CohortPanel() {
<div id="metaDataButton">
<div>
<button type="button" className={`btn btn-sm ${metadataButton === true ? 'btn-outline-primary' : 'btn-outline-secondary'}`}
id="metadataButton" onClick={handleMetadata}>Metadata</button>
id="metadataButton" onClick={handleMetadata}>Extra Attributes</button>
</div>
<div id="metadataAttributes">
<div id="attributesTag" >Attributes:</div>
{metadataColorList.map((value, index) =>
<div id={value + "AttrContainer"} key={value + "color"} className="metadataAttr">
<svg height="14" width="14" transform="translate(3,3)" id={value + "circle"}>
<circle cx="7" cy="7" r="50%" fill={value === "none" ? "#69b3a2" : value} />
<circle cx="7" cy="7" r="50%" fill={value === "none" ? "#41ab5d" : value} />
</svg>
<div style={{ color: (value === "none" ? "#69b3a2" : value) }}
<div
id={(value !== "none" ? value : "none") + "color"}>{value === "none" ? "None" : ""}</div>
</div>
)}

6
dashboard/src/components/colorLegend.d3.js
View File

@@ -21,12 +21,12 @@ export default class ColorLegendD3 {
return
}
const asymetryColorScale = d3.scaleLinear().domain([0, 10]).range(["white", 'pink'])
const asymetryColorScale = d3.scaleLinear().domain([0, 40]).range(["white", '#de77ae'])
const painColorScale = d3.scaleLinear().domain([0, 1]).range(["white", 'red'])
const expressivityColorScale = d3.scaleLinear().domain([0, 1]).range(["white", 'orange'])
const AUsColorScale = d3.scaleLinear().domain([0, 5]).range(["white", '#cb181d'])
const negMovementColorScale = d3.scaleLinear().domain([-1, 0]).range(['#cb181d', "#fff5f0"])
const posMovementColorScale = d3.scaleLinear().domain([0, 1]).range(["#fff5f0", '#cb181d'])
const negMovementColorScale = d3.scaleLinear().domain([-3.14, 0]).range(['#cb181d', "#fff5f0"])
const posMovementColorScale = d3.scaleLinear().domain([0, 3.14]).range(["#fff5f0", '#cb181d'])
const vissibleAUs = ['AU01', 'AU02', 'AU04', 'AU05', 'AU06', 'AU07', 'AU09', 'AU10', 'AU12', 'AU14', 'AU15', 'AU17', 'AU20', 'AU23', 'AU25', 'AU26']
if (parseInt(timeframe) === 0) {

9
dashboard/src/components/correlationMatrix.d3.js
View File

@@ -16,13 +16,14 @@ export default class CorrelationMatrixD3 {
.attr('height', height)
var values = Object.values(data).map(el => Object.values(el))
var keys = Object.keys(data).map(e => e.replace("aco_", "").replace("fac_", "").replace("mov_", ""))
const minRowValue = values.map(el => Math.min(...(el)))
const maxRowValue = values.map(el => Math.max(...(el)))
const minValue = Math.min(...(minRowValue))
const maxValue = Math.max(...(maxRowValue))
const colorScale = d3.scaleLinear().domain([minValue, 0, maxValue]).range(["#fdae61", "#f7f7f7", "#67a9cf"])
const colorScale = d3.scaleLinear().domain([minValue, 0, maxValue]).range(["#c34e4c", "#f2f2f2", "#4476a9"])
var xScale = d3.scaleBand()
.domain(keys).range([80, width - 20])
@@ -80,15 +81,15 @@ export default class CorrelationMatrixD3 {
.attr("y2", "100%");
linearGradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#fdae61")
.attr("stop-color", "#c34e4c")
linearGradient.append("stop")
.attr("offset", "50%")
.attr("stop-color", "#f7f7f7")
.attr("stop-color", "#f2f2f2")
linearGradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", "#67a9cf")
.attr("stop-color", "#4476a9")
const colorLegendHeight = height / 3

17
dashboard/src/components/distributionChart.d3.js
View File

@@ -31,9 +31,6 @@ export default class DistributionChart {
var metadataDict = {}
if (metadata.length > 0) {
var metadataAttr = [...new Set(Object.values(metadata).map(el => el['attr']).filter(e => e != null))]
var metadataColor = d3.scaleOrdinal().domain(metadataAttr)
.range(["gold", "blue"])
var d = Object.values(metadata).map(el => [el['id'], el['attr']])
d.forEach(el => {
metadataDict[el[0]] = el[1]
@@ -41,7 +38,7 @@ export default class DistributionChart {
}
var yScale = d3.scaleLinear()
.domain([Math.min(...values), Math.max(...values)])
.domain(DBMDict[attr]['range'].length > 0 ? DBMDict[attr]['range'] : [Math.min(...values), Math.max(...values)])
.range([height - 30, 20])
svg.append("g")
.attr("transform", "translate(40 ,0)")
@@ -97,30 +94,30 @@ export default class DistributionChart {
.attr("cx", d => (xScale(attr) + xScale.bandwidth() / 2 - Math.random() * jitterWidth - 5))
.attr("cy", d => yScale(d[1]))
.attr("r", 5.5)
.style("fill", d => filteredIds.includes(d[0]) ? "red" : (metadataDict[d[0]] ? metadataAttrColor[d[0]] : "#69b3a2"))
.style("fill", d => filteredIds.includes(d[0]) ? "darkorange" : (metadataDict[d[0]] ? metadataAttrColor[d[0]] : "#41ab5d"))
.style("opacity", d => filteredIds.includes(d[0]) ? "0.4" : hideIds ? "0" : "0.4")
.attr("stroke", "grey")
.attr("stroke-width", '1.5px')
.on("mouseover", d => {
var className = "dot_" + d.target.id.replace("_distr_" + attr, "")
d3.selectAll("." + className).style("fill", "red")
d3.selectAll("." + className).style("fill", "darkorange")
$("#" + d.target.id.replace("_distr_" + attr, "") + "_id_container").css("color", "#fc6a03")
keys.forEach(k => {
if ($('#' + k + "_id").is(":checked"))
$(".dot_" + k).css("fill", "red")
$(".dot_" + k).css("fill", "darkorange")
})
})
.on("mouseout", d => {
keys.forEach(k => {
$(".dot_" + k).css("fill", filteredIds.includes(k) ? "red" : (metadataDict[k] ? metadataAttrColor[k] : "#69b3a2"))
$(".dot_" + k).css("fill", $('#' + k+ "_id").is(":checked") ? "darkorange" : (metadataDict[k] ? metadataAttrColor[k] : "#41ab5d"))
if ($('#' + k + "_id").is(":checked")) {
$(".dot_" + k).css("fill", "red")
$(".dot_" + k).css("fill", "darkorange")
}
})
$(".id_checkbox_container").css("color", "black")
})
.append("title")
.text(d => "ID: " + String(d[0]) + "\n" + "Value: " + d[1])
.text(d => "ID: " + String(d[0]) + "\n" + "Value: " + String(d[1]))

32
dashboard/src/components/headSVG.js
View File

@@ -104,16 +104,16 @@ const HeadSVG = ({ width, height }, ref) => {
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(141, 90)" id="au4RightHighlight" className="sad_highlight fea_highlight ang_highlight emotion_highlight">
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
</svg>
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(148, 65)" id="au1RightHighlight" className="sad_highlight sur_highlight fea_highlight emotion_highlight">
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(148, 65)" id="au2RightHighlight" className="sur_highlight fea_highlight emotion_highlight">
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
</svg>
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(35, 65)" id="au1LeftHighlight" className="sad_highlight sur_highlight fea_highlight emotion_highlight">
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(35, 65)" id="au2LeftHighlight" className="sur_highlight fea_highlight emotion_highlight">
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
</svg>
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(118, 68)" id="au2RightHighlight" className="sur_highlight fea_highlight emotion_highlight">
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(118, 68)" id="au1RightHighlight" className="sad_highlight sur_highlight fea_highlight emotion_highlight">
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
</svg>
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(68, 68)" id="au2LeftHighlight" className="sur_highlight fea_highlight emotion_highlight">
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(68, 68)" id="au1LeftHighlight" className="sad_highlight sur_highlight fea_highlight emotion_highlight">
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
</svg>
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(162, 104)" id="au5RightHighlight" className="sur_highlight fea_highlight ang_highlight emotion_highlight">
@@ -197,22 +197,22 @@ const HeadSVG = ({ width, height }, ref) => {
<path id="au4Right_path" strokeWidth="12%" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" />
<text className='AUtooltip' opacity='0' x="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >4</text>
</svg>
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU01" viewBox="0 0 16 16" transform="translate(150, 68)" id="au1Right">
<path id="au1Right_path" strokeWidth="12%" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" />
<text className='AUtooltip' opacity='0' x="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >1</text>
</svg>
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU01" viewBox="0 0 16 16" transform="translate(37, 67)" id="au1Left">
<path id="au1Left_path" strokeWidth="12%" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" />
<text className='AUtooltip' opacity='0' x="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >1</text>
</svg>
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU02" viewBox="0 0 16 16" transform="translate(120, 70)" id="au2Right">
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU02" viewBox="0 0 16 16" transform="translate(150, 68)" id="au2Right">
<path id="au2Right_path" strokeWidth="12%" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" />
<text className='AUtooltip' opacity='0' x="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >2</text>
</svg>
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU02" viewBox="0 0 16 16" transform="translate(70, 70)" id="au2Left">
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU02" viewBox="0 0 16 16" transform="translate(37, 67)" id="au2Left">
<path id="au2Left_path" strokeWidth="12%" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" />
<text className='AUtooltip' opacity='0' x="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >2</text>
</svg>
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU01" viewBox="0 0 16 16" transform="translate(120, 70)" id="au1Right">
<path id="au1Right_path" strokeWidth="12%" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" />
<text className='AUtooltip' opacity='0' x="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >1</text>
</svg>
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU01" viewBox="0 0 16 16" transform="translate(70, 70)" id="au1Left">
<path id="au1Left_path" strokeWidth="12%" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" />
<text className='AUtooltip' opacity='0' x="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >1</text>
</svg>
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU05" viewBox="0 0 16 16" transform="translate(165, 105)" id="au5Right">
<path id="au5Right_path" strokeWidth="12%" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" />
<text className='AUtooltip' opacity='0' x="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >5</text>
@@ -272,11 +272,11 @@ const HeadSVG = ({ width, height }, ref) => {
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU07" viewBox="0 0 20 20" transform="translate(30, 125), rotate(-45)" id="au7Left">
<path id="au7Left_path" strokeWidth="12%" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
<text className='AUtooltip' opacity='0' x="80%" y="20%" transform='rotate(45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">23</text>
<text className='AUtooltip' opacity='0' x="80%" y="20%" transform='rotate(45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">7</text>
</svg>
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU07" viewBox="0 0 20 20" transform="translate(150, 127), rotate(45)" id="au7Right">
<path id="au7Right_path" strokeWidth="12%" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
<text className='AUtooltip' opacity='0' x="0%" y="80%" transform='rotate(-45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >23</text>
<text className='AUtooltip' opacity='0' x="0%" y="80%" transform='rotate(-45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >7</text>
</svg>
</div>

2
dashboard/src/components/histogram.d3.js
View File

@@ -39,7 +39,7 @@ export default class HistogramD3 {
var maxVal = DBMDict[attr]['range'].length > 0 ? DBMDict[attr]['range'][1] : Math.max(...values)
var yScale = d3.scaleLinear()
.range([height - 20, 5])
.domain([minVal, maxVal])
.domain(attr ==="aco_int" ? [0, maxVal]: [minVal, maxVal])
var yAxis = axisLeft(yScale)

2
dashboard/src/components/individualPanel.css
View File

@@ -333,4 +333,4 @@
height: 100%;
overflow-y: hidden;
font-size: 0.8rem;
}
}

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

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Row, Col } from 'react-bootstrap';
import $ from 'jquery';
@@ -21,7 +21,6 @@ function IndividualPanel() {
const [facialMaskVals, setFacialMaskVals] = useState(null)
const emotions = ["ang", "fea", "dig", "sad", "con", "sur", "hap"]
const [checkedEmotions, setCheckedEmotions] = useState(new Array(emotions.length).fill(false))
const componentRef = useRef();
const [rawFacialData, setFacialRawData] = useState(null)
const [facialTimelineData, setFacialTimelineData] = useState(null)
@@ -79,16 +78,20 @@ function IndividualPanel() {
setAsymetryButton(param === "asym" ? !asymetryButton : false)
setPainButton(param === "pain" ? !painButton : false)
setExpressivityButton(param === "expr" ? !expressivityButton : false)
if(param === "aus" & AUsButton){
$('.emotion_highlight').css("opacity", "0")
}
setAUsButton(param === "aus" ? !AUsButton : false)
setFacialMaskColor(param === "asym" ? "pink" : param === "pain" ? "red" : param === "expr" ? "orange" : "#cb181d")
setFacialMaskVals(param === "asym" ? [0, 10] : param === "pain" ? [0, 1] : param === "expr" ? [0, 1] : [0, 1])
setFacialMaskColor(param === "asym" ? "#de77ae" : param === "pain" ? "red" : param === "expr" ? "orange" : "#cb181d")
setFacialMaskVals(param === "asym" ? [0, 40] : param === "pain" ? [0, 1] : param === "expr" ? [0, 1] : [0, 1])
}
const handleMovementMask = () => {
$('#headMovementMaskContainer').css("opacity", !movementButton ? "1" : "0")
setMovementButton(!movementButton)
setFacialMaskColor(asymetryButton ? "pink" : painButton ? "red" : expressivityButton ? "orange" : "#cb181d")
setFacialMaskVals(asymetryButton ? [0, 10] : painButton ? [0, 1] : expressivityButton ? [0, 1] : [0, 1])
setFacialMaskColor(asymetryButton ? "#de77ae" : painButton ? "red" : expressivityButton ? "orange" : "#cb181d")
setFacialMaskVals(asymetryButton ? [0, 40] : painButton ? [0, 1] : expressivityButton ? [0, 1] : [0, 1])
}
const fetchIndividualData = id => {
@@ -347,10 +350,14 @@ function IndividualPanel() {
updatedCheckedState = checkedMovementState.map(e => false)
setCheckedMovementState(updatedCheckedState)
}
else {
else if (param === "acoustics"){
updatedCheckedState = checkedAcousticState.map(e => false)
setCheckedAcousticState(updatedCheckedState)
}
else {
updatedCheckedState = checkedCorrMatrixState.map(e => false)
setCheckedCorrMatrixState(updatedCheckedState)
}
}
return (
@@ -501,6 +508,8 @@ function IndividualPanel() {
<div >
<div id="corrQuerryButton">
<button type="button" className='btn btn-sm btn-outline-primary' onClick={handleCorrMatrixUpdate}>Update</button>
<button type="button" className="btn-close" aria-label="Close"
onClick={() => handleUnselectCheckboxes("corr")}></button>
</div>
<QueryPanel allAcousticArg={allAcousticAttr} allMovementArg={allMovementAttr} allSpeechArg={[]} allFacialArg={allFacialAttr}
checkedState={checkedCorrMatrixState} handleCheckboxChange={handleCorrMatrixCheckboxChange} idVal={"corrMatrixIndividual_"} />

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

@@ -28,17 +28,17 @@ export default class ScatterplotD3 {
$('#metadataAttributes').css("opacity", 1)
var medataAttr = [...new Set(Object.values(metadata).map(el => el['attr']).filter(e => e != null))]
var metadataColor = d3.scaleOrdinal().domain(medataAttr)
.range(["gold", "blue", "brown", "purple", "orange"])
.range(['gold', 'blue', 'deeppink', 'darkviolet', 'cyan', 'black', 'brown', 'greenyellow', 'orchid','mediumpurple'])
var d = Object.values(metadata).map(el => [el['id'], el['attr']])
d.forEach(el => {
metadataDict[el[0]] = el[1]
})
medataAttr.forEach(a => {
$(`#${metadataColor(a)}AttrContainer`).css("opacity", 0.4)
$(`#${metadataColor(a)}AttrContainer`).css("opacity", 0.5)
$(`#${metadataColor(a)}color`).text(a)
})
$('#noneAttrContainer').css("opacity", 1)
$('#noneAttrContainer').css("opacity", 0.5)
}
else {
$('#metadataAttributes').css("opacity", 0)
@@ -68,7 +68,7 @@ export default class ScatterplotD3 {
.attr("cy", d => yScale(d['pca2']))
.attr("class", d => "dot dotScatterplot dot_" + d['id'])
.attr("r", 5.5)
.style("fill", d => filteredIds.includes(d['id']) ? "red" : (metadataDict[d['id']] ? metadataAttrColor[d['id']] : "#69b3a2"))
.style("fill", d => filteredIds.includes(d['id']) ? "darkorange" : (metadataDict[d['id']] ? metadataAttrColor[d['id']] : "#41ab5d"))
.style("opacity", d => filteredIds.includes(d['id']) ? "0.4" : hideIds ? "0" : "0.4")
.attr("stroke", "grey")
.attr("stroke-width", '1.5px')
@@ -84,26 +84,26 @@ export default class ScatterplotD3 {
if (e.selection) {
const [[x0, y0], [x1, y1]] = e.selection;
// default color for scatterplot points
d3.selectAll(".dotScatterplot").style("fill", d => filteredIds.includes(d['id']) ? "red" : (metadataDict[d['id']] ? metadataAttrColor[d['id']] : "#69b3a2"))
d3.selectAll(".dotScatterplot").style("fill", d => filteredIds.includes(d['id']) ? "darkorange" : (metadataDict[d['id']] ? metadataAttrColor[d['id']] : "#41ab5d"))
// default color for distribution chart points
d3.selectAll(".dotDistr").style("fill", d => filteredIds.includes(d[0]) ? "red" : (metadataDict[d[0]] ? metadataAttrColor[d[0]] : "#69b3a2"))
d3.selectAll(".dotDistr").style("fill", d => filteredIds.includes(d[0]) ? "darkorange" : (metadataDict[d[0]] ? metadataAttrColor[d[0]] : "#41ab5d"))
value = scatterplotObj.filter(d => (x0 <= xScale(d['pca1']) && xScale(d['pca1']) < x1 && y0 <= yScale(d['pca2']) && yScale(d['pca2']) < y1))
.map(e => e.id)
$(".id_checkbox_container").css("color", "black")
value.forEach(e => {
d3.selectAll(".dot_" + e).style("fill", "red")
d3.selectAll(".dot_" + e).style("fill", "darkorange")
$("#" + e + "_id_container").css("color", "#fc6a03")
})
}
keys.forEach(k => {
if ($('#' + k + "_id").is(":checked"))
$(".dot_" + k).css("fill", "red")
$(".dot_" + k).css("fill", "darkorange")
})
if ($('#metadataButton').hasClass("btn-outline-primary")) {
}
svg.property("value", value).dispatch("input");
}
d3.selectAll(".dotDistr").style("fill", d => filteredIds.includes(d[0]) ? "red" : (metadataDict[d[0]] ? metadataAttrColor[d[0]] : "#69b3a2"))
d3.selectAll(".dotDistr").style("fill", d => filteredIds.includes(d[0]) ? "darkorange" : (metadataDict[d[0]] ? metadataAttrColor[d[0]] : "#41ab5d"))
}
}