WebUI: Support custom-object-renderers plugin

webui/src/extendable/plugins/impls/DefaultCustomObjectRenderers.tsx

@@ -0,0 +1,11 @@
+import { PluginCustomObjectRenderers } from "../pluginCustomObjectRenderers";
+
+const DefaultCustomObjectRenderersPlugin: PluginCustomObjectRenderers = {
+    init: () => {
+    },
+    get: () => {
+        return null;
+    }
+}
+
+export default DefaultCustomObjectRenderersPlugin;

webui/src/extendable/plugins/pluginCustomObjectRenderers.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { RendererComponent } from "../../pages/repositories/repository/fileRenderers/types";
+import { ConfigType } from "../../lib/hooks/configProvider";
+
+export interface PluginCustomObjectRenderers {
+    init: (config?: ConfigType) => void;
+    get: (contentType?: string, fileExtension?: string) => React.FC<RendererComponent> | null;
+}

webui/src/extendable/plugins/pluginManager.ts

@@ -1,14 +1,25 @@
 import { PluginRepoCreationForm } from "./pluginRepoCreationForm";
 import DefaultRepoCreationFormPlugin from "./impls/DefaultRepoCreationFormPlugin";
+import { PluginCustomObjectRenderers } from "./pluginCustomObjectRenderers";
+import DefaultCustomObjectRenderersPlugin from "./impls/DefaultCustomObjectRenderers";
 
 export class PluginManager {
     private _repoCreationForm: PluginRepoCreationForm = DefaultRepoCreationFormPlugin;
+    private _customObjectRenderers: PluginCustomObjectRenderers = DefaultCustomObjectRenderersPlugin;
 
     overridePluginRepoCreationForm(pluginRepoCreationForm: PluginRepoCreationForm): void {
         this._repoCreationForm = pluginRepoCreationForm;
     }
 
-    get repoCreationForm(): PluginRepoCreationForm | null {
+    get repoCreationForm(): PluginRepoCreationForm {
         return this._repoCreationForm;
     }
+
+    overridePluginCustomObjectRenderers(pluginCustomObjectRenderers: PluginCustomObjectRenderers): void {
+        this._customObjectRenderers = pluginCustomObjectRenderers;
+    }
+
+    get customObjectRenderers(): PluginCustomObjectRenderers {
+        return this._customObjectRenderers;
+    }
 }

webui/src/lib/api/index.js

@@ -814,6 +814,18 @@ class Objects {
         return response.text()
     }
 
+    async getRange(repoId, ref, path, start, end, presign = false) {
+        const query = qs({ path, presign });
+        const response = await apiRequest(`/repositories/${encodeURIComponent(repoId)}/refs/${encodeURIComponent(ref)}/objects?` + query,
+            {method: 'GET'},
+            {'Range': `bytes=${start}-${end}`}
+        );
+        if (response.status !== 200 && response.status !== 206) {
+            throw new Error(await extractError(response));
+        }
+        return response.text();
+    }
+
     async head(repoId, ref, path) {
         const query = qs({path});
         const response = await apiRequest(`/repositories/${encodeURIComponent(repoId)}/refs/${encodeURIComponent(ref)}/objects?` + query, {
@@ -878,7 +890,7 @@ class Commits {
     }
 
     async commit(repoId, branchId, message, metadata = {}) {
-        const response = await apiRequest(`/repositories/${repoId}/branches/${branchId}/commits`, {
+        const response = await apiRequest(`/repositories/${encodeURIComponent(repoId)}/branches/${encodeURIComponent(branchId)}/commits`, {
             method: 'POST',
             body: JSON.stringify({message, metadata}),
         });
@@ -1096,8 +1108,9 @@ class Config {
             case 200: {
                 const cfg = await response.json();
                 const storages = buildStoragesConfigs(cfg);
+                const uiConfig = cfg['ui_config'];
                 const versionConfig = cfg['version_config'];
-                return {storages, versionConfig};
+                return {storages, uiConfig, versionConfig};
             }
             case 409:
                 throw new Error('Conflict');

webui/src/lib/hooks/configProvider.tsx

@@ -2,6 +2,7 @@ import React, { createContext, FC, useContext, useEffect, useState, } from "reac
 
 import { config } from "../api";
 import useUser from "./user";
+import { usePluginManager } from "../../extendable/plugins/pluginsContext";
 
 type ConfigContextType = {
     error: Error | null;
@@ -10,9 +11,10 @@ type ConfigContextType = {
 };
 
 type ConfigType = {
-    storages: StorageConfigType[] | null;
+    storages?: StorageConfigType[];
+    uiConfig?: UIConfigType;
     versionConfig?: VersionConfig;
-}
+};
 
 type StorageConfigType = {
     blockstore_namespace_ValidityRegex: string | null;
@@ -25,7 +27,19 @@ type StorageConfigType = {
     pre_sign_support_ui: boolean;
 };
 
+type UIConfigType = {
+    custom_viewers?: Array<CustomViewerConfig>;
+};
+
+type CustomViewerConfig = {
+    name: string;
+    url: string;
+    content_types?: Array<string>;
+    extensions?: Array<string>;
+};
+
 type VersionConfig = {
+    upgrade_recommended?: boolean;
     upgrade_url?: string;
     version_context?: string;
     version?: string;
@@ -42,13 +56,16 @@ const configContext = createContext<ConfigContextType>(configInitialState);
 const useConfigContext = () => useContext(configContext);
 
 const ConfigProvider: FC<{children: React.ReactNode}> = ({children}) => {
+    const pluginManager = usePluginManager();
     const {user} = useUser();
     const [storageConfig, setConfig] = useState<ConfigContextType>(configInitialState);
 
     useEffect(() => {
         config.getConfig()
-            .then(configData =>
-                setConfig({config: configData, loading: false, error: null}))
+            .then(configData => {
+                pluginManager.customObjectRenderers?.init(configData);
+                setConfig({config: configData, loading: false, error: null});
+            })
             .catch((error) =>
                 setConfig({config: null, loading: false, error}));
     }, [user]);
@@ -60,4 +77,6 @@ const ConfigProvider: FC<{children: React.ReactNode}> = ({children}) => {
     );
 };
 
-export { ConfigProvider, useConfigContext };
+export type { ConfigType, CustomViewerConfig };
+
+export { ConfigProvider, useConfigContext };

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

@@ -1,7 +1,7 @@
-import React, {FC} from "react";
+import React, { FC } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import {FileType, RendererComponent} from "./types";
-import {DuckDBRenderer} from "./data";
+import { FileType, RendererComponent } from "./types";
+import { DuckDBRenderer } from "./data";
 import {
     GeoJSONRenderer,
     ImageRenderer,
@@ -13,19 +13,20 @@ import {
     TextRenderer,
     UnsupportedFileType
 } from "./simple";
+import { usePluginManager } from "../../../../extendable/plugins/pluginsContext";
 
 
 const MAX_FILE_SIZE = 20971520; // 20MiB
 
 
-export const Renderers: {[fileType in FileType] : FC<RendererComponent> } = {
+export const Renderers: { [fileType in FileType]: FC<RendererComponent> } = {
     [FileType.DATA]: props => (
         <DuckDBRenderer {...props}/>
     ),
     [FileType.MARKDOWN]: props => (
         <TextDownloader {...props} onReady={text =>
             <MarkdownRenderer {...props} text={text}/>
-        } />
+        }/>
     ),
     [FileType.IPYNB]: props => (
         <TextDownloader {...props} onReady={text =>
@@ -52,11 +53,11 @@ export const Renderers: {[fileType in FileType] : FC<RendererComponent> } = {
     [FileType.GEOJSON]: props => (
         <TextDownloader {...props} onReady={text =>
             <GeoJSONRenderer {...props} text={text}/>
-        } />
+        }/>
     ),
 }
 
-export const guessLanguage =  (extension: string | null, contentType: string | null) => {
+export const guessLanguage = (extension: string | null, contentType: string | null) => {
     switch (extension) {
         case 'py':
             extension = 'python'
@@ -178,7 +179,14 @@ export function guessType(contentType: string | null, fileExtension: string | nu
 }
 
 export const ObjectRenderer: FC<RendererComponent> = (props: RendererComponent) => {
-   const fileType = guessType(props.contentType, props.fileExtension)
+    const pluginManager = usePluginManager();
+
+    const customRenderer = pluginManager.customObjectRenderers.get(props.contentType, props.fileExtension)
+    if (customRenderer) {
+        return customRenderer(props)
+    }
+
+    const fileType = guessType(props.contentType, props.fileExtension)
     if (fileType !== FileType.DATA && props.sizeBytes > MAX_FILE_SIZE)
         return Renderers[FileType.TOO_LARGE](props)
     return Renderers[fileType](props)