RSTUDIO-539: Better visualization for mixed and dictionaries (#1663)

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## vNext (TBD)
+
+### Enhancements
+
+* Improved data visualization for dictionaries and mixed types. ([#1663](https://github.com/realm/realm-studio/pull/1663/files))
+
+### Fixed
+
+* None
+
+### Internals
+
+* None
+
 ## 15.1.1 (2024-06-07)
 
 

src/ui/RealmBrowser/Content/Table/types/DictionaryCell.tsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import { Badge } from 'reactstrap';
 import Realm from 'realm';
-import { asSafeJsonString } from '../../../../../utils/json';
+import { prettifiedInspect } from '../../../../../utils/json';
 
 // TODO: Get declaration from Realm
 type Dictionary<T = unknown> = { [key: string]: T };
@@ -33,9 +33,8 @@ const displayValue = (
   if (!dictionary) {
     return 'null';
   } else {
-    return asSafeJsonString(dictionary, {
-      cleanupRefs: true,
-      maxLength: VALUE_STRING_LENGTH_LIMIT,
+    return prettifiedInspect(dictionary, {
+      maxStringLength: VALUE_STRING_LENGTH_LIMIT,
     });
   }
 };

src/ui/RealmBrowser/JsonViewerDialog/JsonViewerDialog.tsx

@@ -41,7 +41,7 @@ export const JsonViewerDialog = ({
 }: IJSonViewerDialogProps) => (
   <Modal isOpen={visible} toggle={onCancel}>
     <Form>
-      <ModalHeader>JSON Viewer</ModalHeader>
+      <ModalHeader>Viewer</ModalHeader>
       {json.includes('"$refId":') && (
         <CardBody style={{ borderBottom: '1px solid #dee2e6' }}>
           <CardText>

src/ui/RealmBrowser/display.ts

@@ -16,7 +16,7 @@
 //
 ////////////////////////////////////////////////////////////////////////////
 
-import util from 'util';
+import util from 'node:util';
 
 export const displayObject = (
   object: Realm.Object | null,

src/utils/json.ts

@@ -1,6 +1,5 @@
 import { display as displayDataCell } from '../ui/RealmBrowser/Content/Table/types/DataCell';
-import { stringify } from 'flatted';
-
+import { InspectOptions, inspect } from 'util';
 // TODO: Investigate better solution.
 const $REF_MATCHER =
   /\s*\"\$ref[Id]*\" *: *(\"(.*?)\"(,|\s|)|\s*\{(.*?)\}(,|\s|))/g;
@@ -16,6 +15,29 @@ type SafeJsonOptions = {
   shallow?: boolean;
 };
 
+export const prettifiedInspect = (
+  object: unknown,
+  options?: InspectOptions,
+) => {
+  // If it is possible to serialize the object to a simpler structure with toJSON, do it.
+  const simplifiedObject =
+    object &&
+    typeof object === 'object' &&
+    'toJSON' in object &&
+    typeof object.toJSON === 'function'
+      ? object.toJSON()
+      : object;
+
+  return inspect(simplifiedObject, {
+    compact: false,
+    // TODO: Can potentially support higher depth if one can hide symbols properly.
+    depth: 0,
+    breakLength: 80,
+    showHidden: false,
+    ...options,
+  });
+};
+
 export const asSafeJsonString = (
   value: unknown,
   options: SafeJsonOptions = {},
@@ -39,7 +61,7 @@ export const asSafeJsonString = (
     );
   } else {
     try {
-      json = stringify(value);
+      json = prettifiedInspect(value);
     } catch (err) {
       json = err instanceof Error ? err.message : String(err);
     }
@@ -127,9 +149,8 @@ export const getCellStringRepresentation = (
   }
 
   if (canUseJsonViewer(property, value)) {
-    return asSafeJsonString(value, {
-      cleanupRefs: true,
-      maxLength: VALUE_STRING_LENGTH_LIMIT,
+    return prettifiedInspect(value, {
+      maxStringLength: VALUE_STRING_LENGTH_LIMIT,
     });
   }