# Bug Report: Data Explorer crashes when adding column with nested JSON/null property

# Bug Report: Data Explorer crashes when adding column with nested JSON/null property

## Summary

Cosmos Data Explorer crashes/becomes unresponsive when a property that can be `null` or contain nested JSON objects is added to the column selection in the Documents tab. The explorer does not validate or handle this case, and recovery requires manual localStorage editing.

## Environment

- **Product:** Azure Cosmos Data Explorer (Portal)
- **Database:** Cosmos DB NoSQL API
- **Container:** QuoteDistributionRecord

## Steps to Reproduce

1. Open Documents tab for a container with documents containing properties that are either `null` or nested JSON objects
2. Click to edit column selection
3. Add the problematic property (e.g. `QuoteReDistribution`) to the selected columns
4. Explorer crashes/freezes

## Document Structure

```json
{
"id": "BMQ-XXXXXX",
"CreatedAt": "2025-12-01T10:09:24.121Z",
"InitialDistribution": {
"ExecutedOn": "2025-12-01T10:09:25.588Z",
"Log": [
{
"Type": "...",
"ExcludedBranches": [
{ "Id": "guid", "Name": "string" }
]
}
]
},
"QuoteReRun": null,
"QuoteReDistribution": null
}
```

The `QuoteReDistribution` and `QuoteReRun` properties can be either:
- `null`
- A nested object matching the `InitialDistribution` structure

## Expected Behaviour

The property should not appear in the column picker, consistent with how other unsupported property types are already filtered out.

## Actual Behaviour

- Explorer renders only the bottom bar (database/subscription selectors)
- Main content area is blank white screen
- No user-facing error message
- Only recovery is manual localStorage editing

### Console Errors

```
Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7BExecutedOn%2C%20Log%7D&args[]=

Unable to create EditorReact TypeError: Cannot read properties of null (reading 'parentNode')
```

React error #31 decodes to: **"Objects are not valid as a React child (found: object with keys {ExecutedOn, Log})"**

The explorer is attempting to render the nested object directly as a React child rather than serialising it, which crashes the component tree.

## Workaround

Edit `AppState` in localStorage to remove the column:

```javascript
let appState = JSON.parse(localStorage.getItem('AppState'));
let path = "/DocumentsTab/ColumnsSelection///";
appState[path].data.selectedColumnIds = appState[path].data.selectedColumnIds.filter(id => id !== 'QuoteReDistribution');
localStorage.setItem('AppState', JSON.stringify(appState));
location.reload();
```

## Suggested Fix

Filter out properties with complex/nested types from the column picker, as is already done for other unsupported property types.

Start in the Documents tab column picker and reproduce the crash with a property that is null or contains nested JSON, using the documented QuoteReDistribution example. Trace how the selected property is rendered and how unsupported property types are filtered. Done means such properties are excluded from the picker and the explorer remains usable without localStorage recovery.

Written by the indexing model from the issue text.