fix: fixed minor UI issues

visdesignlab · Nov 9, 2023 · bd4c4db · bd4c4db
1 parent 854bcd0
commit bd4c4db
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 66 deletions.
diff --git a/examples/test_ext_widget.ipynb b/examples/test_ext_widget.ipynb
@@ -179,13 +179,13 @@
    "metadata": {
     "__GENERATED_DATAFRAMES__": "ᯢ粠 ",
     "__has_persist_output": true,
-    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰څĬրᦦϐɐୠ⁮೤ƀàᆪᄠ㥩Ⲛ¸匉₃બ穗≪2攩кᙼ䉅擉桖㖄⇫䙏㽡愠㑀栨怼䠤傡%房☠ᮬ᡻䑁ᚍ没瀡㔰㔠ʖ㥀ǔÚ紣⏉䤺促是⍸惀Ēいⴠප䩩䛬ン姸稚{ౕ塹Ȯ䌤䍷ⵤႹ䐨纡ૠඎ⽤ޕ䏢Þ綞獪ᴧ䶀䞌䒡悺あႋG䀡泖瘑䄓㩖ჂᝏϚ೶幉ᓦ切⡱ᓤ䰢ṕࢲ䥮擂ㅠ䲩㐿㔶痀偐਴䗁㴋ᛲ⑨惩㋸㉦䙀⁪斑␸฿ف䠴㯩⊀墌✻䐀Ѣឧ䀢崢悩朆䧑㤾ᣇ傩啚䙮楉憰  "
+    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰໠ᬠⰥ〸斡ణᠫ‣䆠☽䞃唂ʑ⊠͑ᡈࢁ䌹硿䟦ैkᑄᄉ㐨䮲凋佩嗛᜾㸢䉠ð䀡媔࿹ဩ™+坨ఠ㜸ヷࡣ䵹姠ƊῊ3凩-倥樋瘌う䐶ẮS䦃ʠϩ䂰¬㐦̶Ԡೡ䫠恐⠸稠嬸◇Ѥ০ҡ噺䑁榨僝㸥䀺慹搑眤䈡㺚ƶ慇ܲ悡欩ǣᮥ䡀䬠➠ǥ㈥熡愖㙁≮᭛❔Ɫ⌅䆁擒ࡑ磤ȴᬯʣ٥жႄ硸㮦⡡䄨ئ⎀淖䥜⌤▤ᇂᙑĜ୓䕄憐夹०冈敓۠燘幟ࡄ࡜K俠઼⺉଴ℂજㆨ◈⓭Ჰ䔠 "
    },
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "97796452ee3d4c5e86d56d8530509c83",
+       "model_id": "9a7c1252107644a28f84e0aee5c8e59c",
        "version_major": 2,
        "version_minor": 0
       },
