dynamic structure switch

packages/web/src/datagrid/ColumnManager.svelte

@@ -149,11 +149,24 @@
     <SelectField
       isNative
       class="colmode"
-      value="fixed"
+      value={isDynamicStructure ? 'variable' : 'fixed'}
       options={[
         { label: 'Fixed columns (like SQL)', value: 'fixed' },
         { label: 'Variable columns (like MongoDB)', value: 'variable' },
       ]}
+      on:change={e => {
+        dispatchChangeSet({
+          type: 'set',
+          value: {
+            ...changeSetState?.value,
+            structure: {
+              ...display?.editableStructure,
+              __isDynamicStructure: e.detail == 'variable',
+              // __keepDynamicStreamHeader: true,
+            },
+          },
+        });
+      }}
     />
   </div>
 {/if}
@@ -174,7 +187,7 @@
       }}>Add</InlineButton
     >
   {/if}
-  {#if allowChangeChangeSetStructure}
+  {#if allowChangeChangeSetStructure && !isDynamicStructure}
     <InlineButton on:click={handleAddColumn}>Add</InlineButton>
   {/if}
   <InlineButton on:click={() => display.hideAllColumns()}>Hide</InlineButton>
@@ -199,6 +212,7 @@
       {display}
       {column}
       {isJsonView}
+      {isDynamicStructure}
       {conid}
       {database}
       {tableInfo}

packages/web/src/datagrid/ColumnManagerRow.svelte

@@ -14,6 +14,7 @@
   export let isSelected = false;
   export let conid;
   export let database;
+  export let isDynamicStructure;
 
   export let tableInfo;
   export let setTableInfo;
@@ -82,7 +83,7 @@
     <ColumnLabel {...column} showDataType {conid} {database} />
   </div>
 
-  {#if allowChangeChangeSetStructure}
+  {#if allowChangeChangeSetStructure && !isDynamicStructure}
     <div class="nowrap">
       <span class="icon" on:click={handleEditColumn}>
         <FontIcon icon="icon edit" />

packages/web/src/datagrid/JslDataGrid.svelte

@@ -47,16 +47,19 @@
   $: $effect;
 
   $: infoWithPairingId = generateTablePairingId($info);
+  $: infoUsed = (allowChangeChangeSetStructure && changeSetState?.value?.structure) || infoWithPairingId;
+
+  // $: console.log('infoUsed', infoUsed);
 
   $: display = new JslGridDisplay(
     jslid,
-    (allowChangeChangeSetStructure && changeSetState?.value?.structure) || infoWithPairingId,
+    infoUsed,
     $config,
     config.update,
     $cache,
     cache.update,
     loadedRows,
-    $info?.__isDynamicStructure,
+    infoUsed?.__isDynamicStructure,
     supportsReload,
     !!changeSetState
   );
@@ -72,7 +75,7 @@
     gridCoreComponent={JslDataGridCore}
     formViewComponent={JslFormView}
     bind:loadedRows
-    isDynamicStructure={$info?.__isDynamicStructure}
+    isDynamicStructure={!!infoUsed?.__isDynamicStructure}
     useEvalFilters
     {changeSetState}
     {changeSetStore}