fix: try key avlue list

Author: gadomski

src/components/controls/SimpleKeyValueList.tsx

@@ -9,23 +9,7 @@ const SimpleKeyValueList = ({ object, indent = false }: Props) => {
   return (
     <div className="json-list">
       {Object.entries(object).map(([key, val]) => {
-        if (val == null) return null;
-
-        if (Array.isArray(val)) {
-          return (
-            <LabeledValue key={key} label={stacFormatter.label(key)} indent={indent}>
-              {val.join(", ")}
-            </LabeledValue>
-          );
-        }
-
-        if (typeof val === "object") {
-          return (
-            <LabeledValue key={key} label={stacFormatter.label(key)} indent={indent}>
-              <SimpleKeyValueList object={val} indent />
-            </LabeledValue>
-          );
-        }
+        if (Array.isArray(val) || typeof val === "object") return null;
 
         return (
           <LabeledValue key={key} label={stacFormatter.label(key)} indent={indent}>

src/utils/stac.js

@@ -683,15 +683,23 @@ export const renderItemColumn = (item, _, column) => {
       if (Array.isArray(fieldContent)) {
         fieldContent = fieldContent.join(", ");
       } else if (isObject(fieldContent)) {
-        return (
-          <Revealer>
-            <SimpleKeyValueList object={fieldContent} />
-          </Revealer>
-        );
+        return formatObject(fieldContent);
       }
       return stacFormatter.format(fieldContent, column.fieldName);
   }
 };
 
+const formatValue = value => {
+  if (Array.isArray(value)) return value.join(", ");
+  if (isObject(value)) return formatObject(value);
+  return String(value);
+};
+
+const formatObject = obj => {
+  return Object.entries(obj)
+    .map(([k, v]) => `${stacFormatter.label(k)}: ${formatValue(v)}`)
+    .join(", ");
+};
+
 const boldStyle = { root: { fontWeight: "bold" } };
 const gap4 = { childrenGap: 4 };