@@ -199,10 +199,35 @@
     }
    ],
    "source": [
-    "a = PR.PersistChart(chart, data=source) \n",
+    "# a = PR.PersistChart(chart, data=source) \n",
+    "a = PR.PersistTable(data=source) \n",
     "a"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "173ed668-8a61-4990-97f1-f84640e5df50",
+   "metadata": {
+    "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰ೠ⌠昤煠أఠ瀫⑍Ǥƀ໫垂壠ᖩ燘΂䵺ᗊㆠ䱄倡ᙰ䡣厃扊⹿્㵦ᚍᷚ簔ठ͢&怰怨挿≠ኤР᝽ၐüメ湁˛㾟%䒞吠৥撠۰̉瘔了⑼Ởᡐ掃ʠϩ䂰椌ⱌፕ)䚥䑅兑琡㙐᭣エწण⧑ࡢ㌰ᆚ掋U䋐栳欯Т純͍ౣ㸭䄣夲Φ㔫ၠ㘠传Ϊ搷振䈌池䕽皮䎓⫸䉩䮫䷠扳ඨ䳦婊┡㊴䔪㙃≱ᑚ଩䃡塔ỡ完ቤ䘬䤨⍤Ⲃȥ噗ቩ䄀вಡ⃰琦ᦪ悐尾ྠႀ䈤䀪琫ˇ㮪⋦擘䊿๱ঊ⥓⃄ᅠ  "
+   },
+   "outputs": [
+    {
+     "ename": "NameError",
+     "evalue": "name 'persist_df_1' 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[5], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m \u001b[43mpersist_df_1\u001b[49m\u001b[38;5;241m.\u001b[39msort_values(\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mMiles_per_Gallon\u001b[39m\u001b[38;5;124m\"\u001b[39m, ascending\u001b[38;5;241m=\u001b[39m\u001b[38;5;28;01mTrue\u001b[39;00m)\n",
+      "\u001b[0;31mNameError\u001b[0m: name 'persist_df_1' is not defined"
+     ]
+    }
+   ],
+   "source": [
+    "persist_df_1.sort_values(\"Miles_per_Gallon\", ascending=True)"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -215,23 +240,12 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
+   "execution_count": null,
    "id": "2def3ac5-dd5a-4bdd-8003-9fe860ec7c4e",
    "metadata": {
     "trrack_graph": "ᯡ࠽䈌ʀ匦㢠⹰Ǡ㌡䘣ᢀ瘢㢀ୠᆠᆩⲨ˯坈䓍…ㇴ慀ᬺ仨ࢃ)䆥ैkᑄᄉ夒ર勋⽱䖻ގ帣䍤ð䀡娓ᆨ㵀ॢȠநƸᢀ眰䅽忒Ơ˼リ$熒‣㐡㨦䍇ᦲᦠ憢ఁ壡‡犀⑎㹞5䧢⚁⊓熹砦{భ侬∧挤䋴淤ၹ䑨䆹᫠ඉⰂܗ䉂Þ͡歶ྣ΀䔊䒡恺ㄕᬠ➠ǵ㼇熠挖㙁拎潧Ὑ夤्Ꮿᖵ㇈摤㳒⹓ں䡍⒂䊺䧈ᙙ⥡䃐簩฀淖椲⌡╶凂ṑ¢欻䍄悐ɑ๤傈㨣ӥよ䴯࿢ࡤ漦%㤤ⅳ巫ᆂ੼㥠◉䔖஦┉ᓱ䠠 "
    },
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "[]"
-      ]
-     },
-     "execution_count": 5,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "params = getattr(chart, \"params\", [])\n",
     "pv = filter(lambda x: hasattr(x, \"views\"), params)\n",

diff --git a/persist_ext/internals/widgets/base/output_processor.py b/persist_ext/internals/widgets/base/output_processor.py
@@ -341,19 +341,13 @@ def _apply_edit_cell(self, interaction, data, chart):
     def _apply_sortby_column(self, interaction, data, chart):
         sort_status = interaction["sortStatus"]
 
-        if len(sort_status) == 0:
+        if len(sort_status) > 0:
             data = data.sort_values(
-                by=self.widget.id_column,
-                ascending=True,
-                key=(lambda x: x.astype("Float64") if x.apply(is_float).all() else x),
+                list(map(lambda x: x["id"], sort_status)),
+                ascending=list(map(lambda x: not x["desc"], sort_status)),
             )
 
-        data = data.sort_values(
-            list(map(lambda x: x["id"], sort_status)),
-            ascending=list(map(lambda x: not x["desc"], sort_status)),
-        )
-
-        self.widget.df_sorting_state = sort_status
+            self.widget.df_sorting_state = sort_status
 
         return data, chart
 

diff --git a/persist_ext/internals/widgets/base/widget_with_data.py b/persist_ext/internals/widgets/base/widget_with_data.py
@@ -196,7 +196,7 @@ def _on_data_update(self, change):
 
             self.df_category_columns = categorical_column_record
 
