first commit
This commit is contained in:
Carla Floricel
557
dashboard/src/components/individualPanel.js
Normal file
557
dashboard/src/components/individualPanel.js
Normal file
@@ -0,0 +1,557 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import { Row, Col } from 'react-bootstrap';
|
||||
import $ from 'jquery';
|
||||
import HeadSVG from './headSVG.js'
|
||||
import SpiderChart from './spiderChart.js';
|
||||
import Histogram from './histogram.js';
|
||||
import QueryPanel from './queryPanel.js';
|
||||
import ColorLegend from './colorLegend.js';
|
||||
import CorrelationMatrix from './correlationMatrix.js';
|
||||
import DBMDict from "../DBM_attribute_dict.json"
|
||||
|
||||
function IndividualPanel() {
|
||||
const [movementButton, setMovementButton] = useState(false)
|
||||
const [asymetryButton, setAsymetryButton] = useState(false)
|
||||
const [painButton, setPainButton] = useState(false)
|
||||
const [expressivityButton, setExpressivityButton] = useState(false)
|
||||
const [AUsButton, setAUsButton] = useState(false)
|
||||
const [facialMaskColor, setFacialMaskColor] = useState('white')
|
||||
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)
|
||||
const [rawMovementData, setMovementRawData] = useState(null)
|
||||
const [rawAcousticData, setAcousticRawData] = useState(null)
|
||||
const [derivedData, setDerivedData] = useState({})
|
||||
const meanEmotionsSoft = ["fac_feaintsoft_mean", "fac_disintsoft_mean", "fac_sadintsoft_mean", "fac_conintsoft_mean", "fac_surintsoft_mean", "fac_hapintsoft_mean", "fac_angintsoft_mean"]
|
||||
const meanAUsSoft = ["fac_AU02int_mean", "fac_AU04int_mean", "fac_AU05int_mean", "fac_AU06int_mean", "fac_AU07int_mean", "fac_AU09int_mean", "fac_AU10int_mean",
|
||||
"fac_AU12int_mean", "fac_AU14int_mean", "fac_AU15int_mean", "fac_AU17int_mean", "fac_AU20int_mean", "fac_AU23int_mean", "fac_AU25int_mean", "fac_AU26int_mean", "fac_AU01int_mean",]
|
||||
|
||||
const [timeslotValue, setTimeslotValue] = useState("0")
|
||||
const timepoints = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"]
|
||||
const [checkedFacialState, setCheckedFacialState] = useState([]);
|
||||
const [checkedAcousticState, setCheckedAcousticState] = useState([]);
|
||||
const [checkedMovementState, setCheckedMovementState] = useState([]);
|
||||
|
||||
const [facialAttr, setFacialAttr] = useState([])
|
||||
const [movementAttr, setMovementAttr] = useState([])
|
||||
const [acousticAttr, setAcousticAttr] = useState([])
|
||||
const [allFacialAttr, setAllFacialAttr] = useState([])
|
||||
const [allMovementAttr, setAllMovementAttr] = useState([])
|
||||
const [allAcousticAttr, setAllAcousticAttr] = useState([])
|
||||
const [speechDerivedData, setSpeechDerivedData] = useState([])
|
||||
|
||||
|
||||
const [corrMatrixData, setCorrMatrixData] = useState([])
|
||||
const [checkedCorrMatrixState, setCheckedCorrMatrixState] = useState([]);
|
||||
const [allCorrMatrixAttr, setAllCorrMatrixAttr] = useState([])
|
||||
|
||||
|
||||
const [idData, setIdData] = useState([])
|
||||
const [selectedId, setSelectedId] = useState(null)
|
||||
|
||||
const [speechButton, setSpeechButton] = useState(true)
|
||||
const [corrButton, setCorrButton] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
$('#asymetryMaskContainer').css("opacity", "0")
|
||||
$('#expressivityMaskContainer').css("opacity", "0")
|
||||
$('#facePainExpresivityMask').css("opacity", "0")
|
||||
$('#AUContainer').css("opacity", "0")
|
||||
$('#headMovementMaskContainer').css("opacity", "0")
|
||||
$('.emotion_highlight').css("opacity", "0")
|
||||
}, [])
|
||||
|
||||
const handleFaceMask = param => {
|
||||
$('#asymetryMaskContainer').css("opacity", param === "asym" & !asymetryButton ? "1" : "0")
|
||||
$('#facePainExpresivityMask').css("opacity", param === "pain" & !painButton ? "0.5" : "0")
|
||||
$('#expressivityMaskContainer').css("opacity", param === "expr" & !expressivityButton ? "1" : "0")
|
||||
$('#AUContainer').css("opacity", param === "aus" & !AUsButton ? "1" : "0")
|
||||
|
||||
setAsymetryButton(param === "asym" ? !asymetryButton : false)
|
||||
setPainButton(param === "pain" ? !painButton : false)
|
||||
setExpressivityButton(param === "expr" ? !expressivityButton : false)
|
||||
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])
|
||||
}
|
||||
|
||||
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])
|
||||
}
|
||||
|
||||
const fetchIndividualData = id => {
|
||||
if (id) {
|
||||
fetch("/fetchIndividualFacialTimelineData", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-type': "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"id": id
|
||||
})
|
||||
}).then(
|
||||
res => res.json()
|
||||
).then(
|
||||
data => {
|
||||
setFacialTimelineData(data)
|
||||
}
|
||||
)
|
||||
|
||||
fetch("/fetchIndividualFacialRawData", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-type': "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"id": id
|
||||
})
|
||||
}).then(
|
||||
res => res.json()
|
||||
).then(
|
||||
data => {
|
||||
setFacialRawData(data)
|
||||
}
|
||||
)
|
||||
|
||||
fetch("/fetchIndividualMovementRawData", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-type': "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"id": id
|
||||
})
|
||||
}).then(
|
||||
res => res.json()
|
||||
).then(
|
||||
data => {
|
||||
setMovementRawData(data)
|
||||
}
|
||||
)
|
||||
|
||||
fetch("/fetchIndividualAcousticRawData", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-type': "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"id": id
|
||||
})
|
||||
}).then(
|
||||
res => res.json()
|
||||
).then(
|
||||
data => {
|
||||
setAcousticRawData(data)
|
||||
}
|
||||
)
|
||||
|
||||
fetch("/fetchIndividualDerivedData", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-type': "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"id": id
|
||||
})
|
||||
}).then(
|
||||
res => res.json()
|
||||
).then(
|
||||
data => {
|
||||
setDerivedData(data[0])
|
||||
setSpeechDerivedData(Object.keys(data[0]).filter(e => e.includes("nlp")))
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/getRawAttributesAndIds").then(
|
||||
res => res.json()
|
||||
).then(
|
||||
data => {
|
||||
setAllFacialAttr(data['facial'])
|
||||
setAllAcousticAttr(data['acoustic'])
|
||||
setAllMovementAttr(data['movement'])
|
||||
if (data['facial'].length > 6)
|
||||
setFacialAttr(data['facial'].slice(0, 6))
|
||||
if (data['movement'].length > 6)
|
||||
setMovementAttr(data['movement'].slice(0, 6))
|
||||
if (data['acoustic'].length > 6)
|
||||
setAcousticAttr(data['acoustic'].slice(0, 6))
|
||||
setAllCorrMatrixAttr(data['facial'].concat(data['movement']).concat(data['acoustic']))
|
||||
setCheckedAcousticState(new Array(data['acoustic'].length).fill(false))
|
||||
setCheckedMovementState(new Array(data['movement'].length).fill(false))
|
||||
setCheckedFacialState(new Array(data['facial'].length).fill(false))
|
||||
setIdData(data['ids'].map(el => el.split("/")[1].replace(".mp4", "")))
|
||||
setCheckedCorrMatrixState(new Array(data['acoustic'].length + data['facial'].length + data['movement'].length).fill(false))
|
||||
if (data['ids'].length > 0) {
|
||||
var firstId = data['ids'].map(el => el.split("/")[1].replace(".mp4", ""))[0]
|
||||
setSelectedId(firstId)
|
||||
fetchIndividualData(firstId)
|
||||
}
|
||||
|
||||
}
|
||||
)
|
||||
}, [])
|
||||
|
||||
const setTime = (ev) => {
|
||||
setTimeslotValue(ev.target.value)
|
||||
$(".areaSegment").css("opacity", "0")
|
||||
$(`.areaSegment_${ev.target.value}`).css("opacity", "1")
|
||||
|
||||
var facialSeg = parseInt(rawFacialData.length / 19)
|
||||
var movementSeg = parseInt(rawMovementData.length / 19)
|
||||
var acousticSeg = parseInt(rawAcousticData.length / 19)
|
||||
|
||||
|
||||
const facialReminder = rawFacialData.length - facialSeg * 19
|
||||
const movementReminder = rawMovementData.length - movementSeg * 19
|
||||
const acousticReminder = rawAcousticData.length - acousticSeg * 19
|
||||
|
||||
facialSeg = facialSeg + (parseInt(ev.target.value) <= facialReminder ? 1 : 0)
|
||||
movementSeg = movementSeg + (parseInt(ev.target.value) <= movementReminder ? 1 : 0)
|
||||
acousticSeg = acousticSeg + (parseInt(ev.target.value) <= acousticReminder ? 1 : 0)
|
||||
|
||||
$("#facialFrameLabel").html("Facial: " + String(parseInt(ev.target.value) !== 0 ? (facialSeg * (parseInt(ev.target.value) - 1) + 1) +
|
||||
" - " + (parseInt(ev.target.value) === 20 ? rawFacialData.length : facialSeg * (parseInt(ev.target.value))) : ""))
|
||||
|
||||
$("#movementFrameLabel").html("Movement: " + String(parseInt(ev.target.value) !== 0 ? (movementSeg * (parseInt(ev.target.value) - 1) + 1) +
|
||||
" - " + (parseInt(ev.target.value) === 20 ? rawMovementData.length : movementSeg * (parseInt(ev.target.value))) : ""))
|
||||
|
||||
$("#acousticFrameLabel").html("Acoustic: " + String(parseInt(ev.target.value) !== 0 ? (acousticSeg * (parseInt(ev.target.value) - 1) + 1) +
|
||||
" - " + (parseInt(ev.target.value) === 20 ? rawAcousticData.length : acousticSeg * (parseInt(ev.target.value))) : ""))
|
||||
}
|
||||
|
||||
const handleUpdate = param => {
|
||||
if (param === "facial") {
|
||||
var facialArg = allFacialAttr.filter((el, index) => checkedFacialState[index] === true)
|
||||
setFacialAttr(facialArg)
|
||||
}
|
||||
else if (param === "movement") {
|
||||
var movementArg = allMovementAttr.filter((el, index) => checkedMovementState[index] === true)
|
||||
setMovementAttr(movementArg)
|
||||
}
|
||||
else {
|
||||
var acousticArg = allAcousticAttr.filter((el, index) => checkedAcousticState[index] === true)
|
||||
setAcousticAttr(acousticArg)
|
||||
}
|
||||
}
|
||||
|
||||
const handleFacialCheckboxChange = position => {
|
||||
var updatedCheckedState = checkedFacialState.map((item, index) =>
|
||||
index === position ? !item : item)
|
||||
setCheckedFacialState(updatedCheckedState)
|
||||
}
|
||||
|
||||
const handleAcousticCheckboxChange = position => {
|
||||
var updatedCheckedState = checkedAcousticState.map((item, index) =>
|
||||
index === position ? !item : item)
|
||||
setCheckedAcousticState(updatedCheckedState)
|
||||
}
|
||||
|
||||
const handleMovementCheckboxChange = position => {
|
||||
|
||||
var updatedCheckedState = checkedMovementState.map((item, index) =>
|
||||
index === position ? !item : item)
|
||||
setCheckedMovementState(updatedCheckedState)
|
||||
}
|
||||
|
||||
|
||||
const handleCorrMatrixCheckboxChange = position => {
|
||||
const updatedCheckedState = checkedCorrMatrixState.map((item, index) =>
|
||||
index === position ? !item : item)
|
||||
setCheckedCorrMatrixState(updatedCheckedState)
|
||||
}
|
||||
|
||||
const handleCorrMatrixUpdate = id => {
|
||||
var corrMatrix_args = allCorrMatrixAttr.filter((el, index) => checkedCorrMatrixState[index] === true)
|
||||
if (corrMatrix_args.length === 0) {
|
||||
corrMatrix_args = meanEmotionsSoft.map(e => e.replace("_mean", ""))
|
||||
}
|
||||
fetch("/updateCorrMatrix", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-type': "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"corrMatrix_args": corrMatrix_args,
|
||||
"individual": true,
|
||||
"id": id ? id : selectedId
|
||||
})
|
||||
}).then(
|
||||
res => res.json()
|
||||
).then(
|
||||
data => {
|
||||
setCorrMatrixData(data)
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
const handleIdCheckboxChange = ev => {
|
||||
$(".individual_checkbox").prop("checked", false)
|
||||
$("#" + ev.target.id).prop("checked", true)
|
||||
var id = ev.target.id.replace("_id_checkbox", "")
|
||||
setSelectedId(id)
|
||||
if (corrButton) {
|
||||
handleCorrMatrixUpdate(id)
|
||||
}
|
||||
setTimeslotValue("0")
|
||||
fetchIndividualData(id)
|
||||
}
|
||||
|
||||
|
||||
const handleEmotionCheckboxChange = position => {
|
||||
const updatededEmotions = checkedEmotions.map((item, index) =>
|
||||
index === position ? !item : false)
|
||||
setCheckedEmotions(updatededEmotions)
|
||||
$(".emotion_highlight").css("opacity", "0")
|
||||
if ($('#' + emotions[position] + "_highlight").is(":checked")) {
|
||||
$("." + emotions[position] + "_highlight").css("opacity", "1")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const handleSpeechPanel = panel => {
|
||||
if (panel === "speech") {
|
||||
setSpeechButton(true)
|
||||
setCorrButton(false)
|
||||
}
|
||||
else {
|
||||
setSpeechButton(false)
|
||||
setCorrButton(true)
|
||||
handleCorrMatrixUpdate()
|
||||
}
|
||||
}
|
||||
|
||||
const handleUnselectCheckboxes = param => {
|
||||
var updatedCheckedState = null
|
||||
if (param === "facial") {
|
||||
updatedCheckedState = checkedFacialState.map(e => false)
|
||||
setCheckedFacialState(updatedCheckedState)
|
||||
}
|
||||
else if (param === "movement") {
|
||||
updatedCheckedState = checkedMovementState.map(e => false)
|
||||
setCheckedMovementState(updatedCheckedState)
|
||||
}
|
||||
else {
|
||||
updatedCheckedState = checkedAcousticState.map(e => false)
|
||||
setCheckedAcousticState(updatedCheckedState)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{rawFacialData && rawFacialData.length > 0 &&
|
||||
<div id="timelineContainer" style={{ height: "5%", position: "absolute", top: "0px", left: "250px", display: "flex", flexDirection: "row" }}>
|
||||
|
||||
<div className="sliderContainer" style={{ margin: "5px", display: "flex", flexDirection: "row" }}>
|
||||
<div>Timeline</div>
|
||||
<div>
|
||||
<input type="range" min='0' max="20" id="myRange" className="slider" style={{ width: "400px" }}
|
||||
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>
|
||||
)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "row", justifyContent: 'flex-end', margin: "auto", width: "70%" }}>
|
||||
<div style={{ margin: "auto", fontWeight: "bolder" }}>Frames:</div>
|
||||
<div style={{ margin: "auto", fontWeight: "bolder", color: "#41ab5d" }} id="facialFrameLabel">Facial</div>
|
||||
<h6 style={{ margin: "auto", fontWeight: "bolder", color: "#4292c6" }} id="movementFrameLabel">Movement</h6>
|
||||
<h6 style={{ margin: "auto", fontWeight: "bolder", color: "#807dba" }} id="acousticFrameLabel">Acoustics</h6>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<Row style={{ height: "90vh", width: "99vw", marginLeft: "10px" }}>
|
||||
{derivedData &&
|
||||
<Col className="col-2" style={{ height: "100%", width: "250px" }}>
|
||||
<Row style={{ width: "300", }} id='headContainer'>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row", gap: "3px", marginBottom: "10px", marginLeft: "-12px" }}>
|
||||
<button type="button" id="asymMaskButton" className={`btn btn-sm ${asymetryButton === true ? 'btn-primary' : 'btn-secondary'}`} onClick={() => handleFaceMask("asym")}>Asym</button>
|
||||
<button type="button" id="painMaskButton" className={`btn btn-sm ${painButton === true ? 'btn-primary' : 'btn-secondary'}`} onClick={() => handleFaceMask("pain")}>Pain</button>
|
||||
<button type="button" id="exprMaskButton" className={`btn btn-sm ${expressivityButton === true ? 'btn-primary' : 'btn-secondary'}`} onClick={() => handleFaceMask("expr")}>Expr</button>
|
||||
<button type="button" id="AUsMaskButton" className={`btn btn-sm ${AUsButton === true ? 'btn-primary' : 'btn-secondary'}`} onClick={() => handleFaceMask("aus")}>AUs</button>
|
||||
<button type="button" id="movMaskButton" className={`btn btn-sm ${movementButton === true ? 'btn-primary' : 'btn-secondary'}`} onClick={handleMovementMask}>Mov</button>
|
||||
</div>
|
||||
<div style={{ marginLeft: "10px" }}>
|
||||
< HeadSVG width={200} height={300}/>
|
||||
</div>
|
||||
</Row>
|
||||
<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" }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={value + "_highlight"}
|
||||
className="emotion_checkbox"
|
||||
checked={checkedEmotions[index]}
|
||||
onChange={() => handleEmotionCheckboxChange(index)}
|
||||
/>
|
||||
{value}
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<div id="colorScaleContainer" style={{ width: "90%", height: "5vh", opacity: ((painButton | expressivityButton | AUsButton | asymetryButton) ? "1" : "0") }}>
|
||||
<ColorLegend range={facialMaskVals} colorScale={["white", facialMaskColor]} derivedData={derivedData} id={"faceMaskColorLegend"} timelineData={facialTimelineData} timeframe={timeslotValue} />
|
||||
</div>
|
||||
<Col className="col-2" style={{ display: "flex", flexDirection: "column", borderRadius: "15px", paddingTop: "10px", fontSize: "0.7rem", width: "230px", boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px", height: 'calc(90vh - 420px)' }}>
|
||||
<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_"}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={value + "_id_checkbox"}
|
||||
className="individual_checkbox"
|
||||
onChange={handleIdCheckboxChange}
|
||||
/>
|
||||
{" " + value}
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
}
|
||||
<Col style={{ height: "100%", marginRight: "10px", width: "40%" }}>
|
||||
{rawFacialData && rawFacialData.length > 0 &&
|
||||
<Row id="facialActivityContainer" style={{ height: "48%", backgroundColor: "#f7fcf5", padding: "10px", overflowY: "scroll" }}>
|
||||
<div style={{ display: "flex", }}>
|
||||
<Col className='col-2' style={{ fontSize: "0.8rem", width: "max-content", }}>
|
||||
{allFacialAttr &&
|
||||
<div style={{ marginLeft: "-10px", marginRight: "5px" }}>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row" }}>
|
||||
<button type="button" className='btn btn-sm btn-outline-primary' onClick={() => handleUpdate("facial")}>Update</button>
|
||||
<button type="button" className="btn-close" aria-label="Close" style={{ marginTop: "5px", marginLeft: "5px" }} onClick={() => handleUnselectCheckboxes("facial")}></button>
|
||||
</div>
|
||||
<QueryPanel allAcousticArg={[]} allMovementArg={[]} allSpeechArg={[]} allFacialArg={allFacialAttr}
|
||||
checkedState={checkedFacialState} handleCheckboxChange={handleFacialCheckboxChange} idVal={"rawFacialIndividualAttr_"} />
|
||||
</div>}
|
||||
</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", }}>
|
||||
{<Histogram data={rawFacialData} derivedData={derivedData} attr={value} id={"histogram_" + value} color={["#41ab5d", "#c7e9c0"]} timeframe={timeslotValue} />}
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
</div>
|
||||
</Row>
|
||||
}
|
||||
<Row style={{ marginTop: "30px", display: "flex", flexDirection: "row", height: "48%", overflowY: "auto" }}>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row", gap: "10px", marginTop: "10px" }}>
|
||||
<button type="button" className={`btn btn-sm ${speechButton === true ? 'btn-primary' : 'btn-secondary'}`} onClick={() => handleSpeechPanel("speech")} id="speechPanelButton" style={{ height: "max-content", }}>{'Facial & Speech'}</button>
|
||||
<button type="button" className={`btn btn-sm ${corrButton === true ? 'btn-primary' : 'btn-secondary'}`} onClick={() => handleSpeechPanel("corr")} style={{ height: "max-content", }} id="corrMatrixPanelButton">Correlation</button>
|
||||
</div>
|
||||
{speechButton &&
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<Col className='col-8' style={{ display: "flex", flexDirection: "row" }}>
|
||||
<div style={{ width: "max-content", marginRight: "20px" }}>
|
||||
<div >
|
||||
<SpiderChart style={{ padding: "10px" }} label={'Emotion Intensity'} derivedData={derivedData} timelineData={facialTimelineData} timeframe={timeslotValue} levels={[0, 0.25, 0.5, 0.75, 1]}
|
||||
axes={meanEmotionsSoft.reverse()} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "max-content" }}>
|
||||
<div >
|
||||
<SpiderChart style={{ padding: "10px" }} label={'AU Intensity'} derivedData={derivedData} timelineData={facialTimelineData} timeframe={timeslotValue} levels={[0, 1, 2, 3, 4, 5]}
|
||||
axes={meanAUsSoft.reverse()} />
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<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>
|
||||
)}
|
||||
</Col>
|
||||
</div>}
|
||||
{corrButton && ((rawFacialData && rawFacialData.length > 0) || (rawAcousticData && rawAcousticData.length > 0) || (rawMovementData && rawMovementData.length > 0)) &&
|
||||
<Row style={{ height: "85%", marginTop: "5px" }}>
|
||||
<Col className='col-2' style={{ width: "25%", height: "100%", overflowY: "scroll", fontSize: "0.8rem" }}>
|
||||
|
||||
<div >
|
||||
<div style={{ display: "inline-flex", flexDirection: "row" }}>
|
||||
<button type="button" className='btn btn-sm btn-outline-primary' style={{ marginBottom: "10px" }} onClick={handleCorrMatrixUpdate}>Update</button>
|
||||
</div>
|
||||
<QueryPanel allAcousticArg={allAcousticAttr} allMovementArg={allMovementAttr} allSpeechArg={[]} allFacialArg={allFacialAttr}
|
||||
checkedState={checkedCorrMatrixState} handleCheckboxChange={handleCorrMatrixCheckboxChange} idVal={"corrMatrixIndividual_"} />
|
||||
</div>
|
||||
</Col>
|
||||
<Col className='col-2' style={{ width: "75%", height: "90%", }} id="corrMatrixContainer" >
|
||||
<CorrelationMatrix data={corrMatrixData} />
|
||||
</Col>
|
||||
</Row>}
|
||||
</Row>
|
||||
</Col>
|
||||
<Col style={{ height: "100%", width: "40%" }}>
|
||||
{rawMovementData && rawMovementData.length > 0 &&
|
||||
<Row id="headMovementContainer" style={{ height: "48%", overflowY: "scroll", backgroundColor: "#f7fbff" }}>
|
||||
<div style={{ display: "flex", }}>
|
||||
<Col className='col-2' style={{ width: "max-content", fontSize: "0.8rem" }}>
|
||||
{allMovementAttr &&
|
||||
<div style={{ marginLeft: "-10px", marginRight: "5px" }}>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row" }}>
|
||||
<button type="button" className='btn btn-sm btn-outline-primary' style={{ marginBottom: "10px" }} onClick={() => handleUpdate("movement")}>Update</button>
|
||||
<button type="button" className="btn-close" aria-label="Close" style={{ marginTop: "5px", marginLeft: "5px" }} onClick={() => handleUnselectCheckboxes("movement")}></button>
|
||||
</div>
|
||||
<QueryPanel allAcousticArg={[]} allMovementArg={allMovementAttr} allSpeechArg={[]} allFacialArg={[]}
|
||||
checkedState={checkedMovementState} handleCheckboxChange={handleMovementCheckboxChange} idVal={"rawMovementIndividualAttr_"} />
|
||||
</div>}
|
||||
</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", }}>
|
||||
{<Histogram data={rawMovementData} derivedData={derivedData} attr={value} id={"histogram_" + value} color={["#4292c6", "#c6dbef"]} timeframe={timeslotValue} />}
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
</div>
|
||||
</Row>
|
||||
}
|
||||
{rawAcousticData && rawAcousticData.length > 0 &&
|
||||
<Row id="voiceAcousticsContainer" style={{ height: "48%", overflowY: "scroll", backgroundColor: "#f7f4f9", marginTop: "30px" }}>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Col className='col-2' style={{ fontSize: "0.8rem", width: "max-content" }}>
|
||||
{allAcousticAttr &&
|
||||
<div style={{ marginLeft: "-10px", marginRight: "5px" }}>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row" }}>
|
||||
<button type="button" className='btn btn-sm btn-outline-primary' style={{ marginBottom: "10px" }} onClick={() => handleUpdate("acoustics")}>Update</button>
|
||||
<button type="button" className="btn-close" aria-label="Close" style={{ marginTop: "5px", marginLeft: "5px" }} onClick={() => handleUnselectCheckboxes("acoustics")}></button>
|
||||
|
||||
</div>
|
||||
<QueryPanel allAcousticArg={allAcousticAttr} allMovementArg={[]} allSpeechArg={[]} allFacialArg={[]}
|
||||
checkedState={checkedAcousticState} handleCheckboxChange={handleAcousticCheckboxChange} idVal={"rawAcousticIndividualAttr_"} />
|
||||
</div>}
|
||||
</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" }}>
|
||||
{<Histogram data={rawAcousticData} derivedData={derivedData} attr={value} id={"histogram_" + value} color={["#807dba", "#dadaeb"]} timeframe={timeslotValue} />}
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
</div>
|
||||
</Row>
|
||||
}
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IndividualPanel;
|
||||
Reference in New Issue
Block a user