Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor tooltips for 3d #2024

Merged
merged 5 commits into from
Aug 26, 2022
Merged

refactor tooltips for 3d #2024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2d02df1
refactor tooltips for 3d
ritch Aug 24, 2022
5819cc1
add missing json icon
ritch Aug 24, 2022
5de471c
use mouse instead of pointer
ritch Aug 25, 2022
1cf8679
remove console log
ritch Aug 25, 2022
6140aa5
fix json panel opacity
ritch Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
320 changes: 9 additions & 311 deletions app/packages/app/src/components/Modal/Looker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,316 +18,8 @@ import { useErrorHandler } from "react-error-boundary";
import { useTheme } from "@fiftyone/components";
import * as fos from "@fiftyone/state";
import { useOnSelectLabel } from "@fiftyone/state";

const TagBlock = styled.div`
margin: 0;
`;

const BorderDiv = styled.div`
border-top: 2px solid ${({ theme }) => theme.font};
width: 100%;
padding: 0.5rem 0 0;
`;

const AttrBlock = styled.div`
padding: 0.1rem 0 0 0;
margin: 0;
`;

const TooltipDiv = animated(styled(ContentDiv)`
position: absolute;
margin-top: 0;
left: -1000;
top: -1000;
z-index: 20000;
pointer-events: none;
`);

type placement = number | "unset";

const computeCoordinates = ([x, y]: [number, number]): {
bottom?: placement;
top?: placement;
left?: placement;
right?: placement;
} => {
let top: placement = y,
bottom: placement = "unset";
if (y > window.innerHeight / 2) {
bottom = window.innerHeight - y;
top = "unset";
}

return {
bottom,
top,
left: x <= window.innerWidth / 2 ? x + 24 : "unset",
right: x > window.innerWidth / 2 ? window.innerWidth - x + 24 : "unset",
};
};

const ContentItemDiv = styled.div`
margin: 0;
padding: 0;
max-width: 10rem;
word-wrap: break-word;
`;

const ContentValue = styled.div`
font-size: 0.8rem;
font-weight: bold;
color: ${({ theme }) => theme.font};
`;

const ContentName = styled.div`
font-size: 0.7rem;
font-weight: bold;
padding-bottom: 0.3rem;
color: ${({ theme }) => theme.fontDark};
`;

const ContentItem = ({
name,
value,
style,
}: {
name: string;
value?: number | string;
style?: object;
}) => {
if (typeof value === "object") {
return null;
}

return (
<ContentItemDiv style={style}>
<ContentValue>
{(() => {
switch (typeof value) {
case "number":
return Number.isInteger(value) ? value : value.toFixed(3);
case "string":
return value.length ? value : '""';
case "boolean":
return value ? "True" : "False";
default:
return "None";
}
})()}
</ContentValue>
<ContentName>{name}</ContentName>
</ContentItemDiv>
);
};

const useTarget = (field, target) => {
const getTarget = useRecoilValue(fos.getTarget);
return getTarget(field, target);
};

const AttrInfo = ({ label, children = null }) => {
let entries = Object.entries(label).filter(
([k, v]) => "tags" !== k && !k.startsWith("_")
);
if (!entries || !entries.length) {
return null;
}

const defaults = entries.filter(([name]) =>
["label", "confidence"].includes(name)
);

const other = entries.filter(
([name]) => !["label", "confidence"].includes(name)
);
const mapper = ([name, value]) => (
<ContentItem key={name} name={name} value={value} />
);

const attributes =
typeof label.attributes === "object"
? Object.entries(
label.attributes as { [key: string]: { value: string | number } }
).map<[string, string | number]>(([k, v]) => [
"attributes." + k,
v.value,
])
: null;

return (
<>
{defaults.map(mapper)}
{children}
{other.map(mapper)}
{attributes && attributes.map(mapper)}
</>
);
};

const ClassificationInfo = ({ detail }) => {
return (
<AttrBlock style={{ borderColor: detail.color }}>
<AttrInfo label={detail.label} />
</AttrBlock>
);
};

const DetectionInfo = ({ detail }) => {
return (
<AttrBlock style={{ borderColor: detail.color }}>
<AttrInfo label={detail.label} />
</AttrBlock>
);
};

const HeatmapInfo = ({ detail }) => {
return (
<AttrBlock style={{ borderColor: detail.color }}>
<ContentItem key={"pixel-value"} name={"pixel"} value={detail.target} />
<AttrInfo label={detail.label} />
</AttrBlock>
);
};

