Add LMPG visualisation to dashboard UI

.changeset/pretty-students-vanish.md

@@ -0,0 +1,9 @@
+---
+'rushdb-dashboard': minor
+'rushdb-website': minor
+'rushdb-docs': minor
+'@rushdb/javascript-sdk': minor
+'rushdb-core': minor
+---
+
+Add LMPG visualisation to dashboard UI

platform/dashboard/package.json

@@ -48,14 +48,13 @@
     "react-cool-virtual": "^0.7.0",
     "react-day-picker": "^8.8.2",
     "react-dom": "19.1.0",
-    "react-force-graph": "^1.45.4",
+    "react-force-graph-3d": "1.28.0",
+    "react-force-graph-2d": "1.28.0",
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "~7.41.0",
     "react-joyride": "^2.9.3",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
-    "three": "^0.171.0",
-    "three-spritetext": "^1.9.3",
     "yup": "^1.2.0"
   },
   "devDependencies": {
@@ -66,7 +65,6 @@
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
     "@types/react-window": "^1.8.5",
-    "@types/three": "^0.171.0",
     "@typescript-eslint/eslint-plugin": "^8.19.0",
     "@typescript-eslint/parser": "^8.19.0",
     "@vitejs/plugin-react-swc": "^3.3.0",

platform/dashboard/src/elements/Sheet.tsx

@@ -1,11 +1,6 @@
 import type { DialogPortalProps, DialogProps } from '@radix-ui/react-dialog'
 import type { VariantProps } from 'class-variance-authority'
-import type {
-  ComponentPropsWithoutRef,
-  ElementRef,
-  HTMLAttributes,
-  ReactNode
-} from 'react'
+import type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes, ReactNode } from 'react'
 
 import { Content, Overlay, Portal, Root, Trigger } from '@radix-ui/react-dialog'
 import { cva } from 'class-variance-authority'
@@ -27,9 +22,7 @@ const portalVariants = cva<{
   }
 })
 
-interface SheetPortalProps
-  extends DialogPortalProps,
-    VariantProps<typeof portalVariants> {}
+interface SheetPortalProps extends DialogPortalProps, VariantProps<typeof portalVariants> {}
 
 const SheetPortal = ({ children, position, ...props }: SheetPortalProps) => (
   <Portal {...props}>
@@ -40,19 +33,18 @@ const SheetPortal = ({ children, position, ...props }: SheetPortalProps) => (
 )
 SheetPortal.displayName = Portal.displayName
 
-const SheetOverlay = forwardRef<
-  ElementRef<typeof Overlay>,
-  ComponentPropsWithoutRef<typeof Overlay>
->(({ children, className, ...props }, ref) => (
-  <Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-fill2/60 transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
+const SheetOverlay = forwardRef<ElementRef<typeof Overlay>, ComponentPropsWithoutRef<typeof Overlay>>(
+  ({ children, className, ...props }, ref) => (
+    <Overlay
+      className={cn(
+        'bg-fill2/60 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 transition-all duration-100',
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  )
+)
 SheetOverlay.displayName = Overlay.displayName
 
 const sheetVariants = cva<{
@@ -151,41 +143,22 @@ const SheetContent = forwardRef<ElementRef<typeof Content>, DialogContentProps>(
   ({ children, className, position, size, ...props }, ref) => (
     <SheetPortal position={position}>
       <SheetOverlay />
-      <Content
-        className={cn(sheetVariants({ position, size }), className)}
-        ref={ref}
-        {...props}
-      >
+      <Content className={cn(sheetVariants({ position, size }), className)} ref={ref} {...props}>
         {children}
       </Content>
     </SheetPortal>
   )
 )
 SheetContent.displayName = Content.displayName
 
-const SheetHeader = ({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className
-    )}
-    {...props}
-  />
+const SheetHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
 )
 SheetHeader.displayName = 'SheetHeader'
 
-const SheetFooter = ({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>) => (
+const SheetFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className
-    )}
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
     {...props}
   />
 )
@@ -197,17 +170,11 @@ export type TSheetProps = {
 } & DialogProps &
   VariantProps<typeof sheetVariants>
 
-export function Sheet({
-  children,
-  position = 'right',
-  size = 'lg',
-  trigger,
-  ...props
-}: TSheetProps) {
+export function Sheet({ children, position = 'right', size = 'lg', trigger, ...props }: TSheetProps) {
   return (
     <Root {...props}>
       {trigger && <Trigger asChild>{trigger}</Trigger>}
-      <SheetContent position={position} size={size}>
+      <SheetContent position={position} size={size} aria-describedby={undefined}>
         {children}
       </SheetContent>
     </Root>