feat: support override field type when use cms public api

public/reearth.yml

@@ -115,6 +115,15 @@ extensions:
                 field: data_source_type
                 type: string
                 value: cms_public_api
+            - id: field_type_overrides
+              title: Field Type Overrides
+              description: "Optional, specify field type overrides. Example: field_key_1:markdown,field_key_2:geometryObject"
+              type: string
+              ui: multiline
+              availableIf:
+                field: data_source_type
+                type: string
+                value: cms_public_api
         - id: visualization
           title: Visualization
           fields:

src/extensions/inspector_block/main/PropertyValue.tsx

@@ -65,7 +65,7 @@ const PropertyValue: FC<Props> = ({ property }) => {
     </div>
   ) : property.type === "object" ? (
     <div className="whitespace-pre-wrap break-words">
-      {JSON.stringify(property.value)}
+      {JSON.stringify(property.value, null, 2)}
     </div>
   ) : (
     <div className="whitespace-pre-wrap break-words">

src/extensions/visualizer/main/hooks.ts

@@ -25,6 +25,7 @@ type WidgetProperty = {
     cms_project_id_for_public_api?: string;
     cms_model_id_for_public_api?: string;
     value_filters_for_public_api?: string;
+    field_type_overrides?: string;
   };
   appearance: {
     marker_appearance?: string;
@@ -134,6 +135,7 @@ export default () => {
             projectId: widgetProperty.api.cms_project_id_for_public_api,
             modelId: widgetProperty.api.cms_model_id_for_public_api,
             valueFilters: widgetProperty.api.value_filters_for_public_api,
+            fieldTypeOverrides: widgetProperty.api.field_type_overrides,
           });
           postMsg("addLayer", items);
         } catch (error) {

src/extensions/visualizer/main/utils/getItemsFromPublicAPI.ts

@@ -26,12 +26,14 @@ export const getItemsFromPublicAPI = async ({
   projectId,
   modelId,
   valueFilters,
+  fieldTypeOverrides,
 }: {
   baseUrl: string;
   workspaceId: string;
   projectId: string;
   modelId: string;
   valueFilters?: string;
+  fieldTypeOverrides?: string;
 }): Promise<Item[]> => {
   const url = `${baseUrl}/p/${workspaceId}/${projectId}/${modelId}`;
 
@@ -104,6 +106,19 @@ export const getItemsFromPublicAPI = async ({
 
   flattenProperties(schema.properties);
 
+  // Field type overrides
+  const typeOverrides: Record<string, string> = {};
+  if (fieldTypeOverrides) {
+    const overrides = fieldTypeOverrides.split(",");
+    for (const override of overrides) {
+      const [fieldKey, fieldType] = override.split(":");
+      if (fieldKey && fieldType) {
+        typeOverrides[fieldKey] = fieldType;
+      }
+    }
+  }
+
+  // Process properties
   const processProperties = (
     properties: PropertyObject,
     item: Item,
@@ -118,34 +133,22 @@ export const getItemsFromPublicAPI = async ({
         const fieldId = Math.random().toString(36).substring(2, 9);
 
         // check if it is a group
-        const type = flatSchemaProperties[key]?.type;
-        const field: Field =
-          type === "group"
-            ? {
-                id: fieldId,
-                key,
-                value: fieldId,
-                type,
-                name: flatSchemaProperties[key]?.title || key,
-              }
-            : // support array of assets only
-              Array.isArray(value) &&
-                value.length > 0 &&
-                value[0].type === "asset"
-              ? {
-                  id: fieldId,
-                  key,
-                  value: value.map((v) => v.url),
-                  type: value[0].type,
-                  name: flatSchemaProperties[key]?.title || key,
-                }
-              : {
-                  id: fieldId,
-                  key,
-                  value,
-                  type: flatSchemaProperties[key]?.type,
-                  name: flatSchemaProperties[key]?.title || key,
-                };
+        const type = typeOverrides[key] || flatSchemaProperties[key]?.type;
+
+        const field: Field = {
+          id: fieldId,
+          key,
+          value:
+            type === "group"
+              ? fieldId
+              : type === "asset"
+                ? Array.isArray(value)
+                  ? value.map((v) => v.url)
+                  : value
+                : value,
+          type,
+          name: flatSchemaProperties[key]?.title || key,
+        };
 
         if (groupId) field.group = groupId;