feat: reset and delete dataframes. show df in trrack

examples/test_ext_widget.ipynb

@@ -16,23 +16,23 @@
     "from vega_datasets import data\n",
     "import pandas as pd\n",
     "\n",
-    "# PR.dev.DEV = True"
+    "PR.dev.DEV = True "
    ]
   },
   {
    "cell_type": "code",
    "execution_count": 2,
-   "id": "18ce82e2-afa1-4b98-88da-02057f0a50ef",
+   "id": "82f9dab1-06be-481e-9147-845bf7bed257",
    "metadata": {
-    "__GENERATED_DATAFRAMES__": "ᯢ粠 ",
+    "__GENERATED_DATAFRAMES__": "ᯡࠣ䅬Ԁ朤壠ᜣ琢〹夤゠⹰〮⁁䁻қ䚾ኊ㇠നСࠩ瀮晼Ƭ穅5愠៤⠠ ",
     "__has_persist_output": true,
-    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰۠⬺Ҁᶠู倶䶠⚕Т惛֤ѐé䔂̸ῠ✠㍚ĺ炵扪2攩њᙜˤ撩⣷劂涽䯏Áဠ㑀粀๨ɰ䂠̇刦;䘸෤့垎堠媨᪠Ԅ牠Έƕ稦ܳሣή䠷⋑䅠Ȅ恨䰴❇ʥ,无恲㣱稠嬸ᖽѤݦҢ啺䑁榨ㄝὅ䀺晷⠒璦䈡㼚㻆潋ૡ۾ण䉔悊嘠传ς痻挪挍Ɫ䖽㜖㩳㈨ᱲ⮧ⓥ㎐傁㓘噚㝅ᜢ䞿⅃䫒姒⤘त䃂绖૽㒳扐≱㈹慃࠿擐屲اߡࣄ㤩◂ᣬᬣ䆠礜₸⎨Î罀⢕㧄瑼䖬⧈岊䁬桩ᴰ搠 "
+    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰Ҁ⌠ᰣュర恍–ㄣᠢ㈰֠❞嬩‹䙦Q䬘䩰㗂墦ተ¶⡨⇳㌀ᅎ╮䆳⬮⺄㴘ԩ#℠Ώ䊦Ą䁅ШN㵀〡岁䋼℩㎎恑䀥呡吠৹撠۰̋琭ໆ⒖㺷塟ඃʠϩ䂰桸婺㔶ଠ૫➄燃琡㙐殜ࢨἬण⻕ࡢ㌰ሚᑋU䋟࠳欯Т縔͍暜៕䄣夲Φ㓡毌¾'ૻ埦؃棸䊨崌༘㎄ࡘ剽䌦⌓ცॹ硤橔ᩑႣť䍤ደ幀┢䐀ᒊਨ⯐皕䮉ቄや䖂ᣂ挰၅㋘剬ܧ䄱⑪گ≐ⱖႩ掑㲞ၬ၄w⁸ᅙ峲⹎⁆ᓤ䪬䣄㑴皸ℹ  "
    },
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "512f4240edf4456ab54ff328353191f2",
+       "model_id": "1c711799bc8644a480e9eb18a51e03b8",
        "version_major": 2,
        "version_minor": 0
       },
@@ -50,15 +50,87 @@
     "a"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "id": "6a435cfb-9c8f-4f7b-b775-f5ed8f762850",
