[UI] Fix large file and png preview issues in the object viewer (#4569)

* Fix large file and png preview issues
* Add renderers for PNG and JPEG files, so they are viewable in the UI directly

webui/src/lib/api/index.js

@@ -632,8 +632,11 @@ class Objects {
             throw new Error(await extractError(response));
         }
 
+        const responseBlob = await response.blob();
+        const responseText = await responseBlob.text();
         return {
-            responseText: await response.text(),
+            responseText,
+            responseBlob,
             headers: response.headers,
         }
     }

webui/src/lib/components/repository/tree.jsx

@@ -25,6 +25,7 @@ import {Paginator} from "../pagination";
 import {Link} from "../nav";
 import {RefTypeBranch, RefTypeCommit} from "../../../constants";
 
+const PREVIEW_SIZE_LIMIT = 4194304; // 4MB in bytes
 
 export const humanSize = (bytes) => {
     if (!bytes) return '0.0 B';
@@ -115,6 +116,10 @@ const EntryRow = ({repo, reference, path, entry, onDelete, showActions}) => {
             ref: query.ref,
         };
 
+        if (entry.size_bytes > PREVIEW_SIZE_LIMIT) {
+            filePathQuery["big"] = true;
+        }
+
         button = (<Link href={{pathname: '/repositories/:repoId/objects/:objectName', query: filePathQuery, params: filePathParams}}>{buttonText}</Link>);
     }
 
@@ -270,7 +275,7 @@ export const URINavigator = ({ repo, reference, path, relativeTo = "", pathURLBu
                             <Link href={pathURLBuilder(params, query)}>{part.name}</Link>
                             <strong>{'/'}</strong>
                         </>
-                    )
+                    );
                 return (
                     <span key={part.name}>
                         {edgeElement}

webui/src/pages/repositories/repository/fileRenderers/index.tsx

@@ -0,0 +1,73 @@
+import React, { FC, useEffect } from "react";
+import remarkGfm from 'remark-gfm'
+import remarkHtml from 'remark-html'
+import ReactMarkdown from 'react-markdown';
+import { IpynbRenderer as NbRenderer } from "react-ipynb-renderer";
+
+type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
+}[Keys];
+
+interface RendererComponentBase {
+    content: string;
+    contentBlob: Blob;
+}
+
+export type RendererComponent = RequireAtLeastOne<RendererComponentBase, 'content' | 'contentBlob'>;
+
+export const MarkdownRenderer: FC<RendererComponent> = ({ content }) => {
+    if (content) {
+        return (
+            <ReactMarkdown remarkPlugins={[remarkGfm, remarkHtml]} linkTarget={"_blank"}>
+                {content}
+            </ReactMarkdown>
+        );
+    }
+    return null;
+};
+
+export const IpynbRenderer: FC<RendererComponent> = ({ content }) => {
+    if (content) {
+        return (
+            <NbRenderer
+                ipynb={JSON.parse(content)}
+                syntaxTheme="ghcolors"
+                language="python"
+                bgTransparent={true}
+            />
+        );
+    }
+    return null;
+};
+
+export const ImageRenderer: FC<RendererComponent> = ({ contentBlob }) => {
+    let blobUrl: string;
+    useEffect(() => () => {
+        if (blobUrl) {
+            URL.revokeObjectURL(blobUrl);
+        }
+    }, []);
+
+    if (contentBlob) {
+        blobUrl = URL.createObjectURL(contentBlob)
+        return (
+            <img src={blobUrl} />
+        );
+    }
+    return null;
+}
+
+export const supportedFileExtensionRenderers: Record<string, FC<RendererComponent>> = {
+    md: MarkdownRenderer,
+    ipynb: IpynbRenderer,
+    png: ImageRenderer,
+    jpg: ImageRenderer,
+    jpeg: ImageRenderer,
+};
+
+export const supportedContentTypeRenderers: Record<string, FC<RendererComponent>> = {
+    "application/x-ipynb+json": IpynbRenderer,
+    "text/markdown":MarkdownRenderer,
+    "image/png": ImageRenderer,
+    "image/jpeg": ImageRenderer,
+};