common json panel for 2d/3d lookers

app/packages/app/src/components/Modal/Group.module.css

@@ -35,3 +35,12 @@
 .groupSampleActive {
   border-bottom: 3px solid var(--brand);
 }
+
+.lookerPanelOverlayContainer {
+  display: none;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  border: solid 1px red;
+  z-index: 10001;
+}

app/packages/app/src/components/Modal/Looker.tsx

@@ -418,6 +418,16 @@ const Looker = ({ lookerRef, onClose, onNext, onPrevious }: LookerProps) => {
   onClose && useEventHandler(looker, "close", onClose);
   useEventHandler(looker, "select", useOnSelectLabel());
   useEventHandler(looker, "error", (event) => handleError(event.detail));
+  const jsonPanel = fos.useJSONPanel();
+  useEventHandler(looker, "options", ({ detail }) => {
+    const { showJSON } = detail || {};
+    if (showJSON === true) {
+      jsonPanel.open(sample);
+    }
+    if (showJSON === false) {
+      jsonPanel.close();
+    }
+  });
 
   useEffect(() => {
     initialRef.current = false;

app/packages/app/src/components/Modal/Modal.tsx

@@ -1,14 +1,16 @@
 import * as fos from "@fiftyone/state";
 import { Controller } from "@react-spring/core";
 import _ from "lodash";
-import React, { useCallback, useRef } from "react";
+import React, { Fragment, useCallback, useRef } from "react";
 import ReactDOM from "react-dom";
 import styled from "styled-components";
 import { useRecoilValue } from "recoil";
 
 import Sidebar, { Entries } from "../Sidebar";
 import Group from "./Group";
 import Sample from "./Sample";
+import { lookerPanelOverlayContainer } from "./Group.module.css";
+import { JSONPanel } from "@fiftyone/components";
 
 const ModalWrapper = styled.div`
   position: fixed;
@@ -182,18 +184,29 @@ const SampleModal = () => {
     : { width: "95%", height: "90%", borderRadius: "3px" };
   const wrapperRef = useRef<HTMLDivElement>(null);
   const isGroup = useRecoilValue(fos.isGroup);
+  const jsonPanel = fos.useJSONPanel();
 
   return ReactDOM.createPortal(
-    <ModalWrapper
-      ref={wrapperRef}
-      onClick={(event) => event.target === wrapperRef.current && clearModal()}
-    >
-      <Container style={{ ...screen, zIndex: 10001 }}>
-        <ContentColumn>{isGroup ? <Group /> : <Sample />}</ContentColumn>
-
-        <Sidebar render={renderEntry} modal={true} />
-      </Container>
-    </ModalWrapper>,
+    <Fragment>
+      <ModalWrapper
+        ref={wrapperRef}
+        onClick={(event) => event.target === wrapperRef.current && clearModal()}
+      >
+        <Container style={{ ...screen, zIndex: 10001 }}>
+          <ContentColumn>
+            {isGroup ? <Group /> : <Sample />}
+            {jsonPanel.isOpen && (
+              <JSONPanel
+                jsonHTML={jsonPanel.jsonHTML}
+                onClose={() => jsonPanel.close()}
+                onCopy={() => jsonPanel.copy()}
+              />
+            )}
+          </ContentColumn>
+          <Sidebar render={renderEntry} modal={true} />
+        </Container>
+      </ModalWrapper>
+    </Fragment>,
     document.getElementById("modal") as HTMLDivElement
   );
 };

app/packages/components/src/components/JSONPanel/JSONPanel.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright 2017-2022, Voxel51, Inc.
+ */
+import {
+  lookerPanel,
+  lookerPanelContainer,
+  lookerPanelVerticalContainer,
+  lookerPanelClose,
+} from "./panel.module.css";
+import {
+  lookerCopyJSON,
+  lookerCloseJSON,
+  lookerJSONPanel,
+} from "./json.module.css";
+import closeIcon from "../../icons/close.svg";
+import clipboardIcon from "../../icons/clipboard.svg";
+
+function Close({ onClick }) {
+  return (
+    <img
+      src={closeIcon}
+      className={lookerCloseJSON}
+      title="Close JSON"
+      onClick={onClick}
+    />
+  );
+}
+
+function Copy({ onClick }) {
+  return (
+    <img
+      src={clipboardIcon}
+      className={lookerCopyJSON}
+      title="Copy JSON to clipboard"
+      onClick={onClick}
+    />
+  );
+}
+
+export default function JSONPanel({ jsonHTML, onClose, onCopy }) {
+  return (
+    <div className={`${lookerJSONPanel} ${lookerPanelContainer}`}>
+      <div className={lookerPanelVerticalContainer}>
+        <div className={lookerPanel} onClick={(e) => e.stopPropagation()}>
+          {jsonHTML && <pre dangerouslySetInnerHTML={jsonHTML} />}
+        </div>
+        <Close onClick={onClose} />
+        <Copy onClick={onCopy} />
+      </div>
+    </div>
+  );
+}

app/packages/components/src/components/JSONPanel/index.ts

@@ -0,0 +1 @@
+export { default } from "./JSONPanel";

app/packages/components/src/components/JSONPanel/json.module.css

@@ -0,0 +1,41 @@
+/**
+ * Copyright 2017-2022, Voxel51, Inc.
+ */
+
+.lookerJSONPanel {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.lookerJSONPanel pre {
+  font-weight: normal;
+}
+
+.lookerCloseJSON {
+  right: 0;
+}
+
+.lookerCopyJSON {
+  right: 30px;
+}
+
+.lookerCopyJSON,
+.lookerCloseJSON {
+  margin: 3px;
+  border-radius: 3px;
+  cursor: pointer;
+  pointer-events: all;
+  position: absolute;
+  top: 0;
+  -webkit-transition: 0.2s ease-in-out;
+  -moz-transition: 0.2s ease-in-out;
+  -o-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.lookerCloseJSON:hover,
+.lookerCopyJSON:hover {
+  background-color: rgb(225, 100, 40);
+  transform: translate(0, -1px);
+}

app/packages/components/src/components/JSONPanel/panel.module.css

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2017-2022, Voxel51, Inc.
+ */
+
+.lookerPanel {
+  padding: 1rem;
+  line-height: 1;
+  font-weight: bold;
+  color: #eee;
+  background-color: hsl(210, 11%, 11%);
+  border: 1px solid #191c1f;
+  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.43);
+  border-radius: 3px;
+  overflow: auto;
+  scrollbar-width: none;
+  position: relative;
+  pointer-events: all;
+}
+
+.lookerPanel::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+  display: none;
+}
+.lookerPanel::-webkit-scrollbar-thumb {
+  width: 0px;
+  display: none;
+}
+
+.lookerPanelContainer {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  overflow: hidden;
+  z-index: 10000;
+  pointer-events: none;
+}
+
+.lookerPanelVerticalContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  margin: 3.5rem;
+}
+
+.lookerPanelHeader {
+  font-size: 18px;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid rgb(225, 100, 40);
+}
+
+.lookerPanelClose {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  margin: 3px;
+  border-radius: 3px;
+
+  -webkit-transition: 0.2s ease-in-out;
+  -moz-transition: 0.2s ease-in-out;
+  -o-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.lookerPanelClose:hover {
+  background-color: rgb(225, 100, 40);
+  transform: translate(0, -1px);
+}
+
+.lookerPanelFlex {
+  display: flex;
+  max-height: 100%;
+  flex-direction: column;
+}

app/packages/components/src/components/index.ts

@@ -3,6 +3,7 @@ export { default as Button } from "./Button";
 export { default as ErrorBoundary } from "./ErrorBoundary";
 export { default as Header } from "./Header";
 export * from "./Icons";
+export { default as JSONPanel } from "./JSONPanel";
 export { default as Link } from "./Link";
 export { default as Loading } from "./Loading";
 export { default as PopoutSectionTitle } from "./PopoutSectionTitle";

app/packages/components/src/index.ts

@@ -1,3 +1,7 @@
 export * from "./components";
 
 export { scrollable } from "./scrollable.module.css";
+
+import jsonIcon from "./icons/json.svg";
+
+export { jsonIcon };