cell data view

packages/web/src/widgets/CellDataWidget.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" context="module">
+  const formats = [
+    {
+      type: 'textWrap',
+      title: 'Text (wrap)',
+      component: TextCellViewWrap,
+      single: true,
+    },
+    {
+      type: 'text',
+      title: 'Text (no wrap)',
+      component: TextCellViewNoWrap,
+      single: true,
+    },
+    {
+      type: 'json',
+      title: 'Json',
+      component: JsonCellView,
+      single: true,
+    },
+  ];
+
+  function autodetect(selection) {
+    const value = selection.length == 1 ? selection[0].value : null;
+    if (_.isString(value)) {
+      if (value.startsWith('[') || value.startsWith('{')) return 'json';
+    }
+    return 'textWrap';
+  }
+
+  let cellSelectionListener = null;
+
+  export const getCellSelectionListener = () => cellSelectionListener;
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import { onMount } from 'svelte';
+
+  import JsonCellView from '../celldata/JsonCellView.svelte';
+  import TextCellViewNoWrap from '../celldata/TextCellViewNoWrap.svelte';
+  import TextCellViewWrap from '../celldata/TextCellViewWrap.svelte';
+  import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import SelectField from '../forms/SelectField.svelte';
+  import { selectedCellsCallback } from '../stores';
+  import WidgetTitle from './WidgetTitle.svelte';
+
+  let selectedFormatType = 'autodetect';
+
+  export let selection = undefined;
+
+  $: autodetectFormatType = autodetect(selection);
+  $: autodetectFormat = formats.find(x => x.type == autodetectFormatType);
+
+  $: usedFormatType = selectedFormatType == 'autodetect' ? autodetectFormatType : selectedFormatType;
+  $: usedFormat = formats.find(x => x.type == usedFormatType);
+
+  $: selection = $selectedCellsCallback();
+</script>
+
+<div class="wrapper">
+  <WidgetTitle>Cell data view</WidgetTitle>
+  <div class="main">
+    <div class="toolbar">
+      Format:
+      <SelectField
+        isNative
+        value={selectedFormatType}
+        on:change={e => (selectedFormatType = e.detail)}
+        options={[
+          { value: 'autodetect', label: `Autodetect - ${autodetectFormat.title}` },
+          ...formats.map(fmt => ({ label: fmt.title, value: fmt.type })),
+        ]}
+      />
+    </div>
+    <div class="data">
+      {#if usedFormat.single && selection?.length != 1}
+        <ErrorInfo message="Must be selected one cell" />
+      {:else if usedFormat == null}
+        <ErrorInfo message="Format not selected" />
+      {:else if !selection || selection.length == 0}
+        <ErrorInfo message="No data selected" />
+      {:else}
+        <svelte:component this={usedFormat?.component} {selection} />
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .toolbar {
+    display: flex;
+    background: var(--theme-bg-1);
+    align-items: center;
+  }
+
+  .data {
+    display: flex;
+    flex: 1;
+  }
+</style>

packages/web/src/widgets/WidgetContainer.svelte

@@ -5,6 +5,7 @@
   import FilesWidget from './FilesWidget.svelte';
   import PluginsWidget from './PluginsWidget.svelte';
   import FavoritesWidget from './FavoritesWidget.svelte';
+import CellDataWidget from './CellDataWidget.svelte';
 </script>
 
 {#if $selectedWidget == 'database'}
@@ -22,3 +23,6 @@
 {#if $selectedWidget == 'favorites'}
   <FavoritesWidget />
 {/if}
+{#if $selectedWidget == 'cell-data'}
+  <CellDataWidget />
+{/if}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -33,6 +33,11 @@
       name: 'favorites',
       title: 'Favorites',
     },
+    {
+      icon: 'icon cell-data',
+      name: 'cell-data',
+      title: 'Selected cell data detail view',
+    },
     // {
     //   icon: 'fa-cog',
     //   name: 'settings',
@@ -56,7 +61,7 @@
 {/if}
 {#each widgets as item}
   <div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
-    <FontIcon icon={item.icon} />
+    <FontIcon icon={item.icon} title={item.title} />
   </div>
 {/each}