const KeypointInfo = ({ detail }) => {
return (
<AttrBlock style={{ borderColor: detail.color }}>
<AttrInfo label={detail.label} />
{detail.point && (
<AttrInfo
label={Object.fromEntries(
detail.point.attributes.map(([k, v]) => [
`points[${detail.point.index}].${k}`,
v,
])
)}
/>
)}
</AttrBlock>
);
};

const RegressionInfo = ({ detail }) => {
return (
<AttrBlock style={{ borderColor: detail.color }}>
<AttrInfo label={detail.label} />
</AttrBlock>
);
};

const SegmentationInfo = ({ detail }) => {
const targetValue = useTarget(detail.field, detail.target);

return (
<AttrBlock style={{ borderColor: detail.color }}>
{targetValue ? (
<ContentItem key={"target-value"} name={"label"} value={targetValue} />
) : (
<ContentItem key={"pixel-value"} name={"pixel"} value={detail.target} />
)}
<AttrInfo label={detail.label} />
</AttrBlock>
);
};

const PolylineInfo = ({ detail }) => {
return (
<AttrBlock style={{ borderColor: detail.color }}>
<AttrInfo label={detail.label} />
</AttrBlock>
);
};

const Border = ({ color, id }) => {
const selectedLabels = useRecoilValue(fos.selectedLabelIds);
return (
<BorderDiv
style={{
borderTop: `2px ${
selectedLabels.has(id) ? "dashed" : "solid"
} ${color}`,
}}
/>
);
};

const OVERLAY_INFO = {
Classification: ClassificationInfo,
Detection: DetectionInfo,
Heatmap: HeatmapInfo,
Keypoint: KeypointInfo,
Polyline: PolylineInfo,
Regression: RegressionInfo,
Segmentation: SegmentationInfo,
};

const TagInfo = ({ tags }: { tags: string[] }) => {
if (!tags) {
return null;
}
return (
<TagBlock>
<ContentItem
key={"tags"}
name={"tags"}
value={tags.length ? tags.join(", ") : "No tags"}
style={{ maxWidth: "20rem" }}
/>
</TagBlock>
);
};

const TooltipInfo = React.memo(({ looker }: { looker: any }) => {
const [detail, setDetail] = useState(null);
const [coords, setCoords] = useState<{
top?: placement;
bottom?: placement;
left?: placement;
}>({
top: -1000,
left: -1000,
bottom: "unset",
});
const position = detail
? coords
: { top: -1000, left: -1000, bottom: "unset" };

const coordsProps = useSpring({
...position,
config: {
duration: 0,
},
});
const ref = useRef<HTMLDivElement>(null);

useEventHandler(looker, "tooltip", (e) => {
setDetail(e.detail ? e.detail : null);
e.detail && setCoords(computeCoordinates(e.detail.coordinates));
});

const showProps = useSpring({
display: detail ? "block" : "none",
opacity: detail ? 1 : 0,
});
const Component = detail ? OVERLAY_INFO[detail.type] : null;

return Component
? ReactDOM.createPortal(
<TooltipDiv
style={{ ...coordsProps, ...showProps, position: "fixed" }}
ref={ref}
>
<ContentHeader key="header">{detail.field}</ContentHeader>
<Border color={detail.color} id={detail.label.id} />
{detail.label.tags && detail.label.tags.length > 0 && (
<TagInfo key={"tags"} tags={detail.label?.tags} />
)}
<Component key={"attrs"} detail={detail} />
</TooltipDiv>,
document.body
)
: null;
});
import { TooltipInfo } from "./TooltipInfo";
import { Tooltip } from "@material-ui/core";

type EventCallback = (event: CustomEvent) => void;

Expand Down Expand Up @@ -439,6 +131,12 @@ const Looker = ({ lookerRef, onClose, onNext, onPrevious }: LookerProps) => {

useEventHandler(looker, "clear", useClearSelectedLabels());

const tooltip = fos.useTooltip();
useEventHandler(looker, "tooltip", (e) => {
tooltip.setDetail(e.detail ? e.detail : null);
e.detail && tooltip.setCoords(e.detail.coordinates);
});

return (
<div
id={id}
Expand All @@ -449,7 +147,7 @@ const Looker = ({ lookerRef, onClose, onNext, onPrevious }: LookerProps) => {
position: "relative",
}}
>
{<TooltipInfo looker={looker} />}
<TooltipInfo coordinates={tooltip.coordinates} />
</div>
);
};
Expand Down
Loading