fix(intent): removed print statement

examples/ext-python-test.ipynb

@@ -98,6 +98,7 @@
   }
  ],
  "metadata": {
+  "__CATEGORIES_META__": "{\"categories\":{},\"activeCategoryName\":\"\"}",
   "__CATEGORIES__": {},
   "kernelspec": {
    "display_name": "Python 3 (ipykernel)",

package.json

@@ -68,6 +68,7 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@hookstate/core": "^4.0.1",
+    "@hookstate/localstored": "^4.0.2",
     "@hookstate/subscribable": "^4.0.0",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/apputils": "^4.0.0",

persist_ext/extension/apply.py

@@ -1,5 +1,8 @@
 SELECTED = "__selected"
 AGGREGATE = "__aggregate"
+PREV_COLUMN_NAME = "prevColumnName"
+NEW_COLUMN_NAME = "newColumnName"
+COLUMN_NAMES = "columnNames"
 
 
 def create_dataframe(data, interactions, base_cols = []):
@@ -32,10 +35,33 @@ def _process(df, interactions):
             df = _apply_aggregate(df, interaction)
         elif interaction["type"] == 'categorize':
             df = _apply_category(df, interaction)
+        elif interaction["type"] == 'rename-column':
+            df = _apply_rename_column(df, interaction)
+        elif interaction["type"] == 'drop-columns':
+            df = _apply_drop_columns(df, interaction)
         else: 
             print("--------------------", interaction["type"])
     return df
 
+def _apply_drop_columns(df, interaction):
+    column_names = interaction[COLUMN_NAMES]
+
+    df = df.drop(column_names, axis=1) 
+
+    return df
+
+def _apply_rename_column(df, interaction):
+    prev_column_name = interaction[PREV_COLUMN_NAME]
+    new_column_name = interaction[NEW_COLUMN_NAME]
+
+    rename_dict = {}
+    rename_dict[prev_column_name] = new_column_name
+
+    df = df.rename(columns=rename_dict)
+
+    return df
+
+
 def _apply_aggregate(df, interaction):
     name = interaction["agg_name"]
 

persist_ext/extension/intents.py

@@ -20,6 +20,7 @@ def predict(data, interactions, features=[]):
     df['id'] = df.index.map(str)
 
     df, dimensions = _process(df, interactions)
+
 
     selections = df.loc[df[SELECTED] == True][INDEX].tolist()
 
@@ -47,6 +48,7 @@ def _process(df, interactions):
         else: 
             print("--------------------", interaction["type"])
 
+    print(dimensions)
     return df, dimensions
 
 def _apply_selection(df, interaction):

src/cells/output/OutputHeader.tsx

@@ -14,6 +14,8 @@ import { AggregateGroupPopup } from '../../components/AggregateGroupPopup';
 import { AssignCategoryPopup } from '../../components/AssignCategoryPopup';
 import { CommandButton } from '../../components/CommandButton';
 import { CopyNamedDFPopup } from '../../components/CopyNamedDFPopup';
+import { DropColumnPopover } from '../../components/DropColumnsPopover';
+import { RenameColumnPopover } from '../../components/RenameColumnPopover';
 import { IDEGlobal, Nullable } from '../../utils';
 import { TrrackableCell, TrrackableCellId } from '../trrackableCell';
 import { OutputCommandIds } from './commands';
@@ -84,6 +86,13 @@ export function OutputHeader({ cell }: Props) {
         cId={OutputCommandIds.addNote}
         icon={<IconNotes />}
       />
+      <Divider orientation="vertical" />
+      <UseSignal signal={commands.commandChanged}>
+        {() => <RenameColumnPopover cell={cell} commands={commands} />}
+      </UseSignal>
+      <UseSignal signal={commands.commandChanged}>
+        {() => <DropColumnPopover cell={cell} commands={commands} />}
+      </UseSignal>
     </Group>
   );
 }

src/cells/output/commands.ts

@@ -3,7 +3,6 @@ import { UUID } from '@lumino/coreutils';
 import { Note } from '../../interactions/types';
 import { AggregateOperation } from '../../vegaL/spec/aggregate';
 import { TrrackableCell } from '../trrackableCell';
-import { extractDfAndCopyName } from './extract_helpers';
 
 import { InputDialog } from '@jupyterlab/apputils';
 import { Nullable } from '../../utils';
@@ -18,6 +17,15 @@ export type AggregateCommandArgs = {
   op: AggregateOperation;
 };
 
+export type RenameColumnCommandArgs = {
+  prevColumnName: string;
+  newColumnName: string;
+};
+
+export type DropColumnCommandArgs = {
+  columnNames: string[];
+};
+
 export namespace OutputCommandIds {
   export const reset = 'output:reset';
   export const filter = 'output:filter';
@@ -26,6 +34,8 @@ export namespace OutputCommandIds {
   export const copyDynamic = 'output:copy-dynamic';
   export const labelSelection = 'output:label';
   export const addNote = 'output:note';
+  export const renameColumn = 'output:rename-column';
+  export const dropColumns = 'output:drop-columns';
 }
 
 // Maybe refactor this to be one instance and accept cell as args
@@ -127,13 +137,30 @@ export class OutputCommandRegistry {
       label: 'Assign Categories'
     });
 
+    this._commands.addCommand(OutputCommandIds.renameColumn, {
+      execute: args => {
+        const { prevColumnName, newColumnName } =
+          args as RenameColumnCommandArgs;
+
+        renameColumn(this._cell, prevColumnName, newColumnName);
+      },
+      label: 'Rename column',
+      caption: 'Rename the currently selected column'
+    });
+
+    this._commands.addCommand(OutputCommandIds.dropColumns, {
+      execute: args => {
+        const { columnNames } = args as DropColumnCommandArgs;
+
+        dropColumns(this._cell, columnNames);
+      },
+      label: 'Drop column',
+      caption: 'Drop the selected columns'
+    });
+
     this._commands.addCommand(OutputCommandIds.copyDynamic, {
       execute: () => {
-        extractDfAndCopyName(
-          this._cell,
-          this._cell.trrackManager.current,
-          `df_${this._cell.trrackManager.root.substring(0, 5)}_dyn`
-        );
+        // TODO:
       },
       label: 'Create Dynamic Dataframe',
       caption:
@@ -217,3 +244,24 @@ async function filter(cell: TrrackableCell, direction: 'in' | 'out' = 'out') {
     direction
   });
 }
+
+async function dropColumns(cell: TrrackableCell, columnNames: string[]) {
+  return await cell.trrackManager.actions.addDropColumnInteraction({
+    id: UUID.uuid4(),
+    type: 'drop-columns',
+    columnNames
+  });
+}
+
+async function renameColumn(
+  cell: TrrackableCell,
+  prevColumnName: string,
+  newColumnName: string
+) {
+  return await cell.trrackManager.actions.addRenameColumnInteraction({
+    id: UUID.uuid4(),
+    type: 'rename-column',
+    newColumnName,
+    prevColumnName
+  });
+}

src/cells/trrackableCell.ts

@@ -34,7 +34,7 @@ export class TrrackableCell extends CodeCell {
   predictions = hookstate<Predictions>([]);
   isLoadingPredictions = hookstate<boolean>(false);
 
-  vegaManager: Nullable<VegaManager> = null; // to track vega renderer instance
+  _vegaManager = hookstate<Nullable<VegaManager>>(null); // to track vega renderer instance
   cellUpdateStatus: Nullable<UpdateCause> = null; // to track cell update status
 
   constructor(options: CodeCell.IOptions) {
@@ -60,7 +60,10 @@ export class TrrackableCell extends CodeCell {
 
       if (!predictions && tm.hasSelections) {
         const interactions = getInteractionsFromRoot(tm, tm.current);
-        const data = getDatasetFromVegaView(this.vegaManager.view);
+        const data = getDatasetFromVegaView(
+          this.vegaManager.view,
+          this.trrackManager
+        );
 
         try {
           this.isLoadingPredictions.set(true);
@@ -78,17 +81,25 @@ export class TrrackableCell extends CodeCell {
         predictions = predictions || [];
       }
 
-      console.group(tm.root);
-      console.table(predictions);
-      console.groupEnd();
       this.predictions.set(predictions);
     });
 
     IDELogger.log(`Created TrrackableCell ${this.cellId}`);
   }
 
+  get vegaManagerState() {
+    return this._vegaManager;
+  }
+
+  get vegaManager() {
+    return this._vegaManager.get();
+  }
+
   createVegaManager(vega: Vega) {
-    this.vegaManager = VegaManager.create(this, vega);
+    const vm = VegaManager.create(this, vega);
+
+    this._vegaManager.set(vm);
+
     return this.vegaManager;
   }
 

src/components/AddCategoryPopup.tsx

@@ -16,7 +16,6 @@ import { useCallback } from 'react';
 import { TrrackableCell } from '../cells';
 import { Options } from '../interactions/categories';
 import { useCategoryManager } from '../notebook/categories/manager';
-import { Nullable } from '../utils';
 
 type Props = {
   cell: TrrackableCell;
@@ -51,7 +50,7 @@ export function AddCategoryPopup({ cell }: Props) {
   }, [cm, activeCategory]);
 
   const changeActiveCategory = useCallback(
-    (category: Nullable<string>) => {
+    (category: string) => {
       cm.changeActiveCategory(category);
     },
     [cm]
@@ -111,7 +110,7 @@ export function AddCategoryPopup({ cell }: Props) {
               <Select
                 data={categoryList}
                 value={activeCategory?.name}
-                onChange={val => changeActiveCategory(val)}
+                onChange={val => changeActiveCategory(val || '')}
                 placeholder="Select a category to edit"
                 searchable
                 creatable

src/components/DropColumnsPopover.tsx

@@ -0,0 +1,84 @@
+import { CommandRegistry } from '@lumino/commands';
+import {
+  ActionIcon,
+  Button,
+  Center,
+  Checkbox,
+  Group,
+  Popover,
+  Stack,
+  Title,
+  Tooltip
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconX } from '@tabler/icons-react';
+import { useState } from 'react';
+import { TrrackableCell } from '../cells';
+import {
+  DropColumnCommandArgs,
+  OutputCommandIds
+} from '../cells/output/commands';
+import { useDatasetFromVegaView } from '../vegaL/helpers';
+
+type Props = {
+  cell: TrrackableCell;
+  commands: CommandRegistry;
+};
+
+export function DropColumnPopover({ cell, commands }: Props) {
+  const [opened, openHandlers] = useDisclosure(true);
+  const [selectedColumns, setSelectedColumns] = useState<string[]>([]);
+
+  const dataset = useDatasetFromVegaView(cell);
+
+  const columns = dataset.columns;
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={openHandlers.toggle}
+      withinPortal
+      withArrow
+      shadow="xl"
+    >
+      <Popover.Target>
+        <ActionIcon onClick={() => openHandlers.toggle()}>
+          <Tooltip.Floating label="Drop Column" offset={20}>
+            <IconX />
+          </Tooltip.Floating>
+        </ActionIcon>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <Center w={300} mt="sm" mb="md">
+          <Stack>
+            <Title order={4}>Drop Columns</Title>
+            <Checkbox.Group
+              value={selectedColumns}
+              onChange={setSelectedColumns}
+            >
+              <Group mt="xs">
+                {columns.map(c => (
+                  <Checkbox key={c} value={c} label={c} />
+                ))}
+              </Group>
+            </Checkbox.Group>
+            <Button
+              disabled={selectedColumns.length === 0}
+              onClick={async () => {
+                const args: DropColumnCommandArgs = {
+                  columnNames: selectedColumns
+                };
+
+                await commands.execute(OutputCommandIds.dropColumns, args);
+                setSelectedColumns([]);
+                openHandlers.close();
+              }}
+            >
+              Drop selected
+            </Button>
+          </Stack>
+        </Center>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}