Add GeoJSON file rendering support and amend preview support in ObjectsDiff

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

@@ -10,31 +10,9 @@ import {useStorageConfigs} from "../../hooks/storageConfig";
 import {AppContext} from "../../hooks/appContext";
 import {useRefs} from "../../hooks/repo";
 import {getRepoStorageConfig} from "../../../pages/repositories/repository/utils";
-import {GeoJSONPreview} from "./GeoJSONPreview";
 
 const maxDiffSizeBytes = 120 << 10;
-const DiffViewerType = {
-    GEOJSON: 'geojson',
-    REACT: 'react',
-};
-const diffViewersByExtension = {
-    geojson: DiffViewerType.GEOJSON,
-    txt: DiffViewerType.REACT,
-    text: DiffViewerType.REACT,
-    md: DiffViewerType.REACT,
-    csv: DiffViewerType.REACT,
-    tsv: DiffViewerType.REACT,
-    yaml: DiffViewerType.REACT,
-    yml: DiffViewerType.REACT,
-    json: DiffViewerType.REACT,
-    jsonl: DiffViewerType.REACT,
-    ndjson: DiffViewerType.REACT,
-};
-
-const getViewer = (path) => {
-    const ext = path.split(".").pop().toLowerCase();
-    return diffViewersByExtension[ext] || null;
-};
+const supportedReadableFormats = ["txt", "text", "md", "csv", "tsv", "yaml", "yml", "json", "jsonl", "ndjson", "geojson"];
 
 export const ObjectsDiff = ({diffType, repoId, leftRef, rightRef, path}) => {
     const {repo, error: refsError, loading: refsLoading} = useRefs();
@@ -45,7 +23,7 @@ export const ObjectsDiff = ({diffType, repoId, leftRef, rightRef, path}) => {
 
     if (hooksError) return <AlertError error={hooksError}/>;
 
-    const viewer = getViewer(path);
+    const readable = readableObject(path);
     let left;
     let right;
     switch (diffType) {
@@ -74,7 +52,7 @@ export const ObjectsDiff = ({diffType, repoId, leftRef, rightRef, path}) => {
 
     const leftStat = left && left.response;
     const rightStat = right && right.response;
-    if (!viewer) {
+    if (!readable) {
         return <NoContentDiff left={leftStat} right={rightStat} diffType={diffType}/>;
     }
     const objectTooBig = (leftStat && leftStat.size_bytes > maxDiffSizeBytes) || (rightStat && rightStat.size_bytes > maxDiffSizeBytes);
@@ -88,8 +66,17 @@ export const ObjectsDiff = ({diffType, repoId, leftRef, rightRef, path}) => {
                         leftSize={leftSize} rightSize={rightSize} diffType={diffType}/>;
 }
 
+function readableObject(path) {
+    for (const ext of supportedReadableFormats) {
+        if (path.endsWith("." + ext)) {
+            return true;
+        }
+    }
+    return false;
+}
+
 const NoContentDiff = ({left, right, diffType}) => {
-    const supportedFileExtensions = Object.keys(diffViewersByExtension).map((ext) => `.${ext}`);
+    const supportedFileExtensions = supportedReadableFormats.map((fileType) => `.${fileType}`);
     return <div>
         <span><StatDiff left={left} right={right} diffType={diffType}/></span>
         <span><Alert variant="light"><InfoIcon/> {`lakeFS supports content diff for ${supportedFileExtensions.join(',')} file formats only`}</Alert></span>
@@ -108,22 +95,16 @@ const ContentDiff = ({config, repoId, path, leftRef, rightRef, leftSize, rightSi
     const err = (left && left.error) || (right && right.err);
     if (err) return <AlertError error={err}/>;
 
-    const viewer = getViewer(path);
-    if (!viewer) return null;
-
     return <div>
         <DiffSizeReport leftSize={leftSize} rightSize={rightSize} diffType={diffType}/>
-        {
-            viewer === DiffViewerType.GEOJSON
-                ? <GeoJSONPreview data={right?.response} />
-                : <ReactDiffViewer
-                    oldValue={left?.response}
-                    newValue={right?.response}
-                    splitView={false}
-                    useDarkTheme={state.settings.darkMode}
-                    compareMethod={DiffMethod.WORDS}
-                />
-        }
+        <ReactDiffViewer
+            oldValue={left?.response}
+            newValue={right?.response}
+            splitView={false}
+            useDarkTheme={state.settings.darkMode}
+            compareMethod={DiffMethod.WORDS}
+        />
+
     </div>;
 }
 

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

@@ -3,6 +3,7 @@ import SyntaxHighlighter from "react-syntax-highlighter";
 import {FileType, RendererComponent} from "./types";
 import {DuckDBRenderer} from "./data";
 import {
+    GeoJSONRenderer,
     ImageRenderer,
     IpynbRenderer,
     MarkdownRenderer,
@@ -48,6 +49,11 @@ export const Renderers: {[fileType in FileType] : FC<RendererComponent> } = {
     [FileType.TOO_LARGE]: props => (
         <ObjectTooLarge {...props}/>
     ),
+    [FileType.GEOJSON]: props => (
+        <TextDownloader {...props} onReady={text =>
+            <GeoJSONRenderer {...props} text={text}/>
+        } />
+    ),
 }
 
 export const guessLanguage =  (extension: string | null, contentType: string | null) => {
@@ -102,6 +108,8 @@ export function guessType(contentType: string | null, fileExtension: string | nu
         case 'application/x-toml':
         case 'application/toml':
             return FileType.TEXT
+        case 'application/geo+json':
+            return FileType.GEOJSON;
         case 'application/x-ipynb+json':
         case 'application/x-ipynb':
         case 'application/ipynb':
@@ -144,6 +152,8 @@ export function guessType(contentType: string | null, fileExtension: string | nu
         case 'jsonl':
         case 'ndjson':
             return FileType.TEXT
+        case 'geojson':
+            return FileType.GEOJSON
     }
     if (guessLanguage(fileExtension, contentType))
         return FileType.TEXT

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

@@ -18,6 +18,7 @@ import "react-ipynb-renderer/dist/styles/default.css";
 import { useMarkdownProcessor } from "./useMarkdownProcessor";
 import { AppContext } from "../../../../lib/hooks/appContext";
 import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import {GeoJSONPreview} from "../../../../lib/components/repository/GeoJSONPreview";
 
 export const ObjectTooLarge: FC<RendererComponent> = ({ path, sizeBytes }) => {
   return (
@@ -146,3 +147,7 @@ export const PDFRenderer: FC<RendererComponent> = ({
     </div>
   );
 };
+
+export const GeoJSONRenderer: FC<RendererComponentWithText> = ({ text }) => {
+  return <GeoJSONPreview data={text} />;
+};

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

@@ -25,4 +25,5 @@ export enum FileType {
     TEXT,
     UNSUPPORTED,
     TOO_LARGE,
+    GEOJSON
 }