Sharable link in table

Author: slinjhu

smoosense-gui/src/components/layout/SharePopover.tsx

@@ -5,7 +5,7 @@ import { setActiveTab } from '@/lib/features/ui/uiSlice'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import IconDialog from '@/components/common/IconDialog'
 import AssistantPopover from '@/lib/features/assistant/AssistantPopover'
-import SharePopover from './SharePopover'
+import TableSharePopover from './TableSharePopover'
 import { useAIQuickActions } from '@/lib/hooks/useAIQuickActions'
 import { Folder } from 'lucide-react'
 import DebugStateViewer from '@/components/debug/DebugStateViewer'
@@ -75,7 +75,7 @@ export default function TableNavbar() {
     >
       <FolderBrowserTabContent />
     </IconDialog>,
-    <SharePopover key="share" />,
+    <TableSharePopover key="share" />,
     ...(debugMode ? [<DebugStateViewer key="debug" />, <SqlHistoryViewer key="sql" />] : [])
   ]
 

smoosense-gui/src/components/layout/TableNavbar.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { Share2 } from 'lucide-react'
+import IconPopover from '@/components/common/IconPopover'
+import AutoLink from '@/components/common/AutoLink'
+import CopyToClipboard from '@/components/ui/CopyToClipboard'
+import { useAppSelector } from '@/lib/hooks'
+import { omit, pickBy, isEmpty, isNil } from 'lodash'
+
+function TableSharePopoverContent() {
+  const uiState = useAppSelector((state) => state.ui)
+
+  // Construct the URL
+  const constructShareUrl = () => {
+    const baseUrl = window.location.origin
+
+    // Excluded keys
+    const excludedKeys: Array<keyof typeof uiState> = ['baseUrl', 'sqlQuery', 'sqlResult']
+
+    // Filter out excluded keys and empty values
+    const filteredState = pickBy(
+      omit(uiState, excludedKeys),
+      (value) => {
+        if (isNil(value) || value === '') return false
+        if (Array.isArray(value) && isEmpty(value)) return false
+        return true
+      }
+    )
+
+    // Convert to URL params
+    const params = new URLSearchParams()
+    Object.entries(filteredState).forEach(([key, value]) => {
+      params.set(key, String(value))
+    })
+
+    const queryString = params.toString()
+    return `${baseUrl}/Table${queryString ? `?${queryString}` : ''}`
+  }
+
+  const shareUrl = constructShareUrl()
+
+  return (
+    <div className="space-y-3">
+      <h3 className="text-sm font-semibold">Share Table View</h3>
+      <div className="space-y-2">
+        <p className="text-xs text-muted-foreground">
+          Share this link to open the same table with current settings:
+        </p>
+        <div className="flex items-center gap-2">
+          <CopyToClipboard value={shareUrl} />
+          <AutoLink url={shareUrl} className="flex-1" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function TableSharePopover() {
+  return (
+    <IconPopover
+      icon={<Share2 />}
+      tooltip="Share"
+      contentClassName="w-96 p-4"
+      align="end"
+    >
+      <TableSharePopoverContent />
+    </IconPopover>
+  )
+}

smoosense-gui/src/components/layout/TableSharePopover.tsx

@@ -17,11 +17,15 @@ ModuleRegistry.registerModules([AllCommunityModule])
 export default function BoxPlot() {
   const dispatch = useAppDispatch()
   const { data, loading, error } = useBoxPlot()
-  const boxPlotColumns = useAppSelector((state) => state.ui.boxPlotColumns)
+  const boxPlotColumnsRaw = useAppSelector((state) => state.ui.boxPlotColumns)
   const boxPlotSortBy = useAppSelector((state) => state.ui.boxPlotSortBy)
   const boxPlotBreakdownColumn = useAppSelector((state) => state.ui.boxPlotBreakdownColumn)
-  const boxPlotSorting = useAppSelector((state) => state.ui.boxPlotSorting)
-  
+  const boxPlotSortingRaw = useAppSelector((state) => state.ui.boxPlotSorting)
+
+  // Ensure stable references for array dependencies
+  const boxPlotColumns = useMemo(() => boxPlotColumnsRaw || [], [boxPlotColumnsRaw])
+  const boxPlotSorting = useMemo(() => boxPlotSortingRaw || [], [boxPlotSortingRaw])
+
   const gridRef = useRef<AgGridReact>(null)
   const gridApiRef = useRef<GridApi | null>(null)
   const theme = useAGGridTheme()

smoosense-gui/src/lib/features/boxplot/BoxPlot.tsx

@@ -1,6 +1,6 @@
 [project]
 name = "smoosense"
-version = "0.1.11"
+version = "0.1.12"
 description = "Smoothly make sense of your large multi-modal datasets"
 readme = "README.md"
 requires-python = ">=3.9"

smoosense-py/pyproject.toml

@@ -5,7 +5,7 @@
 5:I[29906,[],""]
 6:I[84526,["265","static/chunks/6dc81886-0d3828b166e5e246.js","933","static/chunks/933-3fa934a1373c1443.js","769","static/chunks/769-38a429028a9a1959.js","496","static/chunks/496-a53c4c1abd70bd14.js","785","static/chunks/785-6f7a59e8bb062840.js","177","static/chunks/app/layout-bd16ff7615f710fc.js"],"ToasterProvider"]
 7:I[1377,[],"ClientPageRoot"]
-8:I[30185,["265","static/chunks/6dc81886-0d3828b166e5e246.js","652","static/chunks/4ec49466-f80a37a142905954.js","346","static/chunks/191d07e0-76e9a3be7a7ac399.js","933","static/chunks/933-3fa934a1373c1443.js","504","static/chunks/504-8d3ce4166e6afc06.js","283","static/chunks/283-55ed42cbbeebc1e9.js","496","static/chunks/496-a53c4c1abd70bd14.js","213","static/chunks/213-3bbec1abcf724313.js","73","static/chunks/app/DB/page-f21dbe5a9321129e.js"],"default"]
+8:I[30185,["265","static/chunks/6dc81886-0d3828b166e5e246.js","652","static/chunks/4ec49466-f80a37a142905954.js","346","static/chunks/191d07e0-76e9a3be7a7ac399.js","933","static/chunks/933-3fa934a1373c1443.js","504","static/chunks/504-4b974e9a6c86d74f.js","283","static/chunks/283-55ed42cbbeebc1e9.js","496","static/chunks/496-a53c4c1abd70bd14.js","213","static/chunks/213-3bbec1abcf724313.js","73","static/chunks/app/DB/page-df696376a8ff8004.js"],"default"]
 b:I[94484,[],"OutletBoundary"]
 d:I[78892,[],"AsyncMetadataOutlet"]
 f:I[94484,[],"ViewportBoundary"]
@@ -14,8 +14,8 @@ f:I[94484,[],"ViewportBoundary"]
 14:I[29872,[],""]
 :HL["/_next/static/media/4cf2300e9c8272f7-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
 :HL["/_next/static/media/93f479601ee12b01-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
-:HL["/_next/static/css/ef7a483229d374d8.css","style"]
-0:{"P":null,"b":"g6kx3zl2FiKNlVBPhqTBx","p":"","c":["","DB"],"i":false,"f":[[["",{"children":["DB",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/ef7a483229d374d8.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{}],["$","body",null,{"className":"__variable_188709 __variable_9a8899 antialiased","children":["$","$L2",null,{"attribute":"class","defaultTheme":"dark","enableSystem":true,"disableTransitionOnChange":true,"children":[["$","$L3",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","$L6",null,{}]]}]}]]}]]}],{"children":["DB",["$","$1","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","$L7",null,{"Component":"$8","searchParams":{},"params":{},"promises":["$@9","$@a"]}],null,["$","$Lb",null,{"children":["$Lc",["$","$Ld",null,{"promise":"$@e"}]]}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$Lf",null,{"children":"$L10"}],["$","meta",null,{"name":"next-size-adjust","content":""}]],["$","$L11",null,{"children":["$","div",null,{"hidden":true,"children":["$","$12",null,{"fallback":null,"children":"$L13"}]}]}]]}],false]],"m":"$undefined","G":["$14",[]],"s":false,"S":true}
+:HL["/_next/static/css/9a6891c384c6385b.css","style"]
+0:{"P":null,"b":"XoC0nX75lcWcAQ2n128xk","p":"","c":["","DB"],"i":false,"f":[[["",{"children":["DB",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/9a6891c384c6385b.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{}],["$","body",null,{"className":"__variable_188709 __variable_9a8899 antialiased","children":["$","$L2",null,{"attribute":"class","defaultTheme":"dark","enableSystem":true,"disableTransitionOnChange":true,"children":[["$","$L3",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","$L6",null,{}]]}]}]]}]]}],{"children":["DB",["$","$1","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","$L7",null,{"Component":"$8","searchParams":{},"params":{},"promises":["$@9","$@a"]}],null,["$","$Lb",null,{"children":["$Lc",["$","$Ld",null,{"promise":"$@e"}]]}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$Lf",null,{"children":"$L10"}],["$","meta",null,{"name":"next-size-adjust","content":""}]],["$","$L11",null,{"children":["$","div",null,{"hidden":true,"children":["$","$12",null,{"fallback":null,"children":"$L13"}]}]}]]}],false]],"m":"$undefined","G":["$14",[]],"s":false,"S":true}
 9:{}
 a:"$0:f:0:1:2:children:2:children:1:props:children:0:props:params"
 10:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]