Spaces:
Build error
Build error
File size: 4,213 Bytes
d61b9c7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
import React from "react";
import styles from "../App.module.css";
import cx from "../utils/cx";
import Feature from "./Feature";
import Spinner from "./Spinner";
import LabelButton from "./LabelButton";
import Contributions from "./Contributions";
import { VisualizationOutput } from "../models/visualizationOutput";
interface VisualizationProps {
data: VisualizationOutput;
instance: number;
onTargetClick: (
labelIndex: number,
inputIndex: number,
modelIndex: number,
callback: () => void
) => void;
}
interface VisualizationState {
loading: boolean;
}
class Visualization extends React.Component<
VisualizationProps,
VisualizationState
> {
constructor(props: VisualizationProps) {
super(props);
this.state = {
loading: false,
};
}
onTargetClick = (
labelIndex: number,
inputIndex: number,
modelIndex: number
) => {
this.setState({ loading: true });
this.props.onTargetClick(labelIndex, inputIndex, modelIndex, () =>
this.setState({ loading: false })
);
};
//TODO: Refactor the visualization table as a <table> instead of columns, in order to have cleaner styling
render() {
const data = this.props.data;
const isFirstInGroup = this.props.data.model_index === 0;
const features = data.feature_outputs.map((f) => (
<Feature data={f} hideHeaders={isFirstInGroup} />
));
return (
<>
{this.state.loading && (
<div className={styles.loading}>
<Spinner />
</div>
)}
{!isFirstInGroup && <div className={styles["model-separator"]} />}
<div className={styles["visualization-container"]}>
<div className={styles["panel__column"]}>
{isFirstInGroup && (
<div className={styles["panel__column__title"]}>Predicted</div>
)}
<div className={styles["panel__column__body"]}>
<div className={styles["model-number"]}>
Model {data.model_index + 1}
</div>
{data.predicted.map((p) => (
<div className={cx([styles.row, styles["row--padding"]])}>
<LabelButton
onTargetClick={this.onTargetClick}
labelIndex={p.index}
inputIndex={this.props.instance}
modelIndex={this.props.data.model_index}
active={p.index === data.active_index}
>
{p.label} ({p.score.toFixed(3)})
</LabelButton>
</div>
))}
</div>
</div>
<div className={styles["panel__column"]}>
{isFirstInGroup && (
<div className={styles["panel__column__title"]}>Label</div>
)}
<div className={styles["panel__column__body"]}>
<div className={styles["model-number-spacer"]} />
<div className={cx([styles.row, styles["row--padding"]])}>
<LabelButton
onTargetClick={this.onTargetClick}
labelIndex={data.actual.index}
inputIndex={this.props.instance}
modelIndex={this.props.data.model_index}
active={data.actual.index === data.active_index}
>
{data.actual.label}
</LabelButton>
</div>
</div>
</div>
<div className={styles["panel__column"]}>
{isFirstInGroup && (
<div className={styles["panel__column__title"]}>Contribution</div>
)}
<div className={styles["panel__column__body"]}>
<div className={styles["model-number-spacer"]} />
<div className={styles["bar-chart"]}>
<Contributions feature_outputs={data.feature_outputs} />
</div>
</div>
</div>
<div
className={cx([
styles["panel__column"],
styles["panel__column--stretch"],
])}
>
{features}
</div>
</div>
</>
);
}
}
export default Visualization;
|