export to code working with ipylab

diginlineprofiler/visualizer.py

@@ -9,9 +9,10 @@
 """
 
 from ipywidgets import DOMWidget
-from traitlets import Unicode, Dict
+from traitlets import Unicode, Dict, observe
 import pandas as pd
 from varname import argname
+from ipylab import JupyterFrontEnd
 
 from ._frontend import module_name, module_version
 from .profile_lib import isNumeric, isTimestamp, isCategorical, isBoolean, getColumns, getShape, \
@@ -30,9 +31,12 @@ class Visualizer(DOMWidget):
 
     # our synced traitlet state
     dfProfile = Dict({}).tag(sync=True)
+    exportedCode = Unicode('').tag(sync=True)
 
     # python only state
     dataframe = None
+    app = JupyterFrontEnd()
+
 
     def __init__(self, dataframe: pd.DataFrame, *args, **kwargs):
         super(Visualizer, self).__init__(*args, **kwargs)
@@ -113,4 +117,15 @@ def calculateChartData(self, dfName: str):
             "warnings": []
         }
         # save profile to trailet to sync with frontend
-        self.dfProfile = profile
+        self.dfProfile = profile
+
+    @observe('exportedCode')
+    def _observe_exported_code(self, change):
+        """
+        Called when the exportedCode traitlet is changed, we add new code cell on a change
+        """
+        self.addNewCell(change['new'])
+
+    def addNewCell(self, codeText):
+        self.app.commands.execute('notebook:insert-cell-below')
+        self.app.commands.execute('notebook:replace-selection', {'text': codeText})

requirements.txt

@@ -1,4 +1,5 @@
 ipywidgets>=7.0.0
 pandas
 varname
-altair
+altair
+ipylab

src/Widget.svelte

@@ -1,14 +1,32 @@
 <script lang="ts">
+    import { setContext } from 'svelte';
     import DFProfile from './components/DFProfile.svelte';
-    import type { Writable } from 'svelte/store';
     import type { IDFProfileWState } from './common/exchangeInterfaces';
+    import { WidgetWritable } from './stores';
 
-    export let dfProfileStore: Writable<IDFProfileWState>;
+    export let model;
+
+    const dfProfile = WidgetWritable<IDFProfileWState>(
+        'dfProfile',
+        {
+            profile: [],
+            shape: [0, 0],
+            dfName: 'test',
+            lastUpdatedTime: 0,
+            isPinned: false,
+            warnings: []
+        },
+        model
+    );
+
+    const exportedCode = WidgetWritable<string>('exportedCode', '', model);
+
+    setContext('inlineprofiler:exportedCode', exportedCode);
 </script>
 
 <DFProfile
-    dfName={$dfProfileStore.dfName}
-    dataframeProfile={$dfProfileStore}
+    dfName={$dfProfile.dfName}
+    dataframeProfile={$dfProfile}
     isInFocus={false}
-    isPinned={$dfProfileStore.isPinned}
+    isPinned={$dfProfile.isPinned}
 />

src/components/DFProfile.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
     import _ from 'lodash';
-    import { setContext } from 'svelte';
-    import { writable } from 'svelte/store';
-    import type { Writable } from 'svelte/store';
-
     import type { IDFProfileWState } from '../common/exchangeInterfaces';
     import ColumnProfile from './ColumnProfile.svelte';
     import { formatInteger } from './utils/formatters';
@@ -34,15 +30,6 @@
 
         return inputWidth;
     }
-
-    // Local store for exported code
-    let exportedCode: Writable<string> = writable(undefined);
-    setContext('inlineprofiler:exportedCode', exportedCode);
-    function clearExportCode() {
-        $exportedCode = undefined;
-    }
-
-    $: console.log('Exported code is: ', $exportedCode);
 </script>
 
 <div class="inlineprofiler-base-wrapper">
@@ -88,23 +75,6 @@
                 <p class="pl-8">No columns!</p>
             {/if}
         </div>
-        {#if $exportedCode !== undefined && $exportedCode !== ''}
-            <div class="mt-2">
-                <div class="flex mb-1">
-                    <h3 class="font-bold">Exported Code</h3>
-                    <button
-                        on:click={clearExportCode}
-                        class="pl-2 pr-2 mx-2 bg-gray-100 hover:bg-gray-200 text-red-500"
-                    >
-                        Clear
-                    </button>
-                </div>
-
-                <pre>
-{$exportedCode}
-</pre>
-            </div>
-        {/if}
     </div>
 </div>
 

src/components/export-code/ExportChartButton.svelte

@@ -40,12 +40,7 @@
             );
         }
 
-        console.log(text);
-
         $exportedCode = text;
-
-        // TODO add cell here
-        // addCell('code', text);
     }
 </script>
 

src/components/viz/histogram/SummaryStatLabel.svelte

@@ -58,8 +58,6 @@
         // alt key or option key on mac
         if (event.altKey) {
             let code = exportCodeSelection(dfName, colName, label, isIndex);
-            // addCell('code', code);
-            console.log(code);
             $exportedCode = code;
         }
     }

src/widget.ts

@@ -6,10 +6,8 @@ import {
   DOMWidgetView,
   ISerializers,
 } from '@jupyter-widgets/base';
-import { WidgetWritable } from './stores';
 import { MODULE_NAME, MODULE_VERSION } from './version';
 import Widget from './Widget.svelte'
-import type { IDFProfileWState } from './common/exchangeInterfaces'
 
 export class VizualizerModel extends DOMWidgetModel {
   defaults() {
@@ -21,7 +19,8 @@ export class VizualizerModel extends DOMWidgetModel {
       _view_name: VizualizerModel.view_name,
       _view_module: VizualizerModel.view_module,
       _view_module_version: VizualizerModel.view_module_version,
-      dfProfile: {}
+      dfProfile: {},
+      exportedCode: '',
     };
   }
 
@@ -40,20 +39,6 @@ export class VizualizerModel extends DOMWidgetModel {
 
 export class VizualizerView extends DOMWidgetView {
   render() {
-
-    const dfProfile = WidgetWritable<IDFProfileWState>(
-      'dfProfile',
-      {
-        profile: [],
-        shape: [0, 0],
-        dfName: 'test',
-        lastUpdatedTime: 0,
-        isPinned: false,
-        warnings: []
-      },
-      this.model
-    );
-
-    new Widget({ target: this.el, props: { dfProfileStore: dfProfile } });
+    new Widget({ target: this.el, props: { model: this.model } });
   }
 }