diff --git a/package-lock.json b/package-lock.json
index 8d7e840..5b4f977 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
"@tanstack/react-query": "^5.59.20",
"@types/d3-fetch": "^3.0.7",
"@types/mdx": "^2.0.13",
+ "@uiw/react-json-view": "^2.0.0-alpha.30",
"d3-fetch": "^3.0.1",
"framer-motion": "^11.11.11",
"lodash": "^4.17.21",
@@ -2781,6 +2782,20 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
+ "node_modules/@uiw/react-json-view": {
+ "version": "2.0.0-alpha.30",
+ "resolved": "https://registry.npmjs.org/@uiw/react-json-view/-/react-json-view-2.0.0-alpha.30.tgz",
+ "integrity": "sha512-ufvvirUQcITU9s4R12b7hn/t7ngLCYp1KbBxE+eAD35o3Ey+uxfKvgWmIwGFhV3hFXXxMJ8SHQKwl/ywNCHsDA==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://jaywcjlove.github.io/#/sponsor"
+ },
+ "peerDependencies": {
+ "@babel/runtime": ">=7.10.0",
+ "react": ">=18.0.0",
+ "react-dom": ">=18.0.0"
+ }
+ },
"node_modules/@ungap/structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
diff --git a/package.json b/package.json
index 6547d96..d91b0cf 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"@tanstack/react-query": "^5.59.20",
"@types/d3-fetch": "^3.0.7",
"@types/mdx": "^2.0.13",
+ "@uiw/react-json-view": "^2.0.0-alpha.30",
"d3-fetch": "^3.0.1",
"framer-motion": "^11.11.11",
"lodash": "^4.17.21",
diff --git a/src/components/Fields/GlobusEmbedField.tsx b/src/components/Fields/GlobusEmbedField.tsx
index fdbe1c9..2a5c8d8 100644
--- a/src/components/Fields/GlobusEmbedField.tsx
+++ b/src/components/Fields/GlobusEmbedField.tsx
@@ -1,5 +1,9 @@
import React, { PropsWithChildren } from "react";
import {
+ Accordion,
+ AccordionButton,
+ AccordionItem,
+ AccordionPanel,
Alert,
AlertDescription,
AlertIcon,
@@ -10,6 +14,7 @@ import {
Code,
Flex,
HStack,
+ Spacer,
Spinner,
Text,
} from "@chakra-ui/react";
@@ -23,6 +28,7 @@ import { useLogin } from "@/hooks/useOAuth";
import { PlotlyRenderer } from "./Renderer/Plotly";
import { ObjectRenderer } from "./Renderer/Object";
import { useGCSAsset, useGCSAssetMetadata } from "@/hooks/useGlobusAPI";
+import { JSONTree } from "../JSONTree";
type Renderers = "plotly" | "editor" | undefined;
@@ -207,11 +213,13 @@ function GlobusEmbed({ config, field }: GlobusEmbedProps) {
Authentication Required
- To view this asset, you must{" "}
-
- .
+
+ In order to view this embedded resource, you must{" "}
+
+ .
+
)}
@@ -260,6 +268,19 @@ function EmbedError({ error }: { error: unknown }) {
const pathname = usePathname();
const search = useSearchParams();
let handler;
+ /**
+ * Attempt to extract a `message` from the error.
+ */
+ const message =
+ error &&
+ typeof error === "object" &&
+ "message" in error &&
+ typeof error.message === "string"
+ ? error.message
+ : "An error occurred.";
+
+ let description = {message};
+
if (isAuthorizationRequirementsError(error)) {
const requiredScopes = error.authorization_parameters?.required_scopes;
handler = async () => {
@@ -274,28 +295,46 @@ function EmbedError({ error }: { error: unknown }) {
},
});
};
+
+ description = (
+ <>
+
+ Your current session does not meet the requirements to view this
+ resource – you must{" "}
+
+ .
+
+ >
+ );
}
- /**
- * Attempt to extract a `message` from the error.
- */
- const message =
- error &&
- typeof error === "object" &&
- "message" in error &&
- typeof error.message === "string"
- ? error.message
- : "An error occurred.";
return (
-
-
- {message}
-
- {handler && (
-
- )}
-
+
+
+
+ Unable to render resource.
+
+ {description}
+ {typeof error === "object" && error && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
);
}
diff --git a/src/components/JSONTree.tsx b/src/components/JSONTree.tsx
index 5f1f776..16b429d 100644
--- a/src/components/JSONTree.tsx
+++ b/src/components/JSONTree.tsx
@@ -1,12 +1,11 @@
import React from "react";
-
+import JsonView from "@uiw/react-json-view";
import { Code } from "@chakra-ui/react";
-/**
- * @todo
- */
export const JSONTree = ({ data }: { data: unknown }) => {
- return (
+ return typeof data === "object" && data !== null ? (
+
+ ) : (
{JSON.stringify(data, null, 2)}