-            if len(self.df_sorting_state) == 0 or len(self.interactions) == 0:
+            if len(self.interactions) == 1:
                 self.df_sorting_state = []
                 data = data.sort_values(
                     by=self.id_column,

diff --git a/persist_ext/internals/widgets/base/widget_with_interactions.py b/persist_ext/internals/widgets/base/widget_with_interactions.py
@@ -122,6 +122,8 @@ def _apply_interactions(self, interactions, data, chart):
                     fn = getattr(self.output, fn_name)
 
                     data, chart = fn(interaction, data, chart)
+                    if _type != "sortby_column" and len(self.df_sorting_state) > 0:
+                        print("Was sorted")
 
                     self.cache.save(interaction, data, chart)
                 else:

diff --git a/src/widgets/components/DataframeNameBadge.tsx b/src/widgets/components/DataframeNameBadge.tsx
@@ -5,6 +5,7 @@ import {
   Group,
   ThemeIcon,
   Tooltip,
+  Text,
   createStyles
 } from '@mantine/core';
 import { GenerationRecord, postCreationAction } from '../utils/dataframe';
@@ -46,7 +47,7 @@ export function DataframeNameBadge({
   cell,
   dfRecord,
   onDelete,
-  tooltip = false,
+  tooltip = true,
   actions = {}
 }: Props) {
   const { classes } = useStyles();
@@ -126,6 +127,7 @@ export function DataframeNameBadge({
             <PersistActionIconButton
               color="blue"
               tooltipProps={{
+                withinPortal: true,
                 label: 'Delete dataframe'
               }}
               onClick={() => {
@@ -138,18 +140,16 @@ export function DataframeNameBadge({
         </Button.Group>
       }
     >
-      {dfRecord.dfName}
+      {tooltip ? (
+        <Tooltip label={dfRecord.dfName}>
+          <Text>{dfRecord.dfName}</Text>
+        </Tooltip>
+      ) : (
+        dfRecord.dfName
+      )}
     </Badge>
   );
 
-  if (tooltip) {
-    return (
-      <Tooltip zIndex={10000000} label={dfRecord.dfName}>
-        {badge}
-      </Tooltip>
-    );
-  }
-
   return badge;
 }
 

diff --git a/src/widgets/header/AssignCategoryPopover.tsx b/src/widgets/header/AssignCategoryPopover.tsx
@@ -32,8 +32,6 @@ export function AssignCategoryPopover({ cell }: Props) {
     'df_category_columns'
   );
 
-  console.log(hasSelections);
-
   const { categories, selectedCategory, setSelectedCategory, opts } =
     useCategoryOptions(categoriesColumnRecord, true);
 

diff --git a/src/widgets/header/EditCategoryPopover.tsx b/src/widgets/header/EditCategoryPopover.tsx
@@ -16,7 +16,8 @@ import {
   Switch,
   TextInput,
   Paper,
-  ActionIcon
+  ActionIcon,
+  CloseButton
 } from '@mantine/core';
 import {
   getHotkeyHandler,
@@ -193,10 +194,14 @@ export function EditCategoryPopover({ cell }: Props) {
       <Popover.Dropdown>
         <Center mt="sm" mb="md">
           <Stack>
-            <Title size="xs" order={3}>
-              Edit Categories
-            </Title>
+            <Group position="apart">
+              <Title size="xs" order={3}>
+                Edit Categories
+              </Title>
+              <CloseButton color="red" onClick={() => openHandlers.close()} />
+            </Group>
             {CategorySelect}
+
             {selectedCategory && (
               <>
                 <Divider />
@@ -362,6 +367,7 @@ export function EditCategoryPopover({ cell }: Props) {
                       placeholder="New option value"
                       label="Enter value for new option here"
                       value={newOption.value}
+                      autoFocus
                       onChange={e => setNewOptionValue(e.currentTarget.value)}
                       onKeyDown={getHotkeyHandler([
                         [

diff --git a/src/widgets/interactive_table/ColumnHeader.tsx b/src/widgets/interactive_table/ColumnHeader.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { MRT_Column } from 'mantine-react-table';
 import { DataPoint } from './helpers';
-import { Box, TextInput } from '@mantine/core';
+import { Text, Box, TextInput, Tooltip } from '@mantine/core';
 import { getHotkeyHandler, useValidatedState } from '@mantine/hooks';
 import { TrrackableCell } from '../../cells';
 import { PersistCommands } from '../../commands';
@@ -57,6 +57,10 @@ export function ColumnHeader({ column, allColumns, cell }: Props) {
     />
   ) : (
     <Box
+      sx={{
+        cursor: 'initial'
+      }}
+      w="100%"
       onClick={e => {
         e.stopPropagation();
         e.preventDefault();
@@ -67,7 +71,11 @@ export function ColumnHeader({ column, allColumns, cell }: Props) {
         setIsEditing(true);
       }}
     >
-      {column.id}
+      <Tooltip label={column.id} withinPortal>
+        <Text w="min-content" sx={{ cursor: 'text' }}>
+          {column.id}
+        </Text>
+      </Tooltip>
     </Box>
   );
 }
diff --git a/src/widgets/interactive_table/DatatableComponent.tsx b/src/widgets/interactive_table/DatatableComponent.tsx
@@ -245,28 +245,26 @@ export function DatatableComponent({ cell }: Props) {
     renderColumnActionsMenuItems: ({ internalColumnMenuItems, column }) => {
       return (
         <>
-          {column.id !== ID_COLUMN && (
+          {![ID_COLUMN, '__annotations'].includes(column.id) && (
             <DTypeContextMenu column={column} cell={cell} />
           )}
-          {column.id !== ID_COLUMN && (
-            <>
-              <Menu.Item
-                icon={<IconTrash />}
-                onClick={() => {
-                  if (column.id === ID_COLUMN) {
-                    return;
-                  }
-                  window.Persist.Commands.execute(PersistCommands.dropColumns, {
-                    cell,
-                    columns: [column.id]
-                  });
-                }}
-              >
-                Drop column '{column.id}'
-              </Menu.Item>
-            </>
+          {![ID_COLUMN, '__annotations'].includes(column.id) && (
+            <Menu.Item
+              icon={<IconTrash />}
+              onClick={() => {
+                if (column.id === ID_COLUMN) {
+                  return;
+                }
+                window.Persist.Commands.execute(PersistCommands.dropColumns, {
+                  cell,
+                  columns: [column.id]
+                });
+              }}
+            >
+              Drop column '{column.id}'
+            </Menu.Item>
           )}
-          {![ID_COLUMN].includes(column.id) && (
+          {![ID_COLUMN, '__annotations'].includes(column.id) && (
             <>
               <RenameTableColumnPopover
                 open={open}
@@ -277,7 +275,7 @@ export function DatatableComponent({ cell }: Props) {
               />
             </>
           )}
-          {column.id !== ID_COLUMN && <Divider />}
+          {![ID_COLUMN, '__annotations'].includes(column.id) && <Divider />}
           {internalColumnMenuItems}
         </>
       );
@@ -325,11 +323,15 @@ export function DatatableComponent({ cell }: Props) {
     // Sorting
     manualSorting: true,
     enableMultiSort: true,
+    enableSortingRemoval: false,
     mantineTableHeadCellProps: {
       sx: () => ({
         '& .mantine-TableHeadCell-Content-Labels': {
           justifyContent: 'space-between',
           width: '100%'
+        },
+        '& .mantine-TableHeadCell-Content-Wrapper': {
+          flex: 1
         }
       })
     },

diff --git a/src/widgets/trrack/Trrack.tsx b/src/widgets/trrack/Trrack.tsx
@@ -93,7 +93,7 @@ export function Trrack({ cell, setCurrentNodeTarget, scroll }: Props) {
           manager.trrack.to(nodeId);
         },
         bookmarkNode: null,
-        labelWidth: 100,
+        labelWidth: 500,
         verticalSpace: 25,
         marginTop: 25,
         gutter: 25,