+   "metadata": {
+    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰Ӣ䅸ɗ㴦ᠭ䁍cČíᨰֿ㗚ࠣ䱶䊀ৢ䩬ɓ往ƥ`㌲⠠䭈⑀棐瀱Ⴥ⭾䦫ᔮ⻝粦䒠ǁ#㙉䌸晠ኤРᝣၐüムṁǟ㤗%䉸攠ʓ㥀ǔÚ⎃஥䤠⒋䔮ᇸ惀Ēいཞᾶ侢䠄獱డ㙐㮂㢨᢬थ⯐䡣㌰兦䱻U䳘䰵梬䐢粬絭犂⸽䄭崲Τ㓠欌¾'ጇ忦஥歸䁫崽令䮄࠴䙠⌢ᗡ੓炁Ԅᢂㄭާ䩤慧愒৸尰ᦤ憨ᑕԧ․䝊懑䦲垺∢౱ᆨవ塜夦ඣ您㉅ͣ倸晋׆焘䅐䙂␠垀呄㪘牼ㅠⓉ䔕ಹ恳㪊㤴  "
+   },
+   "outputs": [
+    {
+     "ename": "NameError",
+     "evalue": "name 'C' is not defined",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
+      "Cell \u001b[0;32mIn[8], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m \u001b[43mC\u001b[49m\n",
+      "\u001b[0;31mNameError\u001b[0m: name 'C' is not defined"
+     ]
+    }
+   ],
+   "source": []
+  },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "50bad02a-7eb6-4451-8099-9fc167915d9d",
+   "id": "fbf9df2a-6f61-48b9-97d3-71ca7bdf4448",
    "metadata": {
-    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰ૠㆺ͐රʐ怶䀱墴ɒࠥ䀣ጻС撍ᑭ倹䕠瘴嘇䔼䴲⠠䭈⑁棒瀱ፉ⭾䦫ᬶ⻝紧Ҡǁ#〨㙃ࢊ′䈤7㺰ᠠ湐戎Ⴆ寐皠ˬリ$疒‣㐡㨦䎇㦲ڠ暢๕壡‡犀⒒㸾઻$撇ჰ䯨ؠ嬸ⷑ呤ಆҡ囹䑀妨䢣ㄭ䀺慼㈩瞤∡㸦ƶ晑䴶悡檩ǣ᪀痖o#䖃栃͡璌⃤渮➃גТ╌㓣ᎃ䥩Ҕ๖ᕑְ䲈憠炳ෘ氬๠ᇘʴ愇Ⳗ⤲⌡⑶ᇂᙑ¢᭛䵀悐簱੠凈㨣೥ㇸ䴿Bࡤ䒠଄ࢤ✯٥䟩㣅º匲ᨾಳ储⍀  "
+    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰ৠବ倻Č⠱䁍.†Ƭ˒ࣧ㔢ద㉓傠౐擌宋୾䨲⠠䭁䑁楒瀱Ⴭ⭡始ݎẜʤð䀡寰ɑ䗴䈠ॢȠநຸŽᢀ㙄⽽央•扗⨠Ꮃ䤠වױ欈ᶬ䢌ᶒ₝૳/ጢ␁ぱ桸Ⲝ੆ⶥπב䅻榤℔と㥵䑢ڸ䌩栺Ⱑ囥窟㭨㑀ః圏嚳槨嘨朐䠼ໆॵ〤砠Ḇዾᢒ㮒戤ⴁ矗傻ၠ拆๦㥃᢫̨╁䏳梉礘嚂3ᝐ䊮␘ᠹ琯䴥ɰ氯ঊ媹照䥂Д࣡䐯牸⹩̭䈀䑒ણ⃠瑢ঢ揑᲎ᒫ搑ȯᲠ˛粡㻢⊲㇒แ⟥ᓤ檬䣆㔐倠 "
    },
    "outputs": [],
-   "source": []
+   "source": [
+    "A.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "969052a8-acab-4a58-8177-2c9ef62ae521",
+   "metadata": {
+    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰ˠ⌴栣Ìǐ͐ୢ䔢㢰ჯČ∢ᠬ恘呚⿦䁬X㠩挃ҴE䨲࢔䳙ѩ䡱⛇ⓥ䢻ݺ帢䉠ð䀡婷冨㥀ॢȠ௞䠸Žᢀ眰䅽忐ಀƊᢅ\"㣙အ娠崣↳䳩֠㜑ٰ沀倠祐ሺ༿俢䏧怶ᦐؠ嬸ළѤ०Ң哺䑀妨䢣㵕䀺晹∪瞤∡㸦㻆䅅᯦悦檩Ǣᮥ䡀ᬠ➠ǩ㈧熦禗噁⋎筧╙妜⥅䆤㎚ᢘ硐∢౅ኤ䚦䏁熑烰䔜㞨࿃梴ᜥ΁ㄖ᫳㒱ዏ⩤Ȼᅃࠨᛑ屲ػߣࣄ㤪䗀ᣬ⬽䔃㒢ケဢ岢ბ漆䢑㥞ᣆ⦩㔦乫煉⑰  "
+   },
+   "outputs": [],
+   "source": [
+    "E.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d096bc85-ec23-44ee-bd5c-2792731a2937",
+   "metadata": {
+    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰ಅŸހ֠ยฐ୮䂆㸠᢮怹䁦♤ɒ㩠㙃ᠩ旻ⴡᡱᡲ矤䨠ዪनᩌ㲤◩⫰㚊懻垠傱ㄠ㑀碸愹䠤傡%戰映ᮬᢛ䑁圌ỨÐ䩒䀡ᵼ䠠洠⻁䣹溄䃄ᣀ䐑㙐⠠㲸म䛥挆懓價Ⓒ屼ɨ6挫㌶₣烡ვ嬩жㄲᢄ懐ͺⰐ䇝炨䁏僰㫳⟡⋸ᅚ兀㠶䱘䐶怩瀠㫌㱱㹐ᑾ囤ɭ搄矠寵⒄ᑐ刴⥎ඦѣ↤⮁棵㤜㙚ࢥ惀₶Ἧ掀ᠪߩ夌㉄吊䢡⌴㲂Ĥ㚗ᙡ䄀҂಩⍱瑦֮抐㱞ڨጩ∿Ԡ˙Ɂ㧯㇤ᔘ犨䭲䦺Շ⇅䓃ဠ "
+   },
+   "outputs": [],
+   "source": [
+    "D.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "dc4392b5-b799-4e48-9823-4b3647f6dbe6",
+   "metadata": {
+    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰à㬠春ㅠᘣᡰୣԡ೦瀸暴∤ᧀᎣᇚ㊟⸸㋊ᐠᱩ•ⳁႧ⛧䡤峅൚䙌汙㤓琲&䈠۾䀱䘾䒠┨ࠠ⹚₀ǘ憡屢ƚ盵+ࣝ⠠乮␠㚠᝷⟀煒⃂瓉Ȕ⬸ᐠṬҦ‣ㅑᦑ᥸屆ᨹഠ⯀ב䅻榤℔と㕵䑢ຸ䌭樺Ⱑ圅窟㝨㑀ఋ堎㒃棈嘨眐䠼৆୵〤砠ᶷ⻾ᡊ㞚戤ⴋ㟗劻ၠ戲ᐸ㸵ἠ⦳ɀ惣樈沄ዂ ঳ᙢႸ⨨ᢄᨈ忎Ԣ恰嬺槐䨂㞲∦ೱ冨င塼䥆Πᆨ別ۤ⠸晋໠慘湏࿢ंK忨ଽ⹉Ἳᄲ੺ಲ剳咭຺䔠 "
+   },
+   "outputs": [],
+   "source": [
+    "TEst.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c3cddbc4-a619-4f9b-a27b-ecbeec3bd7d4",
+   "metadata": {
+    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰怶ƹ桃¼吵䁍ܡء堣ᨰ₃f䈠炳૦ϐ‚晴ሢ㏁䇮撴E䨲ࡔ䳘֫䥵傌櫩䮯ὡ懂ˆ†汩棤ẰӁĠפìW౐㮨⃎濹ǀƎᢅ\"㣙အ娠崣↳䳩ৠ㇁Ұ沀倠祐ሯܯٯ䃣ᆁ㈐ؠ嬸ඩ౤ɦҢ哻䑀妨䢣ᵕ䀺晲∪瞤∡㸦㻆䔩ڦ悦檩Ǣ᪀㕖o#䦝栃ǂ痌⇥⻾䜲㧒вⵉ憧⃳儸摐䈪఩Һ䱾抇焷ࢉ羔ᴠ╡℘✻數㛲ት畨䁣Ʉㄡ˶ᮦ⃣゘ᄴ䓃⤘㴩䆁墺⼠∰䓾ഠ֒Ѣ⏛䭄戴Გ侭⢩ൗ੩桉↰  "
+   },
+   "outputs": [],
+   "source": [
+    "A.head()"
+   ]
   }
  ],
  "metadata": {

persist_ext/internals/data/validate.py

@@ -1,8 +1,9 @@
 import pandas as pd
+from io import StringIO
 
 
 def DEFAULT_PREPROCESS_FN(df):
-    df = pd.read_json(df.to_json())
+    df = pd.read_json(StringIO(df.to_json()))
     return df
 
 

persist_ext/internals/widgets/base/widget_with_generation.py

@@ -39,7 +39,15 @@ def _on_counter(self, change):
 
     @traitlets.observe("gdr_record")
     def _on_gdr_record_update(self, change):
+        old_records = change.old
         record = change.new
+        if old_records is not None:
+            for key, rec in old_records.items():
+                if "isDynamic" in rec and rec["isDynamic"]:
+                    continue
+                elif does_var_exist(key):
+                    del get_ipython().user_ns[key]
+
         with self.hold_sync():
             if len(record) == 0:
                 self._create_dynamic_df(self.gdr_dynamic_name)
@@ -88,8 +96,6 @@ def _only_create_dynamic_df(self, df_name):
         update_fn(self.processed_data)
 
     def _create_dynamic_df(self, df_name):
-        print("generating dynamic: ", df_name)
-
         i = 1
 
         def create_df_name(count):

pyproject.toml

@@ -105,3 +105,4 @@ watch_widgets = ["hatch run npx vite"]
 run_lab = ["hatch run jlpm dev:lab"]
 watch_extension = ["hatch run jlpm dev:ext"]
 build_widgets = ["hatch run node build_all.mjs"]
+build_extension = ["hatch run build_widgets && hatch run python -m build"]

src/widgets/dataframe_footer/DataframeFooter.tsx

@@ -21,13 +21,8 @@ import {
 import { TrrackableCell } from '../../cells';
 import { DataframeNameBadge } from '../components/DataframeNameBadge';
 
-import {
-  IconCopy,
-  IconRefresh,
-  IconRowInsertTop,
-  IconX
-} from '@tabler/icons-react';
-import { useForceUpdate, useValidatedState } from '@mantine/hooks';
+import { IconCopy, IconRowInsertTop, IconX } from '@tabler/icons-react';
+import { useValidatedState } from '@mantine/hooks';
 import { isValidPythonVar } from '../utils/isValidPythonVar';
 import { PersistCommands } from '../../commands';
 import { PERSIST_ICON_SIZE } from '../interactive_table/constants';
@@ -72,7 +67,6 @@ function useGeneratedDf(cell: TrrackableCell) {
 
 export function DataframeFooter({ cell }: Props) {
   const { generatedDfModel, model, setGeneratedDfModel } = useGeneratedDf(cell);
-  const forceUpdate = useForceUpdate();
 
   const [newDataframeName, setNewDataframeName] = useValidatedState(
     '',
@@ -123,12 +117,7 @@ export function DataframeFooter({ cell }: Props) {
 
   return (
     <Paper shadow="lg" withBorder p="md" mx="xs">
-      <Group>
-        <Title size="h4">Datasets</Title>
-        <ActionIcon color="blue" size="sm" onClick={forceUpdate}>
-          <IconRefresh />
-        </ActionIcon>
-      </Group>
+      <Title size="h4">Datasets</Title>
       <Divider size="xs" my="md" />
 
       <Text fz={PERSIST_ICON_SIZE} fw="bold">

src/widgets/header/Header.tsx

@@ -1,28 +1,38 @@
 import { useModelState } from '@anywidget/react';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { TrrackableCell } from '../../cells';
-import { Divider, Group } from '@mantine/core';
+import { Button, Divider, Group } from '@mantine/core';
 import { PersistCommands } from '../../commands';
-import {
-  IconFilterMinus,
-  IconFilterPlus,
-  IconRefresh
-} from '@tabler/icons-react';
+import { IconFilterMinus, IconFilterPlus } from '@tabler/icons-react';
 import { CommandButton } from './CommandButton';
 import { Annotate } from './Annotate';
 import { UseSignal } from '@jupyterlab/apputils';
 import { RenameColumnPopover } from './RenameColumnPopover';
 import { DropColumnPopover } from './DropColumnPopover';
 import { EditCategoryPopover } from './EditCategoryPopover';
 import { AssignCategoryPopover } from './AssignCategoryPopover';
-import { CopyDFPopover } from './CopyDFPopover';
+import { GeneratedRecord } from '../utils/dataframe';
 
 type Props = {
   cell: TrrackableCell;
 };
 
 export function Header({ cell }: Props) {
   const [hasSelections] = useModelState<boolean>('df_has_selections');
+  const [generatedRecord, setGeneratedRecord] =
+    useModelState<GeneratedRecord>('gdr_record');
+
+  const resetDataframes = useCallback((record: GeneratedRecord) => {
+    const newRecord: GeneratedRecord = {};
+
+    Object.values(record).forEach(record => {
+      if (record.isDynamic) {
+        newRecord[record.dfName] = record;
+      }
+    });
+
+    setGeneratedRecord(newRecord);
+  }, []);
 
   return (
     <Group
@@ -31,13 +41,6 @@ export function Header({ cell }: Props) {
         padding: '1em'
       }}
     >
-      <CommandButton
-        cell={cell}
-        commandRegistry={window.Persist.Commands.registry}
-        commandId={PersistCommands.resetTrrack}
-        icon={<IconRefresh />}
-      />
-      <Divider orientation="vertical" />
       <RenameColumnPopover cell={cell} />
       <DropColumnPopover cell={cell} />
       <Divider orientation="vertical" />
@@ -69,7 +72,29 @@ export function Header({ cell }: Props) {
         {() => <Annotate cell={cell} isDisabled={!hasSelections} />}
       </UseSignal>
       <Divider orientation="vertical" />
-      <CopyDFPopover cell={cell} />
+      <Button.Group>
+        <Button
+          px="0.3em"
+          size="xs"
+          variant="subtle"
+          onClick={() => {
+            resetDataframes(generatedRecord);
+            window.Persist.Commands.execute(PersistCommands.resetTrrack, {
+              cell
+            });
+          }}
+        >
+          Reset Trrack
+        </Button>
+        <Button
+          px="0.3em"
+          size="xs"
+          variant="subtle"
+          onClick={() => resetDataframes(generatedRecord)}
+        >
+          Delete datasets
+        </Button>
+      </Button.Group>
     </Group>
   );
 }

src/widgets/interactive_table/DatatableComponent.tsx

@@ -48,7 +48,6 @@ function useSyncedState<T>(
 
   useEffect(() => {
     setState(s => {
-      console.log({ s, _stateFromModel });
       if (eq(s, _stateFromModel)) {
         return s;
       }