added css files for cohort and individual panels
This commit is contained in:
Carla Floricel
147
dashboard/src/components/cohortPanel.css
Normal file
147
dashboard/src/components/cohortPanel.css
Normal file
@@ -0,0 +1,147 @@
|
||||
#metaDataButton {
|
||||
height: 5%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 250px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#attributesTag {
|
||||
margin-left: 5px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
#metadataAttributes {
|
||||
display: flex;
|
||||
flex--direction: row;
|
||||
justify-content: flex-end;
|
||||
margin: auto;
|
||||
margin-left: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.metadataAttr {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
opacity: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.metadataAttr div {
|
||||
margin-left: 10px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
#cohortContainer {
|
||||
height: 90vh;
|
||||
width: 95vw;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#queryPanelContainer {
|
||||
border-radius: 15px;
|
||||
padding-top: 10px;
|
||||
width: max-content;
|
||||
height: 98%;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
||||
}
|
||||
|
||||
#queryPanelButtonsContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
gap: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#queryListContainer {
|
||||
font-size: 0.8rem;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.queryList {
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.queryUpdateButton {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.queryCheckboxContainer {
|
||||
overflow-y: scroll;
|
||||
height: 97%;
|
||||
}
|
||||
|
||||
#scatterplotCorrMatrixContainer {
|
||||
height: 95%;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
#scatterplotContainer {
|
||||
height: 35vh;
|
||||
}
|
||||
|
||||
#corrMatrixContainer {
|
||||
height: 50%;
|
||||
margin-top: 10%;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#idPanelContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 15px;
|
||||
height: 98%;
|
||||
padding-top: 10px;
|
||||
font-size: 0.7rem;
|
||||
width: max-content;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
||||
}
|
||||
|
||||
#hideIdButton {
|
||||
margin-top: 10px
|
||||
}
|
||||
|
||||
#idListContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
height: 94%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#distributionChartContainer {
|
||||
height: 93%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.distributionChart {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.printButton {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#scatterplotComponent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#corrMatrixComponent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.queryPanel h6 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import DistributionChart from './distributionChart';
|
||||
import CorrelationMatrix from './correlationMatrix';
|
||||
import QueryPanel from './queryPanel';
|
||||
import $ from 'jquery';
|
||||
import "./cohortPanel.css"
|
||||
|
||||
function CohortPanel() {
|
||||
|
||||
@@ -15,7 +16,6 @@ function CohortPanel() {
|
||||
|
||||
const distrDefaultArgs = ['fac_asymmaskmouth_mean', 'fac_asymmaskeyebrow_mean', 'fac_asymmaskeye_mean', 'fac_asymmaskcom_mean']
|
||||
const [distrArgs, setDistrArgs] = useState(distrDefaultArgs)
|
||||
const [corrMatrixArgs, setCorrMatrixArgs] = useState(distrDefaultArgs)
|
||||
|
||||
const [checkedDistrState, setCheckedDistrState] = useState([]);
|
||||
const [checkedPCAState, setCheckedPCAState] = useState([]);
|
||||
@@ -72,12 +72,12 @@ 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']]
|
||||
}
|
||||
})
|
||||
if (data.length > 0)
|
||||
data.forEach(e => {
|
||||
if (e['attr']) {
|
||||
metaColorData[e['id']] = attrDict[e['attr']]
|
||||
}
|
||||
})
|
||||
}
|
||||
setMetadataAttrColor(metaColorData)
|
||||
}
|
||||
@@ -210,7 +210,6 @@ function CohortPanel() {
|
||||
).then(
|
||||
data => {
|
||||
setCorrMatrixData(data)
|
||||
setCorrMatrixArgs(corrMatrix_args)
|
||||
}
|
||||
)
|
||||
}
|
||||
@@ -231,7 +230,10 @@ 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", (Object.keys(metadataAttrColor).includes(ev.target.id.replace("_id", "")) & metadataButton) ? metadataAttrColor[ev.target.id.replace("_id", "")] : "#69b3a2")
|
||||
$(".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")
|
||||
|
||||
var filteredIdData_aux = idData.filter(id =>
|
||||
$('#' + id + "_id").is(":checked"))
|
||||
setFilteredIdData(filteredIdData_aux)
|
||||
@@ -259,79 +261,71 @@ function CohortPanel() {
|
||||
|
||||
const handleUnselectCheckboxes = () => {
|
||||
const updatedCheckboxes = checkedCorrMatrixState.map(e => false)
|
||||
if (distrButton) {
|
||||
setCheckedDistrState(updatedCheckboxes)
|
||||
}
|
||||
else if (pcaButton) {
|
||||
setCheckedPCAState(updatedCheckboxes)
|
||||
}
|
||||
else {
|
||||
setCheckedCorrMatrixState(updatedCheckboxes)
|
||||
}
|
||||
if (distrButton) setCheckedDistrState(updatedCheckboxes)
|
||||
else if (pcaButton) setCheckedPCAState(updatedCheckboxes)
|
||||
else setCheckedCorrMatrixState(updatedCheckboxes)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{metadata && metadata.length > 0 &&
|
||||
<div id="metaDataButton" style={{ height: "5%", position: "absolute", top: "10px", left: "250px", display: "flex", flexDirection: "row" }}>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
<div id="metadataAttributes">
|
||||
<div id="attributesTag" >Attributes:</div>
|
||||
{metadataColorList.map((value, index) =>
|
||||
<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">
|
||||
<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} />
|
||||
</svg>
|
||||
<div style={{ marginLeft: "10px", fontWeight: "bolder", color: (value === "none" ? "#69b3a2" : value) }}
|
||||
<div style={{ color: (value === "none" ? "#69b3a2" : value) }}
|
||||
id={(value !== "none" ? value : "none") + "color"}>{value === "none" ? "None" : ""}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{allDBMArg.length > 0 &&
|
||||
<Row style={{ height: "90vh", width: "95vw", marginLeft: "10px" }}>
|
||||
<Col className="col-2" style={{ borderRadius: "15px", paddingTop: "10px", width: "max-content", height: "98%", boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px" }}>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row", gap: "3px", marginBottom: "10px" }}>
|
||||
<Row id="cohortContainer">
|
||||
<Col className="col-2" id="queryPanelContainer">
|
||||
<div id="queryPanelButtonsContainer">
|
||||
<button type="button" className={`btn btn-sm ${pcaButton === true ? 'btn-primary' : 'btn-secondary'}`} onClick={() => handlePanel("PCA")}>PCA</button>
|
||||
<button type="button" className={`btn btn-sm ${distrButton === true ? 'btn-primary' : 'btn-secondary'}`} onClick={() => handlePanel("Distr")}>Distr</button>
|
||||
<button type="button" className={`btn btn-sm ${corrMatrixButton === true ? 'btn-primary' : 'btn-secondary'}`} onClick={() => handlePanel("Corr")}>Corr</button>
|
||||
<button type="button" className="btn-close" aria-label="Close" style={{ marginTop: "5px" }} onClick={handleUnselectCheckboxes}></button>
|
||||
</div>
|
||||
<div style={{ fontSize: "0.8rem", height: "90%" }}>
|
||||
<div id="queryListContainer">
|
||||
{pcaButton &&
|
||||
<div style={{ height: "95%" }}>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row" }}>
|
||||
<div className='queryList'>
|
||||
<div className="queryUpdateButton">
|
||||
<button type="button" className='btn btn-sm btn-outline-primary' onClick={handlePCAUpdate}>Update PCA</button>
|
||||
</div>
|
||||
<div style={{ overflowY: "scroll", height: "97%" }}>
|
||||
<div className="queryCheckboxContainer">
|
||||
<QueryPanel allAcousticArg={allAcousticArg} allMovementArg={allMovementArg} allSpeechArg={allSpeechArg} allFacialArg={allFacialArg}
|
||||
checkedState={checkedPCAState} handleCheckboxChange={handlePCACheckboxChange} idVal={"pcaInputArg_"} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{distrButton &&
|
||||
<div style={{ height: "95%" }}>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row" }}>
|
||||
<div className='queryList'>
|
||||
<div className="queryUpdateButton">
|
||||
<button type="button" className='btn btn-sm btn-outline-primary' onClick={handleDistrUpdate}>Update Distributions</button>
|
||||
</div>
|
||||
<div style={{ overflowY: "scroll", height: "97%" }}>
|
||||
<div className="queryCheckboxContainer">
|
||||
<QueryPanel allAcousticArg={allAcousticArg} allMovementArg={allMovementArg} allSpeechArg={allSpeechArg} allFacialArg={allFacialArg}
|
||||
checkedState={checkedDistrState} handleCheckboxChange={handleDistrCheckboxChange} idVal={"distributionInputArg_"} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{corrMatrixButton &&
|
||||
<div style={{ height: "95%" }}>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row" }}>
|
||||
<div className='queryList'>
|
||||
<div className="queryUpdateButton">
|
||||
<button type="button" className='btn btn-sm btn-outline-primary' onClick={handleCorrMatrixUpdate}>Update Correlations</button>
|
||||
</div>
|
||||
<div style={{ overflowY: "scroll", height: "97%" }}>
|
||||
<div className="queryCheckboxContainer">
|
||||
<QueryPanel allAcousticArg={allAcousticArg} allMovementArg={allMovementArg} allSpeechArg={allSpeechArg} allFacialArg={allFacialArg}
|
||||
checkedState={checkedCorrMatrixState} handleCheckboxChange={handleCorrMatrixCheckboxChange} idVal={"corrmatrixInputArg_"} />
|
||||
</div>
|
||||
@@ -339,22 +333,20 @@ function CohortPanel() {
|
||||
}
|
||||
</div>
|
||||
</Col>
|
||||
<Col className="col-4" style={{ height: "95%", width: "35%" }}>
|
||||
<Row id="scatterplotContainer" style={{ height: "35vh" }}>
|
||||
<Col className="col-4" id="scatterplotCorrMatrixContainer">
|
||||
<Row id="scatterplotContainer">
|
||||
{pcaCoords && <Scatterplot data={pcaCoords} filteredIds={filteredIdData}
|
||||
metadata={metadataButton === true ? metadata : []} hideIds={checkedHideIdsState} metadataAttrColor={metadataAttrColor} />}
|
||||
</Row>
|
||||
<Row id="corrMatrixContainer" style={{ height: "50%", marginTop: "10%", fontSize: "0.8rem" }}>
|
||||
<CorrelationMatrix data={corrMatrixData} />
|
||||
<Row id="corrMatrixContainer">
|
||||
<CorrelationMatrix data={corrMatrixData} parentId={"corrMatrixContainer"} />
|
||||
</Row>
|
||||
</Col>
|
||||
<Col className="col-2" style={{
|
||||
display: "flex", flexDirection: "column", borderRadius: "15px", height:
|
||||
"98%", paddingTop: "10px", fontSize: "0.7rem", width: "max-content", boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px"
|
||||
}}>
|
||||
<Col id="idPanelContainer" className="col-2">
|
||||
<button type="button" className='btn btn-primary btn-sm'>Filter ID(s)</button>
|
||||
<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", }}>
|
||||
<button type="button" className={`btn ${checkedHideIdsState === true ? 'btn-primary' : 'btn-outline-primary'} btn-sm`}
|
||||
id="hideIdButton" onClick={handleHideIds}>Hide Unselected</button>
|
||||
<div id="idListContainer">
|
||||
{idData.map((value, index) =>
|
||||
<label className="id_checkbox_container" id={value + "_id_container"} key={value + "id"}>
|
||||
<input
|
||||
@@ -367,10 +359,10 @@ function CohortPanel() {
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
<Col id="distributionChartContainer" style={{ height: "93%", overflowY: "auto" }}>
|
||||
<h6 style={{ fontWeight: "bolder" }}>Attribute Distribution</h6>
|
||||
<Col id="distributionChartContainer">
|
||||
<h6>Attribute Distribution</h6>
|
||||
{distrArgs.map((value) =>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row", marginLeft: "10px" }} key={value + "distr"}>
|
||||
<div className="distributionChart" key={value + "distr"}>
|
||||
{<DistributionChart data={distrData} attr={value} id={"distributionChart_" + value}
|
||||
filteredIds={filteredIdData} metadata={metadataButton === true ? metadata : []}
|
||||
hideIds={checkedHideIdsState} metadataAttrColor={metadataAttrColor} />}
|
||||
|
||||
@@ -28,7 +28,7 @@ export default class ColorLegendD3 {
|
||||
const negMovementColorScale = d3.scaleLinear().domain([-1, 0]).range(['#cb181d', "#fff5f0"])
|
||||
const posMovementColorScale = d3.scaleLinear().domain([0, 1]).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) {
|
||||
vissibleAUs.forEach(a => {
|
||||
var el = "fac_" + a + "int"
|
||||
|
||||
@@ -3,17 +3,17 @@ import $ from "jquery";
|
||||
import "../index.css"
|
||||
|
||||
export default class CorrelationMatrixD3 {
|
||||
constructor(chart, data) {
|
||||
constructor(chart, data, parentId) {
|
||||
if (!d3.select(chart).select('svg').empty()) {
|
||||
d3.select(chart).select('svg').remove()
|
||||
}
|
||||
var parentContainer = document.getElementById("corrMatrixContainer")
|
||||
var parentContainer = document.getElementById(parentId)
|
||||
var width = parentContainer.clientWidth
|
||||
var height = parentContainer.clientHeight
|
||||
const svg = d3.select(chart)
|
||||
.append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.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_", ""))
|
||||
@@ -34,9 +34,9 @@ export default class CorrelationMatrixD3 {
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0," + (height - 70) + ")")
|
||||
.attr("class", "greyAxis")
|
||||
|
||||
|
||||
.call(d3.axisBottom(xScale))
|
||||
.selectAll("text")
|
||||
.selectAll("text")
|
||||
.style("text-anchor", "end")
|
||||
.attr("dx", "-.8em")
|
||||
.attr("dy", ".15em")
|
||||
@@ -48,27 +48,27 @@ export default class CorrelationMatrixD3 {
|
||||
.call(d3.axisLeft(yScale))
|
||||
|
||||
values.forEach((row, i) => {
|
||||
row.forEach((el, j) =>{
|
||||
if(j >= i)
|
||||
svg.append("rect")
|
||||
.attr("id", "corr_" + keys[j] + "_" + keys[i])
|
||||
.attr("x", xScale(keys[i]) + 2)
|
||||
.attr("y", yScale(keys[j]) + 5)
|
||||
.attr("width", xScale.bandwidth())
|
||||
.attr("height", yScale.bandwidth())
|
||||
.style("fill", d => colorScale(el))
|
||||
.style("opacity", 0.8)
|
||||
.on("mouseover", d => {
|
||||
$("#" + d.target.id).css("stroke", "black")
|
||||
.css("stroke-width", '2px')
|
||||
})
|
||||
.on("mouseout", d => {
|
||||
$("#" + d.target.id).css("stroke-width", '0px')
|
||||
})
|
||||
.append("title")
|
||||
.text(d => keys[j] + " & " + keys[i] + ": "+el)
|
||||
row.forEach((el, j) => {
|
||||
if (j >= i)
|
||||
svg.append("rect")
|
||||
.attr("id", "corr_" + keys[j] + "_" + keys[i])
|
||||
.attr("x", xScale(keys[i]) + 2)
|
||||
.attr("y", yScale(keys[j]) + 5)
|
||||
.attr("width", xScale.bandwidth())
|
||||
.attr("height", yScale.bandwidth())
|
||||
.style("fill", d => colorScale(el))
|
||||
.style("opacity", 0.8)
|
||||
.on("mouseover", d => {
|
||||
$("#" + d.target.id).css("stroke", "black")
|
||||
.css("stroke-width", '2px')
|
||||
})
|
||||
.on("mouseout", d => {
|
||||
$("#" + d.target.id).css("stroke-width", '0px')
|
||||
})
|
||||
.append("title")
|
||||
.text(d => keys[j] + " & " + keys[i] + ": " + el)
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
|
||||
var linearGradient = svg.append("linearGradient")
|
||||
@@ -82,7 +82,7 @@ export default class CorrelationMatrixD3 {
|
||||
.attr("offset", "0%")
|
||||
.attr("stop-color", "#fdae61")
|
||||
|
||||
linearGradient.append("stop")
|
||||
linearGradient.append("stop")
|
||||
.attr("offset", "50%")
|
||||
.attr("stop-color", "#f7f7f7")
|
||||
|
||||
@@ -91,25 +91,25 @@ export default class CorrelationMatrixD3 {
|
||||
.attr("stop-color", "#67a9cf")
|
||||
|
||||
|
||||
const colorLegendHeight = height/3
|
||||
const colorLegendHeight = height / 3
|
||||
svg.append("rect")
|
||||
.attr("width", 20)
|
||||
.attr("height", height / 3)
|
||||
.style("fill", "url(#gradient)")
|
||||
.attr("x", width -50 - 20)
|
||||
.attr("y", height -75 - colorLegendHeight)
|
||||
.attr("x", width - 50 - 20)
|
||||
.attr("y", height - 75 - colorLegendHeight)
|
||||
svg.append("text")
|
||||
.text("-1")
|
||||
.attr("x", width -50 +3)
|
||||
.attr("y", height-75 - colorLegendHeight+6)
|
||||
svg.append("text")
|
||||
.attr("x", width - 50 + 3)
|
||||
.attr("y", height - 75 - colorLegendHeight + 6)
|
||||
svg.append("text")
|
||||
.text(" 1")
|
||||
.attr("x", width -50 +3)
|
||||
.attr("y", height-75 +3)
|
||||
svg.append("text")
|
||||
.attr("x", width - 50 + 3)
|
||||
.attr("y", height - 75 + 3)
|
||||
svg.append("text")
|
||||
.text(" 0")
|
||||
.attr("x", width -50 +3)
|
||||
.attr("y", height-75- colorLegendHeight/2 +3)
|
||||
.attr("x", width - 50 + 3)
|
||||
.attr("y", height - 75 - colorLegendHeight / 2 + 3)
|
||||
|
||||
}
|
||||
}
|
||||
@@ -2,22 +2,23 @@ import React, { useRef, useEffect } from 'react';
|
||||
import { ComponentToPrint } from './componentToPrint';
|
||||
import { exportComponentAsJPEG } from 'react-component-export-image';
|
||||
import CorrelationMatrixD3 from './correlationMatrix.d3';
|
||||
import "./cohortPanel.css"
|
||||
|
||||
const CorrelationMatrix = ({ data }) => {
|
||||
const CorrelationMatrix = ({ data, parentId }) => {
|
||||
const ref = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
const currElement = ref.current
|
||||
if (data) {
|
||||
new CorrelationMatrixD3(currElement, data)
|
||||
new CorrelationMatrixD3(currElement, data, parentId)
|
||||
}
|
||||
}, [data])
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<h6 style={{ fontWeight: "bolder" }}>Correlation Matrix</h6>
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm' onClick={() => exportComponentAsJPEG(ref)} style={{ width: "max-content", }}>
|
||||
<div id="corrMatrixComponent">
|
||||
<h6>Correlation Matrix</h6>
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm printButton' onClick={() => exportComponentAsJPEG(ref)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-printer" viewBox="0 0 16 16">
|
||||
<path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
|
||||
<path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2
|
||||
|
||||
@@ -3,21 +3,21 @@ import { ComponentToPrint } from './componentToPrint';
|
||||
import { exportComponentAsJPEG } from 'react-component-export-image';
|
||||
import DistributionChartD3 from './distributionChart.d3';
|
||||
|
||||
const DistributionChart = ({ data, attr, filteredIds, metadata, hideIds, metadataAttrColor}) => {
|
||||
const DistributionChart = ({ data, attr, filteredIds, metadata, hideIds, metadataAttrColor }) => {
|
||||
const ref = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
const currElement = ref.current
|
||||
if (data) {
|
||||
new DistributionChartD3(currElement, data, attr, filteredIds, metadata, hideIds,metadataAttrColor)
|
||||
new DistributionChartD3(currElement, data, attr, filteredIds, metadata, hideIds, metadataAttrColor)
|
||||
}
|
||||
}, [data])
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ComponentToPrint ref={ref} />
|
||||
<div >
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm' onClick={() => exportComponentAsJPEG(ref)} style={{ width: "max-content", }}>
|
||||
<div>
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm printButton' onClick={() => exportComponentAsJPEG(ref)} >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-printer" viewBox="0 0 16 16">
|
||||
<path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
|
||||
<path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2
|
||||
@@ -27,7 +27,7 @@ const DistributionChart = ({ data, attr, filteredIds, metadata, hideIds, metadat
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, {useRef} from 'react';
|
||||
import React, { useRef } from 'react';
|
||||
import $ from 'jquery';
|
||||
import { exportComponentAsJPEG } from 'react-component-export-image';
|
||||
|
||||
@@ -11,319 +11,315 @@ const HeadSVG = ({ width, height }, ref) => {
|
||||
}
|
||||
const hideTooltip = () => {
|
||||
$('.AUtooltip').css("opacity", "0")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
||||
<div ref={componentRef} style={{ position: "relative", overflow: "none", display: "inline-block", }} onMouseOver={showTooltip} onMouseLeave={hideTooltip}>
|
||||
|
||||
<svg style={{ position: "absolute" }}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${parseInt(height) + 100}`}>
|
||||
<g transform="translate(-36,0) scale(0.9,0.9)"
|
||||
fill="#000000" stroke="none"
|
||||
>
|
||||
<path fill="#3a3b3c" id="headSketch"
|
||||
d="M1275 3785c-49-8-119-16-155-20-80-8-186-35-276-71-281-112-521-412-595-744-41-182-59-495-39-660 13-97 14-129 7-136-2-2-24 3-49 13-38 14-51 14-75 4-101-42-79-192 82-566 7-16 19-50 25-75 12-46 35-99 120-275 27-55 67-143 89-195 23-52 55-117 71-145 16-27 41-70 54-95 14-25 42-68 63-97 21-28 59-81 86-118l47-66V270c0-233 2-270 15-270s15 35 15 253v252l27-35c67-89 283-276 403-349 89-55 150-70 275-71 137 0 322 18 355 36 44 23 193 147 251 209 122 131 141 152 177 198l37 48 3-270c2-232 4-271 17-271s15 40 15 291v292l33 51c19 28 64 98 102 155 61 93 165 304 165 336 0 14 55 122 75 145 13 16 105 239 105 255 0 9 6 23 79 177 74 159 76 164 76 279 0 116-5 128-61 155-31 15-38 15-80 0l-46-15 6 37c24 159 27 237 17 405-5 98-13 182-16 187s-11 51-16 102c-16 148-24 171-142 407-47 95-61 113-157 204-144 137-232 201-310 227-36 12-74 25-85 30-173 71-539 101-790 65zm398-26c29-6 59-11 67-10 38 1 189-22 225-34 22-7 48-13 58-12 17 0 79-25 165-67 73-36 168-113 254-208 46-50 82-94 81-98s9-18 22-30c14-13 25-27 25-32s15-30 33-56c18-27 41-70 51-98 10-27 21-58 26-69 14-33 40-161 61-300 21-141 26-427 9-501-5-22-12-67-15-100-3-32-8-72-12-88l-5-30-13 30-13 29-1-33c-1-18 4-43 10-54 14-27-3-141-37-240-13-39-21-74-18-77 11-11 42 39 49 79 4 22 11 40 17 40 7 0 8-12 4-32-4-18-11-78-15-133-19-221-74-443-153-620-94-207-299-498-504-712-62-65-226-193-254-199-14-2-44-9-68-14-57-13-412-13-412 0 0 6-8 10-17 10-25 0-110 51-163 97-25 21-75 60-111 85-88 63-197 180-320 347-93 127-197 294-235 381-9 19-37 82-64 140-60 131-79 219-121 545-17 142-20 173-9 140 5-16 15-50 21-75 9-36 13-41 19-25 4 11-3 55-16 104-23 83-25 130-11 241 4 25 4 37 1 28-12-38-22-14-34 80-25 198-16 534 19 702 60 285 199 514 408 672 43 33 105 72 138 88 66 31 221 71 300 77 28 2 71 8 97 13s98 13 160 16 114 7 116 9c8 7 141 3 185-6zM177 2129c44-18 50-25 60-62 6-23 8-58 4-77l-7-34-17 45c-20 51-70 105-107 114-22 5-28 1-42-27s-17-30-17-11c-1 22 44 73 65 73 6 0 34-9 61-21zm2723-24c10-12 9-15-6-15-32 0-81-37-120-89-21-28-40-49-42-46-3 2 3 33 13 69l17 64 52 15c66 20 71 20 86 2zm-2748-42c14-16 39-55 57-87 26-50 31-71 31-127 0-37 4-89 9-116 6-26 15-96 21-154 6-59 17-131 24-160 8-30 13-56 10-58-6-6-71 139-79 177-4 18-27 81-52 140-59 140-92 244-99 313-11 94 26 127 78 72zm2750-10c27-31 38-129 20-182-8-25-20-53-27-61-21-27-103-223-138-332-35-107-96-228-82-163 46 228 56 307 56 460 0 121 2 133 24 167 24 36 114 128 126 128 3 0 13-8 21-17z"
|
||||
transform="matrix(.1 0 0 -.1 0 386)"
|
||||
></path>
|
||||
<path
|
||||
d="M550 2601c-106-44-180-88-180-108 0-17 4-17 48 5 20 10 80 29 133 42 95 23 95 23 185 6 49-10 127-24 174-31 112-17 228-49 286-80 26-14 48-25 50-25 6 0 24 103 18 111-13 21-73 42-217 75-116 27-181 37-277 40l-125 5-95-40zm355-21c90-14 246-49 278-61 15-6 27-18 27-25 0-18-14-18-48 0-41 21-167 53-262 67-101 14-143 28-90 28 19 0 62-4 95-9zM2110 2604c-36-8-85-18-110-23-259-55-269-59-254-113 16-56 25-56 231-5 110 28 231 51 293 57 99 8 112 7 229-21 142-33 141-33 141-16 0 30-55 58-234 117-70 24-198 25-296 4zm65-49c-38-8-133-30-210-49-77-20-148-36-159-36-30 0-2 26 37 33 17 4 95 20 172 36s160 30 185 29c42 0 40-1-25-13zM696 2313c-49-13-186-116-186-139 0-21 9-17 64 29 88 75 118 88 206 94 45 3 80 2 80-3s-27-10-60-11c-49-1-71-7-113-33-46-28-97-85-97-108 0-12 46-51 103-89 49-31 134-53 211-53 41 0 206 74 206 92 0 43-105 139-192 175-29 12-44 22-34 23 11 0 57-18 103-40 86-42 168-112 197-169 9-17 23-31 31-31 23 0 18 14-24 67-72 89-114 122-206 160-79 33-102 38-180 40-49 1-99-1-109-4zm74-51c0-4-9-13-20-20-23-14-28-88-7-114 37-46 100-60 166-37 39 14 65 60 57 100s8 36 55-13c64-69 65-74 22-101-71-45-105-52-196-41-67 9-93 17-138 46-30 19-62 43-72 52-16 17-16 19 3 44 21 26 108 92 123 92 4 0 7-3 7-8zm118-34c18-18 15-42-7-62-26-24-72-17-82 12-16 43 56 83 89 50zM2099 2305c-83-17-155-41-195-66-45-27-123-114-140-154-17-42-17-45-1-45 7 0 21 17 30 38 22 51 91 119 152 150 71 36 178 62 258 62s140-24 238-96c33-25 64-43 67-40 10 11-67 81-120 110-104 56-167 65-289 41z"
|
||||
transform="matrix(.1 0 0 -.1 0 386)"
|
||||
></path>
|
||||
<path
|
||||
d="M2045 2245c-38-14-71-25-73-25-14 0-112-107-112-122 0-13 23-29 87-59 80-37 95-41 168-41 101-1 169 26 251 99l58 52-45 40c-65 59-103 75-189 78-59 2-90-2-145-22zm130-60c0-40 0-40-39-40-51 0-67 22-42 60 14 21 24 26 49 23 30-3 32-5 32-43zm148 9c26-20 47-40 47-43 0-16-69-72-120-97-84-43-155-44-257-5-108 42-113 49-68 99 20 22 49 45 65 50 28 10 28 10 23-22-12-74 97-132 173-93 48 25 65 50 66 101 0 29 5 46 13 46 6 0 33-16 58-36zM1295 2240c-4-7-4-15 1-19 5-3 22-21 39-39l29-32 2-298 2-297-34-85c-18-46-31-86-29-88 14-14 34 16 58 84 27 79 27 80 27 360 0 155-3 294-6 310-8 39-78 122-89 104zM1640 2198l-34-42-7-160c-4-89-8-232-8-319l-1-157 36-71c24-48 39-68 46-61 6 6 1 26-15 58-44 89-50 134-38 335 6 100 11 224 11 274 0 90 1 92 35 132 38 45 42 53 23 53-7 0-29-19-48-42z"
|
||||
transform="matrix(.1 0 0 -.1 0 386)"
|
||||
></path>
|
||||
<path
|
||||
d="M1227 1481c-17-31-27-64-27-90 0-36 6-47 38-77 54-52 75-57 139-39 45 13 60 14 89 3 31-11 40-10 65 5 27 15 32 15 45 2 25-25 110-19 161 10 44 26 47 34 44 95-2 40-49 142-62 134-5-2 1-28 13-57 37-94 36-123-7-151-22-14-28-15-47-2-39 24-88 28-135 10-36-14-49-15-85-4-56 16-104 14-138-7-27-15-29-15-58 8-26 20-31 31-31 69 0 31 7 58 24 85 28 46 30 55 12 55-8 0-26-22-40-49zM1310 949c-110-32-163-52-209-76-24-13-57-23-73-23-19 0-28-4-25-12 2-7 10-13 18-13s46-26 84-58c39-32 96-76 129-98 58-39 59-39 160-40 248-2 341 2 363 16 12 8 59 51 105 96 55 55 91 82 107 83 29 1 41 26 13 26-12 0-58 14-104 30-46 17-112 39-148 50s-78 24-93 29c-22 8-42 5-83-10l-54-20-58 20c-32 12-60 21-63 20-2 0-33-9-69-20zm143-34c38-19 51-19 89 1 17 9 45 16 62 16 33 0 205-49 219-62s-94-34-163-32c-40 1-83-5-112-15-44-16-48-16-106 5-38 14-84 22-128 23-38 0-87 6-109 13l-40 13 45 13c25 7 70 20 100 30 61 19 98 17 143-5zm-15-117c28-11 62-18 75-15 12 3 40 11 62 17 34 9 304 14 313 6 1-2-34-37-79-77l-82-74-213 2-214 1-68 49c-118 83-151 108-152 115 0 3 69 4 153 1 120-4 163-9 205-25z"
|
||||
transform="matrix(.1 0 0 -.1 0 386)">
|
||||
</path>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
<div id="expressivityMaskContainer">
|
||||
<svg height="300" width="100" style={{ position: "absolute" }} id="faceExpresivityMask" transform="translate(-4, 0)" opacity="0.5">
|
||||
<circle cx="205" cy="150" r="49%" transform="translate(-70, -20)" />
|
||||
</svg>
|
||||
<svg height="140" width="100" style={{ position: "absolute" }} transform="translate(107, -2)" id="upperFaceExpresivityMask" opacity="0.5">
|
||||
<circle cx="0" cy="150" r="91%" transform="translate(-43, -20)" />
|
||||
<div ref={componentRef} style={{ position: "relative", overflow: "none", display: "inline-block", }} onMouseOver={showTooltip} onMouseLeave={hideTooltip}>
|
||||
<svg style={{ position: "absolute" }}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${parseInt(height) + 100}`}>
|
||||
<g transform="translate(-36,0) scale(0.9,0.9)"
|
||||
fill="#000000" stroke="none">
|
||||
<path fill="#3a3b3c" id="headSketch"
|
||||
d="M1275 3785c-49-8-119-16-155-20-80-8-186-35-276-71-281-112-521-412-595-744-41-182-59-495-39-660 13-97 14-129 7-136-2-2-24 3-49 13-38 14-51 14-75 4-101-42-79-192 82-566 7-16 19-50 25-75 12-46 35-99 120-275 27-55 67-143 89-195 23-52 55-117 71-145 16-27 41-70 54-95 14-25 42-68 63-97 21-28 59-81 86-118l47-66V270c0-233 2-270 15-270s15 35 15 253v252l27-35c67-89 283-276 403-349 89-55 150-70 275-71 137 0 322 18 355 36 44 23 193 147 251 209 122 131 141 152 177 198l37 48 3-270c2-232 4-271 17-271s15 40 15 291v292l33 51c19 28 64 98 102 155 61 93 165 304 165 336 0 14 55 122 75 145 13 16 105 239 105 255 0 9 6 23 79 177 74 159 76 164 76 279 0 116-5 128-61 155-31 15-38 15-80 0l-46-15 6 37c24 159 27 237 17 405-5 98-13 182-16 187s-11 51-16 102c-16 148-24 171-142 407-47 95-61 113-157 204-144 137-232 201-310 227-36 12-74 25-85 30-173 71-539 101-790 65zm398-26c29-6 59-11 67-10 38 1 189-22 225-34 22-7 48-13 58-12 17 0 79-25 165-67 73-36 168-113 254-208 46-50 82-94 81-98s9-18 22-30c14-13 25-27 25-32s15-30 33-56c18-27 41-70 51-98 10-27 21-58 26-69 14-33 40-161 61-300 21-141 26-427 9-501-5-22-12-67-15-100-3-32-8-72-12-88l-5-30-13 30-13 29-1-33c-1-18 4-43 10-54 14-27-3-141-37-240-13-39-21-74-18-77 11-11 42 39 49 79 4 22 11 40 17 40 7 0 8-12 4-32-4-18-11-78-15-133-19-221-74-443-153-620-94-207-299-498-504-712-62-65-226-193-254-199-14-2-44-9-68-14-57-13-412-13-412 0 0 6-8 10-17 10-25 0-110 51-163 97-25 21-75 60-111 85-88 63-197 180-320 347-93 127-197 294-235 381-9 19-37 82-64 140-60 131-79 219-121 545-17 142-20 173-9 140 5-16 15-50 21-75 9-36 13-41 19-25 4 11-3 55-16 104-23 83-25 130-11 241 4 25 4 37 1 28-12-38-22-14-34 80-25 198-16 534 19 702 60 285 199 514 408 672 43 33 105 72 138 88 66 31 221 71 300 77 28 2 71 8 97 13s98 13 160 16 114 7 116 9c8 7 141 3 185-6zM177 2129c44-18 50-25 60-62 6-23 8-58 4-77l-7-34-17 45c-20 51-70 105-107 114-22 5-28 1-42-27s-17-30-17-11c-1 22 44 73 65 73 6 0 34-9 61-21zm2723-24c10-12 9-15-6-15-32 0-81-37-120-89-21-28-40-49-42-46-3 2 3 33 13 69l17 64 52 15c66 20 71 20 86 2zm-2748-42c14-16 39-55 57-87 26-50 31-71 31-127 0-37 4-89 9-116 6-26 15-96 21-154 6-59 17-131 24-160 8-30 13-56 10-58-6-6-71 139-79 177-4 18-27 81-52 140-59 140-92 244-99 313-11 94 26 127 78 72zm2750-10c27-31 38-129 20-182-8-25-20-53-27-61-21-27-103-223-138-332-35-107-96-228-82-163 46 228 56 307 56 460 0 121 2 133 24 167 24 36 114 128 126 128 3 0 13-8 21-17z"
|
||||
transform="matrix(.1 0 0 -.1 0 386)"
|
||||
></path>
|
||||
<path
|
||||
d="M550 2601c-106-44-180-88-180-108 0-17 4-17 48 5 20 10 80 29 133 42 95 23 95 23 185 6 49-10 127-24 174-31 112-17 228-49 286-80 26-14 48-25 50-25 6 0 24 103 18 111-13 21-73 42-217 75-116 27-181 37-277 40l-125 5-95-40zm355-21c90-14 246-49 278-61 15-6 27-18 27-25 0-18-14-18-48 0-41 21-167 53-262 67-101 14-143 28-90 28 19 0 62-4 95-9zM2110 2604c-36-8-85-18-110-23-259-55-269-59-254-113 16-56 25-56 231-5 110 28 231 51 293 57 99 8 112 7 229-21 142-33 141-33 141-16 0 30-55 58-234 117-70 24-198 25-296 4zm65-49c-38-8-133-30-210-49-77-20-148-36-159-36-30 0-2 26 37 33 17 4 95 20 172 36s160 30 185 29c42 0 40-1-25-13zM696 2313c-49-13-186-116-186-139 0-21 9-17 64 29 88 75 118 88 206 94 45 3 80 2 80-3s-27-10-60-11c-49-1-71-7-113-33-46-28-97-85-97-108 0-12 46-51 103-89 49-31 134-53 211-53 41 0 206 74 206 92 0 43-105 139-192 175-29 12-44 22-34 23 11 0 57-18 103-40 86-42 168-112 197-169 9-17 23-31 31-31 23 0 18 14-24 67-72 89-114 122-206 160-79 33-102 38-180 40-49 1-99-1-109-4zm74-51c0-4-9-13-20-20-23-14-28-88-7-114 37-46 100-60 166-37 39 14 65 60 57 100s8 36 55-13c64-69 65-74 22-101-71-45-105-52-196-41-67 9-93 17-138 46-30 19-62 43-72 52-16 17-16 19 3 44 21 26 108 92 123 92 4 0 7-3 7-8zm118-34c18-18 15-42-7-62-26-24-72-17-82 12-16 43 56 83 89 50zM2099 2305c-83-17-155-41-195-66-45-27-123-114-140-154-17-42-17-45-1-45 7 0 21 17 30 38 22 51 91 119 152 150 71 36 178 62 258 62s140-24 238-96c33-25 64-43 67-40 10 11-67 81-120 110-104 56-167 65-289 41z"
|
||||
transform="matrix(.1 0 0 -.1 0 386)"
|
||||
></path>
|
||||
<path
|
||||
d="M2045 2245c-38-14-71-25-73-25-14 0-112-107-112-122 0-13 23-29 87-59 80-37 95-41 168-41 101-1 169 26 251 99l58 52-45 40c-65 59-103 75-189 78-59 2-90-2-145-22zm130-60c0-40 0-40-39-40-51 0-67 22-42 60 14 21 24 26 49 23 30-3 32-5 32-43zm148 9c26-20 47-40 47-43 0-16-69-72-120-97-84-43-155-44-257-5-108 42-113 49-68 99 20 22 49 45 65 50 28 10 28 10 23-22-12-74 97-132 173-93 48 25 65 50 66 101 0 29 5 46 13 46 6 0 33-16 58-36zM1295 2240c-4-7-4-15 1-19 5-3 22-21 39-39l29-32 2-298 2-297-34-85c-18-46-31-86-29-88 14-14 34 16 58 84 27 79 27 80 27 360 0 155-3 294-6 310-8 39-78 122-89 104zM1640 2198l-34-42-7-160c-4-89-8-232-8-319l-1-157 36-71c24-48 39-68 46-61 6 6 1 26-15 58-44 89-50 134-38 335 6 100 11 224 11 274 0 90 1 92 35 132 38 45 42 53 23 53-7 0-29-19-48-42z"
|
||||
transform="matrix(.1 0 0 -.1 0 386)"
|
||||
></path>
|
||||
<path
|
||||
d="M1227 1481c-17-31-27-64-27-90 0-36 6-47 38-77 54-52 75-57 139-39 45 13 60 14 89 3 31-11 40-10 65 5 27 15 32 15 45 2 25-25 110-19 161 10 44 26 47 34 44 95-2 40-49 142-62 134-5-2 1-28 13-57 37-94 36-123-7-151-22-14-28-15-47-2-39 24-88 28-135 10-36-14-49-15-85-4-56 16-104 14-138-7-27-15-29-15-58 8-26 20-31 31-31 69 0 31 7 58 24 85 28 46 30 55 12 55-8 0-26-22-40-49zM1310 949c-110-32-163-52-209-76-24-13-57-23-73-23-19 0-28-4-25-12 2-7 10-13 18-13s46-26 84-58c39-32 96-76 129-98 58-39 59-39 160-40 248-2 341 2 363 16 12 8 59 51 105 96 55 55 91 82 107 83 29 1 41 26 13 26-12 0-58 14-104 30-46 17-112 39-148 50s-78 24-93 29c-22 8-42 5-83-10l-54-20-58 20c-32 12-60 21-63 20-2 0-33-9-69-20zm143-34c38-19 51-19 89 1 17 9 45 16 62 16 33 0 205-49 219-62s-94-34-163-32c-40 1-83-5-112-15-44-16-48-16-106 5-38 14-84 22-128 23-38 0-87 6-109 13l-40 13 45 13c25 7 70 20 100 30 61 19 98 17 143-5zm-15-117c28-11 62-18 75-15 12 3 40 11 62 17 34 9 304 14 313 6 1-2-34-37-79-77l-82-74-213 2-214 1-68 49c-118 83-151 108-152 115 0 3 69 4 153 1 120-4 163-9 205-25z"
|
||||
transform="matrix(.1 0 0 -.1 0 386)">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
<div id="expressivityMaskContainer">
|
||||
<svg height="300" width="100" style={{ position: "absolute" }} id="faceExpresivityMask" transform="translate(-4, 0)" opacity="0.5">
|
||||
<circle cx="205" cy="150" r="49%" transform="translate(-70, -20)" />
|
||||
</svg>
|
||||
<svg height="140" width="100" style={{ position: "absolute" }} transform="translate(107, -2)" id="upperFaceExpresivityMask" opacity="0.5">
|
||||
<circle cx="0" cy="150" r="91%" transform="translate(-43, -20)" />
|
||||
</svg>
|
||||
|
||||
<svg height="140" width="100" style={{ position: "absolute" }} transform="translate(107, 148)" id="lowerFaceExpresivityMask" opacity="0.5">
|
||||
<circle cx="0" cy="150" r="91%" transform="translate(-43, -165)" />
|
||||
</svg>
|
||||
</div>
|
||||
<svg height="140" width="100" style={{ position: "absolute" }} transform="translate(107, 148)" id="lowerFaceExpresivityMask" opacity="0.5">
|
||||
<circle cx="0" cy="150" r="91%" transform="translate(-43, -165)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="facePainExpresivityMask" >
|
||||
<ellipse cx="0" cy="150" rx="38%" ry="35%" transform="translate(99, -20)" />
|
||||
</svg>
|
||||
|
||||
<div id="asymetryMaskContainer">
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="faceAsymetryMask" opacity="0.5">
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="facePainExpresivityMask" >
|
||||
<ellipse cx="0" cy="150" rx="38%" ry="35%" transform="translate(99, -20)" />
|
||||
</svg>
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="leftEyeAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" ry="5%" rx="14%" transform="translate(58, -31)" />
|
||||
</svg>
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="rightEyeAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" ry="5%" rx="14%" transform="translate(144, -31)" />
|
||||
</svg>
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="leftEyebrowAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" ry="3%" rx="15%" transform="translate(60, -60)" />
|
||||
</svg>
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="rightEyebrowAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" ry="3%" rx="15%" transform="translate(144, -60)" />
|
||||
</svg>
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="mouthAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" rx="20%" ry="7%" transform="translate(100, 55)" />
|
||||
</svg>
|
||||
|
||||
<div id="asymetryMaskContainer">
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="faceAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" rx="38%" ry="35%" transform="translate(99, -20)" />
|
||||
</svg>
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="leftEyeAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" ry="5%" rx="14%" transform="translate(58, -31)" />
|
||||
</svg>
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="rightEyeAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" ry="5%" rx="14%" transform="translate(144, -31)" />
|
||||
</svg>
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="leftEyebrowAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" ry="3%" rx="15%" transform="translate(60, -60)" />
|
||||
</svg>
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="rightEyebrowAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" ry="3%" rx="15%" transform="translate(144, -60)" />
|
||||
</svg>
|
||||
<svg height="300" width="200" style={{ position: "absolute" }} id="mouthAsymetryMask" opacity="0.5">
|
||||
<ellipse cx="0" cy="150" rx="20%" ry="7%" transform="translate(100, 55)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="AUHighlightsContainer">
|
||||
<svg height="20" width="20" style={{ position: "absolute" }} id="au12RightHighlight" transform="translate(125, 180)" className="hap_highlight con_highlight emotion_highlight">
|
||||
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
|
||||
|
||||
</svg>
|
||||
<svg height="20" width="20" style={{ position: "absolute" }} id="au12LeftHighlight" transform="translate(56, 180)" className="hap_highlight con_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(91, 226)" id="au26Highlight" 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(58, 145)" id="au9RightHighlight" className='dig_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(123, 145)" id="au9LeftHighlight" className='dig_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(43, 90)" id="au4LeftHighlight" 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(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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(16, 104)" id="au5LeftHighlight" className="sur_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(158, 158), rotate(-90)" id="au6RightHighlight" className="hap_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(23, 158),rotate(90)" id="au6LeftHighlight" className="hap_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(135, 188)" id="au20LeftHighlight" className='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(48, 188)" id="au20RightHighlight" className='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(134, 200), rotate(-90)" id="au15RightHighlight" className="sad_highlight dig_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(47, 201), rotate(90)" id="au15LeftHighlight" className="sad_highlight dig_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(65, 212), rotate(45)" id="au16LeftHighlight" className='dig_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(115, 212), rotate(-45)" id="au16RightHighlight" className='dig_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(108, 180), rotate(45)" id="au23RightUpHighlight" className='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(72, 180), rotate(-45)" id="au23leftUpHighlight" className='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(78, 215), rotate(-45)" id="au23LeftDownHighlight" className='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(102, 215), rotate(45)" id="au23RightDownHighlight" className='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(28, 125), rotate(-45)" id="au7LeftHighlight" className='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(150, 125), rotate(45)" id="au7RightHighlight" className='fea_highlight ang_highlight emotion_highlight'>
|
||||
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="AUContainer" style={{ position: "absolute" }}>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU12" viewBox="0 0 20 20" transform="translate(127, 180), rotate(-45)" id="au12Left">
|
||||
<path id="au12Left_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="90%" y="1%" transform="rotate(45)" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >12</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU12" viewBox="0 0 20 20" transform="translate(54, 182), rotate(45)" id="au12Right">
|
||||
<path id="au12Right_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="50%" transform="rotate(-45)" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >12</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-down AU26" viewBox="0 0 16 16" transform="translate(93, 226)" id="au26">
|
||||
<path id="au26_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" >26</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU09" viewBox="0 0 20 20" transform="translate(60, 146)" id="au9Right">
|
||||
<path id="au9Right_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="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >9</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU09" viewBox="0 0 20 20" transform="translate(125, 147)" id="au9Left">
|
||||
<path id="au9Left_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="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">9</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU04" viewBox="0 0 20 20" transform="translate(45, 89)" id="au4Left">
|
||||
<path id="au4Left_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="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU04" viewBox="0 0 20 20" transform="translate(143, 89)" id="au4Right">
|
||||
<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">
|
||||
<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">
|
||||
<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 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>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU05" viewBox="0 0 16 16" transform="translate(18, 105)" id="au5Left">
|
||||
<path id="au5Left_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>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU06" viewBox="0 0 16 16" transform="translate(160, 160), rotate(-90)" id="au6Right">
|
||||
<path id="au6Right_path" strokeWidth="12%" d="M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z" />
|
||||
<text className='AUtooltip' opacity='0' x="30%" y="-50%" transform='rotate(90)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">6</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU06" viewBox="0 0 16 16" transform="translate(25, 160),rotate(90)" id="au6Left">
|
||||
<path id="au6Left_path" strokeWidth="12%" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
|
||||
<text className='AUtooltip' opacity='0' x="-30%" y="50%" transform='rotate(-90)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >6</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU20" viewBox="0 0 20 20" transform="translate(135, 190)" id="au20Left">
|
||||
<path id="au20left_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="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >20</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU20" viewBox="0 0 20 20" transform="translate(50, 190)" id="au20Right">
|
||||
<path id="au20Right_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="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >20</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU15" viewBox="0 0 20 20" transform="translate(136, 200), rotate(-90)" id="au15Right">
|
||||
<path id="au15Right_path" strokeWidth="12%" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
|
||||
<text className='AUtooltip' opacity='0' x="30%" y="-50%" transform='rotate(90)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >15</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU15" viewBox="0 0 20 20" transform="translate(43, 204), rotate(90)" id="au15Left">
|
||||
<path id="au15Left_path" strokeWidth="12%" d="M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z" />
|
||||
<text className='AUtooltip' opacity='0' x="-30%" y="50%" transform='rotate(-90)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >15</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-down AU17" viewBox="0 0 16 16" transform="translate(67, 215), rotate(45)" id="au16Left">
|
||||
<path id="au16Left_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="0%" y="80%" transform='rotate(-45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >16</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-down AU17" viewBox="0 0 16 16" transform="translate(117, 215), rotate(-45)" id="au16Right">
|
||||
<path id="au16Right_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="80%" y="10%" transform='rotate(45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >16</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-down AU23" viewBox="0 0 16 16" transform="translate(112, 180), rotate(45)" id="au23RightUp">
|
||||
<path id="au23RightUp_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="0%" y="80%" transform='rotate(-45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">23</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-down AU23" viewBox="0 0 16 16" transform="translate(72, 180), rotate(-45)" id="au23leftUp">
|
||||
<path id="au23LeftUp_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="80%" y="10%" transform='rotate(45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">23</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU23" viewBox="0 0 20 20" transform="translate(80, 217), rotate(-45)" id="au23LeftDown">
|
||||
<path id="au23LeftDown_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="10%" transform='rotate(45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">23</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU23" viewBox="0 0 20 20" transform="translate(103, 220), rotate(45)" id="au23RightDown">
|
||||
<path id="au23RightDown_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>
|
||||
</svg>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="headMovementMaskContainer">
|
||||
<svg width="32" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(85, -25)" id="pitchUp"
|
||||
>
|
||||
<path id="pitchUp_path" strokeWidth="4px" d="M17.504 26.025l.001-14.287 6.366 6.367L26 15.979 15.997 5.975 6 15.971 8.129 18.1l6.366-6.368v14.291z" />
|
||||
</svg>
|
||||
|
||||
<svg width="302" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(-50, 260)" id="pitchDown">
|
||||
<path id="pitchDown_path" strokeWidth="4px" d="m14.496 5.975l-.001 14.287-6.366-6.367L6 16.021l10.003 10.004L26 16.029 23.871 13.9l-6.366 6.368V5.977z" />
|
||||
</svg>
|
||||
|
||||
<svg width="32" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(170, 0), rotate(-45)" id="rollRight">
|
||||
<path id="rollRight_path" strokeWidth="4px" d="M5.975 17.504l14.287.001-6.367 6.366L16.021 26l10.004-10.003L16.029 6l-2.128 2.129 6.367 6.366H5.977z" />
|
||||
</svg>
|
||||
|
||||
<svg width="32" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(5, 0), rotate(45)" id="rollLeft">
|
||||
<path id="rollLeft_path" strokeWidth="4px" d="M26.025 14.496l-14.286-.001 6.366-6.366L15.979 6 5.975 16.003 15.971 26l2.129-2.129-6.367-6.366h14.29z" />
|
||||
</svg>
|
||||
<svg width="32" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(-30, 120)" id="yawLeft">
|
||||
<path id="yawLeft_path" strokeWidth="4px" d="M26.025 14.496l-14.286-.001 6.366-6.366L15.979 6 5.975 16.003 15.971 26l2.129-2.129-6.367-6.366h14.29z" />
|
||||
</svg>
|
||||
<svg width="32" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(200, 120)" id="yawRight">
|
||||
<path id="yawRight_path" strokeWidth="4px" d="M5.975 17.504l14.287.001-6.367 6.366L16.021 26l10.004-10.003L16.029 6l-2.128 2.129 6.367 6.366H5.977z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div id="tooltip" display="none"
|
||||
style={{ position: "absolute", display: "none", fontSize: "0.6rem", background: "white", border: "1px solid black", padding: "2px" }}></div>
|
||||
</div>
|
||||
|
||||
<div id="AUHighlightsContainer">
|
||||
<svg height="20" width="20" style={{ position: "absolute" }} id="au12RightHighlight" transform="translate(125, 180)" className="hap_highlight con_highlight emotion_highlight">
|
||||
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
|
||||
|
||||
</svg>
|
||||
<svg height="20" width="20" style={{ position: "absolute" }} id="au12LeftHighlight" transform="translate(56, 180)" className="hap_highlight con_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(91, 226)" id="au26Highlight" 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(58, 145)" id="au9RightHighlight" className='dig_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(123, 145)" id="au9LeftHighlight" className='dig_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(43, 90)" id="au4LeftHighlight" 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(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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} transform="translate(16, 104)" id="au5LeftHighlight" className="sur_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(158, 158), rotate(-90)" id="au6RightHighlight" className="hap_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(23, 158),rotate(90)" id="au6LeftHighlight" className="hap_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(135, 188)" id="au20LeftHighlight" className='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(48, 188)" id="au20RightHighlight" className='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(134, 200), rotate(-90)" id="au15RightHighlight" className="sad_highlight dig_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(47, 201), rotate(90)" id="au15LeftHighlight" className="sad_highlight dig_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(65, 212), rotate(45)" id="au16LeftHighlight" className='dig_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(115, 212), rotate(-45)" id="au16RightHighlight" className='dig_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(108, 180), rotate(45)" id="au23RightUpHighlight" className='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(72, 180), rotate(-45)" id="au23leftUpHighlight" className='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(78, 215), rotate(-45)" id="au23LeftDownHighlight" className='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(102, 215), rotate(45)" id="au23RightDownHighlight" className='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(28, 125), rotate(-45)" id="au7LeftHighlight" className='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(150, 125), rotate(45)" id="au7RightHighlight" className='fea_highlight ang_highlight emotion_highlight'>
|
||||
<circle cx="10" cy="10" r="50%" fill="purple" opacity="0.4" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="AUContainer" style={{ position: "absolute" }}>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU12" viewBox="0 0 20 20" transform="translate(127, 180), rotate(-45)" id="au12Left">
|
||||
<path id="au12Left_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="90%" y="1%" transform="rotate(45)" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >12</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU12" viewBox="0 0 20 20" transform="translate(54, 182), rotate(45)" id="au12Right">
|
||||
<path id="au12Right_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="50%" transform="rotate(-45)" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >12</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-down AU26" viewBox="0 0 16 16" transform="translate(93, 226)" id="au26">
|
||||
<path id="au26_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" >26</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU09" viewBox="0 0 20 20" transform="translate(60, 146)" id="au9Right">
|
||||
<path id="au9Right_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="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >9</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU09" viewBox="0 0 20 20" transform="translate(125, 147)" id="au9Left">
|
||||
<path id="au9Left_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="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">9</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU04" viewBox="0 0 20 20" transform="translate(45, 89)" id="au4Left">
|
||||
<path id="au4Left_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="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU04" viewBox="0 0 20 20" transform="translate(143, 89)" id="au4Right">
|
||||
<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">
|
||||
<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">
|
||||
<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 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>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU05" viewBox="0 0 16 16" transform="translate(18, 105)" id="au5Left">
|
||||
<path id="au5Left_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>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU06" viewBox="0 0 16 16" transform="translate(160, 160), rotate(-90)" id="au6Right">
|
||||
<path id="au6Right_path" strokeWidth="12%" d="M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z" />
|
||||
<text className='AUtooltip' opacity='0' x="30%" y="-50%" transform='rotate(90)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">6</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-up AU06" viewBox="0 0 16 16" transform="translate(25, 160),rotate(90)" id="au6Left">
|
||||
<path id="au6Left_path" strokeWidth="12%" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
|
||||
<text className='AUtooltip' opacity='0' x="-30%" y="50%" transform='rotate(-90)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >6</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU20" viewBox="0 0 20 20" transform="translate(135, 190)" id="au20Left">
|
||||
<path id="au20left_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="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >20</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU20" viewBox="0 0 20 20" transform="translate(50, 190)" id="au20Right">
|
||||
<path id="au20Right_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="40%" y="50%" textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >20</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU15" viewBox="0 0 20 20" transform="translate(136, 200), rotate(-90)" id="au15Right">
|
||||
<path id="au15Right_path" strokeWidth="12%" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
|
||||
<text className='AUtooltip' opacity='0' x="30%" y="-50%" transform='rotate(90)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >15</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU15" viewBox="0 0 20 20" transform="translate(43, 204), rotate(90)" id="au15Left">
|
||||
<path id="au15Left_path" strokeWidth="12%" d="M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z" />
|
||||
<text className='AUtooltip' opacity='0' x="-30%" y="50%" transform='rotate(-90)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >15</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-down AU17" viewBox="0 0 16 16" transform="translate(67, 215), rotate(45)" id="au16Left">
|
||||
<path id="au16Left_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="0%" y="80%" transform='rotate(-45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >16</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-down AU17" viewBox="0 0 16 16" transform="translate(117, 215), rotate(-45)" id="au16Right">
|
||||
<path id="au16Right_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="80%" y="10%" transform='rotate(45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2" >16</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-down AU23" viewBox="0 0 16 16" transform="translate(112, 180), rotate(45)" id="au23RightUp">
|
||||
<path id="au23RightUp_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="0%" y="80%" transform='rotate(-45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">23</text>
|
||||
</svg>
|
||||
<svg width="16" height="16" style={{ position: "absolute" }} className="bi bi-arrow-down AU23" viewBox="0 0 16 16" transform="translate(72, 180), rotate(-45)" id="au23leftUp">
|
||||
<path id="au23LeftUp_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="80%" y="10%" transform='rotate(45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">23</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-right AU23" viewBox="0 0 20 20" transform="translate(80, 217), rotate(-45)" id="au23LeftDown">
|
||||
<path id="au23LeftDown_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="10%" transform='rotate(45)' textAnchor="middle" fontSize="10px" stroke="black" strokeWidth="0.2">23</text>
|
||||
</svg>
|
||||
<svg width="20" height="20" style={{ position: "absolute" }} className="bi bi-arrow-left AU23" viewBox="0 0 20 20" transform="translate(103, 220), rotate(45)" id="au23RightDown">
|
||||
<path id="au23RightDown_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>
|
||||
</svg>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="headMovementMaskContainer">
|
||||
<svg width="32" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(85, -25)" id="pitchUp"
|
||||
>
|
||||
<path id="pitchUp_path" strokeWidth="4px" d="M17.504 26.025l.001-14.287 6.366 6.367L26 15.979 15.997 5.975 6 15.971 8.129 18.1l6.366-6.368v14.291z" />
|
||||
</svg>
|
||||
|
||||
<svg width="302" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(-50, 260)" id="pitchDown">
|
||||
<path id="pitchDown_path" strokeWidth="4px" d="m14.496 5.975l-.001 14.287-6.366-6.367L6 16.021l10.003 10.004L26 16.029 23.871 13.9l-6.366 6.368V5.977z" />
|
||||
</svg>
|
||||
|
||||
<svg width="32" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(170, 0), rotate(-45)" id="rollRight">
|
||||
<path id="rollRight_path" strokeWidth="4px" d="M5.975 17.504l14.287.001-6.367 6.366L16.021 26l10.004-10.003L16.029 6l-2.128 2.129 6.367 6.366H5.977z" />
|
||||
</svg>
|
||||
|
||||
<svg width="32" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(5, 0), rotate(45)" id="rollLeft">
|
||||
<path id="rollLeft_path" strokeWidth="4px" d="M26.025 14.496l-14.286-.001 6.366-6.366L15.979 6 5.975 16.003 15.971 26l2.129-2.129-6.367-6.366h14.29z" />
|
||||
</svg>
|
||||
<svg width="32" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(-30, 120)" id="yawLeft">
|
||||
<path id="yawLeft_path" strokeWidth="4px" d="M26.025 14.496l-14.286-.001 6.366-6.366L15.979 6 5.975 16.003 15.971 26l2.129-2.129-6.367-6.366h14.29z" />
|
||||
</svg>
|
||||
<svg width="32" height="32" style={{ position: "absolute" }} className="bi bi-arrow-down" viewBox="0 0 32 32" transform="translate(200, 120)" id="yawRight">
|
||||
<path id="yawRight_path" strokeWidth="4px" d="M5.975 17.504l14.287.001-6.367 6.366L16.021 26l10.004-10.003L16.029 6l-2.128 2.129 6.367 6.366H5.977z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div id="tooltip" display="none"
|
||||
style={{ position: "absolute", display: "none", fontSize: "0.6rem", background: "white", border: "1px solid black", padding: "2px" }}></div>
|
||||
</div>
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm' style={{ width: "max-content", position:"absolute",left:"0", }} onClick={() => exportComponentAsJPEG(componentRef)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-printer" viewBox="0 0 16 16">
|
||||
<path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
|
||||
<path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm' style={{ width: "max-content", position: "absolute", left: "0", }} onClick={() => exportComponentAsJPEG(componentRef)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-printer" viewBox="0 0 16 16">
|
||||
<path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
|
||||
<path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2
|
||||
0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2
|
||||
2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0
|
||||
1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z" />
|
||||
</svg>
|
||||
</button>
|
||||
</svg>
|
||||
</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default HeadSVG;
|
||||
|
||||
@@ -14,7 +14,7 @@ export default class HistogramD3 {
|
||||
attr.includes("mov_") ? document.getElementById("headMovementContainer") :
|
||||
document.getElementById("voiceAcousticsContainer")
|
||||
|
||||
var width = parentContainer.clientWidth / 3
|
||||
var width = parentContainer.clientWidth > 600 ? parentContainer.clientWidth / 3.6 : parentContainer.clientWidth / 2
|
||||
var height = 70
|
||||
var marginLeft = 35
|
||||
|
||||
@@ -35,8 +35,8 @@ export default class HistogramD3 {
|
||||
.attr("transform", "translate(0," + (height - 20) + ")")
|
||||
.call(xAxis)
|
||||
|
||||
var minVal = DBMDict[attr]['range'].length >0 ? DBMDict[attr]['range'][0] : Math.min(...values)
|
||||
var maxVal = DBMDict[attr]['range'].length >0 ? DBMDict[attr]['range'][1] : Math.max(...values)
|
||||
var minVal = DBMDict[attr]['range'].length > 0 ? DBMDict[attr]['range'][0] : Math.min(...values)
|
||||
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])
|
||||
|
||||
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from 'react';
|
||||
import { exportComponentAsJPEG } from 'react-component-export-image';
|
||||
import HistogramD3 from './histogram.d3';
|
||||
import DBMDict from '../DBM_attribute_dict.json'
|
||||
import "./individualPanel.css"
|
||||
|
||||
const Histogram = ({ data, derivedData, attr, color, timeframe }) => {
|
||||
const ref = useRef(null)
|
||||
@@ -17,27 +18,23 @@ const Histogram = ({ data, derivedData, attr, color, timeframe }) => {
|
||||
<React.Fragment>
|
||||
<div ref={ref}>
|
||||
<div>
|
||||
<div>{DBMDict[attr]['label']}</div>
|
||||
<div style={{ display: "flex", flexDirection: "row", }}>
|
||||
|
||||
{derivedData[attr + "_mean"] ? <div style={{ fontSize: "0.7rem", marginTop: "3px", marginRight: "10px" }}>{"mean: " + derivedData[attr + "_mean"]}</div> : ""}
|
||||
{derivedData[attr + "_std"] ? <div style={{ fontSize: "0.7rem", marginTop: "3px", marginRight:"10px" }}>{"std: " + derivedData[attr + "_mean"]}</div>: ""}
|
||||
{DBMDict[attr]['range'].length > 0 && <div style={{ fontSize: "0.7rem", marginTop: "3px" }}>{"range: [" + DBMDict[attr]['range']+"]"}</div>}
|
||||
|
||||
|
||||
<div>{DBMDict[attr]['label']}</div>
|
||||
<div className="histogramStatisticsContainer">
|
||||
{derivedData[attr + "_mean"] ? <div className="histogramStatistics">{"mean: " + derivedData[attr + "_mean"]}</div> : ""}
|
||||
{derivedData[attr + "_std"] ? <div className="histogramStatistics">{"std: " + derivedData[attr + "_mean"]}</div> : ""}
|
||||
</div>
|
||||
{DBMDict[attr]['range'].length > 0 && <div className="histogramStatistics">{"range: [" + DBMDict[attr]['range'] + "]"}</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm' onClick={() => exportComponentAsJPEG(ref)} style={{ width: "max-content", height:"max-content", marginLeft:"-35px" }}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-printer" viewBox="0 0 16 16">
|
||||
<path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
|
||||
<path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm printButton' onClick={() => exportComponentAsJPEG(ref)} >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-printer" viewBox="0 0 16 16">
|
||||
<path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
|
||||
<path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2
|
||||
0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2
|
||||
2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0
|
||||
1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z" />
|
||||
</svg>
|
||||
</button>
|
||||
</svg>
|
||||
</button>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
336
dashboard/src/components/individualPanel.css
Normal file
336
dashboard/src/components/individualPanel.css
Normal file
@@ -0,0 +1,336 @@
|
||||
.histogramComponent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.printButton {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.spiderChartLabel {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.spiderChartComponent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.histogramStatisticsContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.histogramStatistics {
|
||||
font-size: 0.7rem;
|
||||
margin-top: 3px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#timelineContainer {
|
||||
height: 5%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 250px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sliderContainer {
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#timelineRange {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#steplist {
|
||||
display: inline-flex;
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
|
||||
#steplist option {
|
||||
margin-left: 2px;
|
||||
margin-right: 4px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
#timeFramesContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin: auto;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#facialFrameLabel {
|
||||
margin: auto;
|
||||
font-weight: bolder;
|
||||
color: #41ab5d;
|
||||
}
|
||||
|
||||
#movementFrameLabel {
|
||||
margin: auto;
|
||||
font-weight: bolder;
|
||||
color: #4292c6;
|
||||
}
|
||||
|
||||
#acousticFrameLabel {
|
||||
margin: auto;
|
||||
font-weight: bolder;
|
||||
color: #807dba;
|
||||
}
|
||||
|
||||
#frameLabel {
|
||||
margin: auto;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
#headContainer {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#headAndIdPanelContainer {
|
||||
height: 100%;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#componentsContainer {
|
||||
height: 90vh;
|
||||
width: 99vw;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#faceMaskButtonContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
gap: 3px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
#headComponentContainer {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#colorLegendAndIdPanelContainer {
|
||||
margin-top: 300px;
|
||||
}
|
||||
|
||||
#AUButtonContainer {
|
||||
width: 100%;
|
||||
height: 3vh;
|
||||
font-size: 0.7rem;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.id_checkbox_container {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
#colorScaleContainer {
|
||||
width: 90%;
|
||||
height: 5vh;
|
||||
}
|
||||
|
||||
#idPanelContainerIndividual {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 15px;
|
||||
padding-top: 10px;
|
||||
font-size: 0.7rem;
|
||||
width: 230px;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
||||
height: calc(90vh - 420px);
|
||||
}
|
||||
|
||||
#idPanelContainerIndividual div {
|
||||
font-size: 0.8rem;
|
||||
width: 210px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#facialAndSpeechContainer {
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#facialActivityContainer {
|
||||
height: 48%;
|
||||
background-color: #f7fcf5;
|
||||
padding: 10px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#facialContainer {
|
||||
font-size: 0.8rem;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#facialQueryPanelContainer {
|
||||
margin-left: -10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#facialQueryPanelButtonsContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#facialHistogramsContainer {
|
||||
width: 77%;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
|
||||
.histogramContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#facialSpeechAndCorrPanelContainer {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 48%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#facialSpeechAnCorrPanelButtons {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#facialSpeechAnCorrPanelButtons .btn {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
#facialAndSpeechPanelContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#SpiderChartContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.spiderComponent {
|
||||
width: max-content;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.spiderChart {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#speechLabel {
|
||||
margin-bottom: 10px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
#speechComponent {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.corrMatrixContainer {
|
||||
height: 85%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#corrQueryPanelContainer {
|
||||
width: 25%;
|
||||
height: 95%;
|
||||
overflow-y: scroll;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 15px;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#corrQuerryButton {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#corrMatrixComponentIndividual {
|
||||
width: 74%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
#movementAndAcousticContainer {
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#headMovementContainer {
|
||||
height: 48%;
|
||||
overflow-Y: scroll;
|
||||
background-color: #f7fbff;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
#movementContainer {
|
||||
width: max-content;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#movementQueryButtonContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#movementHistogramContainer {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#voiceAcousticsContainer {
|
||||
height: 48%;
|
||||
overflow-y: scroll;
|
||||
background-color: #f7f4f9;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
#acousticsContainer {
|
||||
padding: 10px;
|
||||
margin-left: -10px;
|
||||
margin-right: 5px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#acousticsQueryButtonContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#acousticsHistogramContainer {
|
||||
width: 79%;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
@@ -9,6 +9,7 @@ import QueryPanel from './queryPanel.js';
|
||||
import ColorLegend from './colorLegend.js';
|
||||
import CorrelationMatrix from './correlationMatrix.js';
|
||||
import DBMDict from "../DBM_attribute_dict.json"
|
||||
import './individualPanel.css'
|
||||
|
||||
function IndividualPanel() {
|
||||
const [movementButton, setMovementButton] = useState(false)
|
||||
@@ -27,9 +28,12 @@ function IndividualPanel() {
|
||||
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 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"]
|
||||
@@ -352,47 +356,56 @@ function IndividualPanel() {
|
||||
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 id="timelineContainer">
|
||||
<div className="sliderContainer">
|
||||
<div>Timeline</div>
|
||||
<div>
|
||||
<input type="range" min='0' max="20" id="myRange" className="slider" style={{ width: "400px" }}
|
||||
<input type="range" min='0' max="20" id="timelineRange" className="slider"
|
||||
step="1" value={timeslotValue} onChange={setTime} list="steplist"></input>
|
||||
<datalist id="steplist" style={{ display: "inline-flex", marginTop: "-10px !important" }}>
|
||||
<datalist id="steplist">
|
||||
{timepoints.map((e, i) =>
|
||||
<option value={e} style={{ marginLeft: "2px", marginRight: "4px", fontSize: "0.7rem" }} key={e+"timepoint"}>{i === 0 ? "*" : e}</option>
|
||||
<option value={e} key={e + "timepoint"}>{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 id="timeFramesContainer">
|
||||
<div id="frameLabel">Frames:</div>
|
||||
<h6 id="facialFrameLabel">Facial</h6>
|
||||
<h6 id="movementFrameLabel">Movement</h6>
|
||||
<h6 id="acousticFrameLabel">Acoustics</h6>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<Row style={{ height: "90vh", width: "99vw", marginLeft: "10px" }}>
|
||||
<Row id="componentsContainer">
|
||||
{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>
|
||||
<Col id="headAndIdPanelContainer" className="col-2">
|
||||
<Row id='headContainer'>
|
||||
<div id="faceMaskButtonContainer">
|
||||
<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 id="headComponentContainer">
|
||||
< 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" }}>
|
||||
<Row id="colorLegendAndIdPanelContainer">
|
||||
<div id="AUButtonContainer">
|
||||
{AUsButton && emotions.map((value, index) =>
|
||||
<label className="id_checkbox_container" style={{ marginRight: "3px" }} key={value+"AU"}>
|
||||
<label className="id_checkbox_container" key={value + "AU"}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={value + "_highlight"}
|
||||
@@ -404,14 +417,15 @@ function IndividualPanel() {
|
||||
</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 id="colorScaleContainer" style={{ 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)' }}>
|
||||
<Col id="idPanelContainerIndividual" className="col-2">
|
||||
<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" }}>
|
||||
<div >
|
||||
{idData.map((value, index) =>
|
||||
<label className="id_checkbox_container" id={value + "_id_"} key={value+"idIndividual"}>
|
||||
<label className="id_checkbox_container" id={value + "_id_"} key={value + "idIndividual"}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={value + "_id_checkbox"}
|
||||
@@ -426,96 +440,99 @@ function IndividualPanel() {
|
||||
</Row>
|
||||
</Col>
|
||||
}
|
||||
<Col style={{ height: "100%", marginRight: "10px", width: "40%" }}>
|
||||
<Col id="facialAndSpeechContainer">
|
||||
{rawFacialData && rawFacialData.length > 0 &&
|
||||
<Row id="facialActivityContainer" style={{ height: "48%", backgroundColor: "#f7fcf5", padding: "10px", overflowY: "scroll" }}>
|
||||
<Row id="facialActivityContainer">
|
||||
<div style={{ display: "flex", }}>
|
||||
<Col className='col-2' style={{ fontSize: "0.8rem", width: "max-content", }}>
|
||||
<Col id="facialContainer" className='col-2'>
|
||||
{allFacialAttr &&
|
||||
<div style={{ marginLeft: "-10px", marginRight: "5px" }}>
|
||||
<div style={{ display: "inline-flex", flexDirection: "row" }}>
|
||||
<div id="facialQueryPanelContainer" >
|
||||
<div id="facialQueryPanelButtonsContainer">
|
||||
<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>
|
||||
<button type="button" className="btn-close" aria-label="Close"
|
||||
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" }}>
|
||||
<Col id="facialHistogramsContainer" className='col-2'>
|
||||
{facialAttr.map((value) =>
|
||||
<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 className="histogramContainer" key={value + "facHistogram"}>
|
||||
{<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>
|
||||
<Row id="facialSpeechAndCorrPanelContainer">
|
||||
<div id="facialSpeechAnCorrPanelButtons">
|
||||
<button type="button" className={`btn btn-sm ${speechButton === true ? 'btn-primary' : 'btn-secondary'}`}
|
||||
onClick={() => handleSpeechPanel("speech")} id="speechPanelButton" >{'Facial & Speech'}</button>
|
||||
<button type="button" className={`btn btn-sm ${corrButton === true ? 'btn-primary' : 'btn-secondary'}`}
|
||||
onClick={() => handleSpeechPanel("corr")} 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 id="facialAndSpeechPanelContainer">
|
||||
<Col id="SpiderChartContainer" className='col-8'>
|
||||
<div className="spiderComponent" >
|
||||
<SpiderChart label={'Emotion Intensity'} derivedData={derivedData}
|
||||
timelineData={facialTimelineData} timeframe={timeslotValue} levels={[0, 0.25, 0.5, 0.75, 1]}
|
||||
axes={meanEmotionsSoft.reverse()} />
|
||||
</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 className="spiderComponent" >
|
||||
<SpiderChart className="spiderChart" label={'AU Intensity'} derivedData={derivedData}
|
||||
timelineData={facialTimelineData} timeframe={timeslotValue} levels={[0, 1, 2, 3, 4, 5]}
|
||||
axes={meanAUsSoft.reverse()} />
|
||||
</div>
|
||||
</Col>
|
||||
<Col className='col-4'>
|
||||
<h6 style={{ marginBotom: "10px", fontWeight: "bolder" }}>Speech</h6>
|
||||
<h6 id="speechLabel">Speech</h6>
|
||||
{speechDerivedData && speechDerivedData.map((value, index) =>
|
||||
<div style={{ fontSize: "0.8rem" }} key={value +"speech"}>{DBMDict[value]['label'] + ": " + derivedData[value]}</div>
|
||||
<div id="speechComponent" key={value + "speech"}>{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" }}>
|
||||
|
||||
<Row className="corrMatrixContainer">
|
||||
<Col id="corrQueryPanelContainer" className='col-2'>
|
||||
<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 id="corrQuerryButton">
|
||||
<button type="button" className='btn btn-sm btn-outline-primary' 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 className='col-2' id="corrMatrixComponentIndividual" >
|
||||
<CorrelationMatrix data={corrMatrixData} parentId={"corrMatrixComponentIndividual"} />
|
||||
</Col>
|
||||
</Row>}
|
||||
</Row>
|
||||
</Col>
|
||||
<Col style={{ height: "100%", width: "40%" }}>
|
||||
<Col id="movementAndAcousticContainer">
|
||||
{rawMovementData && rawMovementData.length > 0 &&
|
||||
<Row id="headMovementContainer" style={{ height: "48%", overflowY: "scroll", backgroundColor: "#f7fbff" }}>
|
||||
<Row id="headMovementContainer">
|
||||
<div style={{ display: "flex", }}>
|
||||
<Col className='col-2' style={{ width: "max-content", fontSize: "0.8rem" }}>
|
||||
<Col className='col-2' id="movementContainer">
|
||||
{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>
|
||||
<div id="movementQueryButtonContainer">
|
||||
<button type="button" className='btn btn-sm btn-outline-primary' onClick={() => handleUpdate("movement")}>Update</button>
|
||||
<button type="button" className="btn-close" aria-label="Close" onClick={() => handleUnselectCheckboxes("movement")}></button>
|
||||
</div>
|
||||
<QueryPanel allAcousticArg={[]} allMovementArg={allMovementAttr} allSpeechArg={[]} allFacialArg={[]}
|
||||
checkedState={checkedMovementState} handleCheckboxChange={handleMovementCheckboxChange} idVal={"rawMovementIndividualAttr_"} />
|
||||
</div>}
|
||||
</div>
|
||||
}
|
||||
</Col>
|
||||
<Col className='col-2' style={{ width: "80%", height: "100%", overflowY: "hidden" }}>
|
||||
<Col id="movementHistogramContainer" className='col-2'>
|
||||
{movementAttr.map((value) =>
|
||||
<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 className="histogramContainer" key={value + "movHistogram"}>
|
||||
{<Histogram data={rawMovementData} derivedData={derivedData} attr={value}
|
||||
id={"histogram_" + value} color={["#4292c6", "#c6dbef"]} timeframe={timeslotValue} />}
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
@@ -523,31 +540,31 @@ function IndividualPanel() {
|
||||
</Row>
|
||||
}
|
||||
{rawAcousticData && rawAcousticData.length > 0 &&
|
||||
<Row id="voiceAcousticsContainer" style={{ height: "48%", overflowY: "scroll", backgroundColor: "#f7f4f9", marginTop: "30px" }}>
|
||||
<Row id="voiceAcousticsContainer">
|
||||
<div style={{ display: "flex" }}>
|
||||
<Col className='col-2' style={{ fontSize: "0.8rem", width: "max-content" }}>
|
||||
<Col className='col-2' id="acousticsContainer">
|
||||
{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 >
|
||||
<div id="acousticsQueryButtonContainer">
|
||||
<button type="button" className='btn btn-sm btn-outline-primary' onClick={() => handleUpdate("acoustics")}>Update</button>
|
||||
<button type="button" className="btn-close" aria-label="Close" 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", }}>
|
||||
<Col className='col-2' id="acousticsHistogramContainer">
|
||||
{acousticAttr.map((value) =>
|
||||
<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 className="histogramContainer" key={value + "acoHistogram"}>
|
||||
{<Histogram data={rawAcousticData} derivedData={derivedData} attr={value}
|
||||
id={"histogram_" + value} color={["#807dba", "#dadaeb"]} timeframe={timeslotValue} />}
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
</div>
|
||||
</Row>
|
||||
}
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
import DBMDict from "../DBM_attribute_dict.json"
|
||||
import "./cohortPanel.css"
|
||||
|
||||
const QueryPanel = ({ allAcousticArg, allMovementArg, allSpeechArg, allFacialArg, checkedState, handleCheckboxChange, idVal }) => {
|
||||
return (
|
||||
<div>
|
||||
{allFacialArg.length > 0 && <h6 style={{ marginTop: "10px", fontWeight: "bolder" }}>Facial</h6>}
|
||||
<div className="queryPanel">
|
||||
{allFacialArg.length > 0 && <h6>Facial</h6>}
|
||||
{allFacialArg.length > 0 && allFacialArg.map((value, index) =>
|
||||
<div key= {idVal + value+"key"}><label className="">
|
||||
<div key={idVal + value + "key"}><label className="">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={idVal + value}
|
||||
|
||||
|
||||
checked={checkedState[index]}
|
||||
className={idVal}
|
||||
onChange={() => handleCheckboxChange(index)}
|
||||
@@ -18,13 +19,13 @@ const QueryPanel = ({ allAcousticArg, allMovementArg, allSpeechArg, allFacialArg
|
||||
</label></div>
|
||||
)
|
||||
}
|
||||
{allMovementArg.length > 0 && <h6 style={{ marginBotom: "10px", fontWeight: "bolder" }}>Movement</h6>}
|
||||
{allMovementArg.length > 0 && <h6>Movement</h6>}
|
||||
{allMovementArg.length > 0 && allMovementArg.map((value, index) =>
|
||||
<div key={idVal + value+"key"}><label className="">
|
||||
<div key={idVal + value + "key"}><label className="">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={idVal + value}
|
||||
|
||||
|
||||
checked={checkedState[index + allFacialArg.length]}
|
||||
className={idVal}
|
||||
onChange={() => handleCheckboxChange(index + allFacialArg.length)}
|
||||
@@ -33,13 +34,13 @@ const QueryPanel = ({ allAcousticArg, allMovementArg, allSpeechArg, allFacialArg
|
||||
</label></div>
|
||||
)
|
||||
}
|
||||
{allAcousticArg.length > 0 && <h6 style={{ marginBotom: "10px", fontWeight: "bolder" }}>Acoustics</h6>}
|
||||
{allAcousticArg.length > 0 && <h6>Acoustics</h6>}
|
||||
{allAcousticArg.length > 0 && allAcousticArg.map((value, index) =>
|
||||
<div key={idVal + value+"key"}><label className="">
|
||||
<div key={idVal + value + "key"}><label className="">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={idVal + value}
|
||||
|
||||
|
||||
checked={checkedState[index + allFacialArg.length + allMovementArg.length]}
|
||||
className={idVal}
|
||||
onChange={() => handleCheckboxChange(index + allFacialArg.length + allMovementArg.length)}
|
||||
@@ -48,13 +49,13 @@ const QueryPanel = ({ allAcousticArg, allMovementArg, allSpeechArg, allFacialArg
|
||||
</label></div>
|
||||
)
|
||||
}
|
||||
{allSpeechArg.length > 0 && <h6 style={{ fontWeight: "bolder" }}>Speech</h6>}
|
||||
{allSpeechArg.length > 0 && <h6>Speech</h6>}
|
||||
{allSpeechArg.map((value, index) =>
|
||||
<div key={idVal + value+"key"}><label className="">
|
||||
<div key={idVal + value + "key"}><label className="">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={idVal + value}
|
||||
|
||||
|
||||
checked={checkedState[index + allFacialArg.length + allAcousticArg.length + allMovementArg.length]}
|
||||
className={idVal}
|
||||
onChange={() => handleCheckboxChange(index + allFacialArg.length + allAcousticArg.length + allMovementArg.length)}
|
||||
|
||||
@@ -3,7 +3,7 @@ import $ from "jquery";
|
||||
import "../index.css"
|
||||
|
||||
export default class ScatterplotD3 {
|
||||
constructor(chart, data, filteredIds, metadata,hideIds,metadataAttrColor) {
|
||||
constructor(chart, data, filteredIds, metadata, hideIds, metadataAttrColor) {
|
||||
|
||||
if (data) {
|
||||
if (!d3.select(chart).select('svg').empty()) {
|
||||
@@ -69,7 +69,7 @@ export default class ScatterplotD3 {
|
||||
.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("opacity", d => filteredIds.includes(d['id']) ? "0.4": hideIds ? "0" : "0.4")
|
||||
.style("opacity", d => filteredIds.includes(d['id']) ? "0.4" : hideIds ? "0" : "0.4")
|
||||
.attr("stroke", "grey")
|
||||
.attr("stroke-width", '1.5px')
|
||||
|
||||
@@ -99,7 +99,7 @@ export default class ScatterplotD3 {
|
||||
if ($('#' + k + "_id").is(":checked"))
|
||||
$(".dot_" + k).css("fill", "red")
|
||||
})
|
||||
if($('#metadataButton').hasClass("btn-outline-primary")){
|
||||
if ($('#metadataButton').hasClass("btn-outline-primary")) {
|
||||
}
|
||||
svg.property("value", value).dispatch("input");
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from 'react';
|
||||
import { ComponentToPrint } from './componentToPrint';
|
||||
import { exportComponentAsJPEG } from 'react-component-export-image';
|
||||
import ScatterplotD3 from './scatterplot.d3';
|
||||
import "./cohortPanel.css"
|
||||
|
||||
const Scatterplot = ({ data, filteredIds, metadata, hideIds, metadataAttrColor }) => {
|
||||
const ref = useRef(null)
|
||||
@@ -15,9 +16,9 @@ const Scatterplot = ({ data, filteredIds, metadata, hideIds, metadataAttrColor }
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<h6 style={{ fontWeight: "bolder" }}>PCA</h6>
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm' onClick={() => exportComponentAsJPEG(ref)} style={{ width: "max-content", }}>
|
||||
<div id="scatterplotComponent">
|
||||
<h6>PCA</h6>
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm printButton' onClick={() => exportComponentAsJPEG(ref)} >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-printer" viewBox="0 0 16 16">
|
||||
<path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
|
||||
<path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2
|
||||
|
||||
@@ -84,16 +84,16 @@ export default class SpiderChartD3 {
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("x", () => {
|
||||
var rez = width / 2 * (1 - Math.sin(i * radians / totalAxes))
|
||||
if (rez < width/2.2) return rez +10
|
||||
if (rez < width / 2.2) return rez + 10
|
||||
else return rez - 10
|
||||
})
|
||||
})
|
||||
.attr("y", () => {
|
||||
var rez = height / 2 * (1 - Math.cos(i * radians / totalAxes))
|
||||
if (rez < height/2.2) return rez +5
|
||||
if (rez < height / 2.2) return rez + 5
|
||||
else return rez - 5
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
.attr("font-size", "0.6rem");
|
||||
})
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from 'react';
|
||||
import { ComponentToPrint } from './componentToPrint';
|
||||
import { exportComponentAsJPEG } from 'react-component-export-image';
|
||||
import SpiderChartD3 from './spiderChart.d3';
|
||||
import "./individualPanel.css"
|
||||
|
||||
const SpiderChart = ({ derivedData, timelineData, timeframe, levels, axes, label }) => {
|
||||
const ref = useRef(null)
|
||||
@@ -15,9 +16,9 @@ const SpiderChart = ({ derivedData, timelineData, timeframe, levels, axes, label
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<div style={{fontSize:"0.8rem"}}>{label}</div>
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm' onClick={() => exportComponentAsJPEG(ref)} style={{ width: "max-content", }}>
|
||||
<div className="spiderChartComponent">
|
||||
<div className="spiderChartLabel">{label}</div>
|
||||
<button type="button" className='btn btn-outline-secondary btn-sm printButton' onClick={() => exportComponentAsJPEG(ref)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-printer" viewBox="0 0 16 16">
|
||||
<path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
|
||||
<path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2
|
||||
|
||||
Reference in New Issue
Block a user