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)}