Release 11.0.0 (#361)

## What's changed

* feat(vis): align visual appearance, rotate bar plot axis labels, add
vis hooks, remove raincloud plot
(#293)
* feat(vis-violin): violin vis subcategories and proper facets
(#331)
* feat: add console integration for Sentry
(#347)
* feat: add boxplot vis type
(#302)
* deps: upgrade deps to latest versions (20240611)
(#344)
* feat(vis): add column description to selects and pills
(#358)
* feat: lazy load plotly where possible
(#346)
* feat: add BlurredOverlay component
(#359)
* Fix: export vis color and fix y-axis label
(#360)

.github/workflows/build.yml

@@ -14,12 +14,15 @@ on:
         type: boolean
         default: false
   push:
+  pull_request_review:
+    types: [submitted]
 
 jobs:
   build:
+    if: ${{ github.event_name != 'pull_request_review' || github.event.review.state == 'approved' }}
     uses: datavisyn/github-workflows/.github/workflows/build-node-python.yml@main
     secrets: inherit
     with:
-      chromatic_enable: ${{ inputs.chromatic == true }}
+      chromatic_enable: ${{ inputs.chromatic == true || github.event.review.state == 'approved' }}
       cypress_enable: true
-      cypress_run_because_flag: ${{ inputs.cypress == true }}
+      cypress_run_because_flag: ${{ inputs.cypress == true || github.event.review.state == 'approved' }}

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.3.0.cjs

package.json

@@ -1,7 +1,7 @@
 {
   "name": "visyn_core",
   "description": "Core repository for datavisyn applications.",
-  "version": "10.2.0",
+  "version": "11.0.0",
   "author": {
     "name": "datavisyn GmbH",
     "email": "[email protected]",
@@ -76,53 +76,53 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.2",
-    "@emotion/react": "^11.9.3",
-    "@fortawesome/fontawesome-free": "^6.1.1",
-    "@fortawesome/fontawesome-svg-core": "^6.1.2",
-    "@fortawesome/free-regular-svg-icons": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mantine/code-highlight": "~7.6.1",
-    "@mantine/core": "~7.8.1",
-    "@mantine/dates": "~7.8.1",
-    "@mantine/dropzone": "~7.8.1",
-    "@mantine/form": "~7.8.1",
-    "@mantine/hooks": "~7.8.1",
-    "@mantine/modals": "~7.8.1",
-    "@mantine/notifications": "~7.8.1",
+    "@emotion/react": "^11.11.4",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@mantine/code-highlight": "~7.10.1",
+    "@mantine/core": "~7.10.1",
+    "@mantine/dates": "~7.10.1",
+    "@mantine/dropzone": "~7.10.1",
+    "@mantine/form": "~7.10.1",
+    "@mantine/hooks": "~7.10.1",
+    "@mantine/modals": "~7.10.1",
+    "@mantine/notifications": "~7.10.1",
     "@mantine/styles": "~6.0.21",
-    "@mantine/tiptap": "~7.8.1",
+    "@mantine/tiptap": "~7.10.1",
     "@mantine6/core": "npm:@mantine/core@~6.0.21",
-    "@sentry/react": "^8.5.0",
-    "@types/d3-hexbin": "^0.2.3",
-    "@types/d3v7": "npm:@types/d3@^7.4.0",
-    "@types/plotly.js-dist-min": "^2.3.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@types/react-plotly.js": "^2.5.0",
-    "arquero": "^5.2.0",
+    "@sentry/react": "^8.8.0",
+    "@types/d3-hexbin": "^0.2.5",
+    "@types/d3v7": "npm:@types/d3@^7.4.3",
+    "@types/plotly.js-dist-min": "^2.3.4",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-plotly.js": "^2.6.3",
+    "arquero": "^5.4.0",
     "d3-force-boundary": "^0.0.3",
     "d3-hexbin": "^0.2.2",
-    "d3v7": "npm:d3@^7.4.0",
+    "d3v7": "npm:d3@^7.9.0",
     "fit-curve": "^0.2.0",
     "html-to-image": "^1.11.11",
-    "i18next": "^22.4.15",
+    "i18next": "^23.11.5",
     "jstat": "^1.9.6",
-    "lineupjs": "4.10.0",
-    "lodash": "~4.17.20",
-    "plotly.js-dist-min": "~2.12.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
+    "lineupjs": "4.11.0",
+    "lodash": "~4.17.21",
+    "plotly.js-dist-min": "~2.33.0",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1",
     "react-highlight-words": "^0.20.0",
-    "react-plotly.js": "^2.5.1",
-    "react-spring": "^9.7.1",
-    "use-deep-compare-effect": "^1.8.0",
+    "react-plotly.js": "^2.6.0",
+    "react-spring": "^9.7.3",
+    "use-deep-compare-effect": "^1.8.1",
     "visyn_scripts": "^9.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.2",
-    "chromatic": "^11.3.0",
-    "cypress": "^13.2.0"
+    "@chromatic-com/storybook": "^1.5.0",
+    "chromatic": "^11.5.3",
+    "cypress": "^13.11.0"
   },
   "visyn": {
     "entries": {
@@ -135,5 +135,5 @@
       }
     }
   },
-  "packageManager": "yarn@4.1.0"
+  "packageManager": "yarn@4.3.0"
 }

requirements.txt

@@ -1,34 +1,44 @@
 # a2wsgi==1.6.0 # This WSIGMiddleware is not compatible with starlette_context
 alembic==1.13.1
 cachetools==5.3.3
-fastapi==0.110.1
+fastapi==0.111.0
 json-cfg==0.4.2
-openpyxl==3.1.2
-opentelemetry-api==1.24.0
-opentelemetry-exporter-otlp==1.24.0
-opentelemetry-exporter-prometheus==0.45b0
-opentelemetry-instrumentation-fastapi==0.45b0
-opentelemetry-instrumentation-httpx==0.45b0
-opentelemetry-instrumentation-logging==0.45b0
-opentelemetry-instrumentation-requests==0.45b0
-opentelemetry-instrumentation-sqlalchemy==0.45b0
-opentelemetry-instrumentation-system-metrics==0.45b0
-opentelemetry-sdk==1.24.0
-psycopg==3.1.18
+openpyxl==3.1.3
+opentelemetry-api==1.25.0
+opentelemetry-exporter-otlp==1.25.0
+opentelemetry-exporter-prometheus==0.46b0
+opentelemetry-instrumentation-fastapi==0.46b0
+opentelemetry-instrumentation-httpx==0.46b0
+opentelemetry-instrumentation-logging==0.46b0
+opentelemetry-instrumentation-requests==0.46b0
+opentelemetry-instrumentation-sqlalchemy==0.46b0
+opentelemetry-instrumentation-system-metrics==0.46b0
+opentelemetry-sdk==1.25.0
+psycopg==3.1.19
 psycopg2==2.9.9
-pydantic==1.10.14
+pydantic==1.10.15
 pyjwt[crypto]==2.8.0
 pytest-postgresql==6.0.0
 python-dateutil==2.9.0.post0
-python-multipart==0.0.9
-requests==2.32.0
+requests==2.32.3
 SQLAlchemy>=1.4.40,<=1.4.49
 starlette-context==0.3.6
-uvicorn[standard]==0.29.0
-# Extras from fastapi[all], which we can't install because it requires pydantic v2: https://github.com/tiangolo/fastapi/blob/f7e3559bd5997f831fb9b02bef9c767a50facbc3/pyproject.toml#L57-L67
-httpx>=0.23.0
-jinja2>=2.11.2
-itsdangerous>=1.1.0
-pyyaml>=5.3.1
-ujson>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0
-orjson>=3.2.1
+uvicorn[standard]==0.30.1
+# Extras from fastapi[all], which we can't install because it requires pydantic v2: https://github.com/tiangolo/fastapi/blob/master/pyproject.toml#L79-L103
+fastapi-cli >=0.0.4
+# # For the test client
+httpx >=0.27.0
+# For templates
+jinja2 >=2.11.2
+# For forms and file uploads
+python-multipart >=0.0.7
+# For Starlette's SessionMiddleware, not commonly used with FastAPI
+itsdangerous >=1.1.0
+# For Starlette's schema generation, would not be used with FastAPI
+pyyaml >=5.3.1
+# For UJSONResponse
+ujson >=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0
+# For ORJSONResponse
+orjson >=3.2.1
+# To validate email fields
+email_validator >=2.0.0

requirements_dev.txt

@@ -1,5 +1,5 @@
 black~=24.4.2
-pyright==1.1.356
+pyright==1.1.366
 pytest-runner~=6.0.1
-pytest~=8.2.1
-ruff==0.4.7
+pytest~=8.2.2
+ruff==0.4.8

src/app/VisynAppProvider.tsx

@@ -91,7 +91,14 @@ export function VisynAppProvider({
           Sentry.init({
             dsn: clientConfig.sentry_dsn,
             tunnel: clientConfig.sentry_proxy_to,
-            integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+            integrations: [
+              // Capture all console.error calls
+              Sentry.captureConsoleIntegration({ levels: ['error'] }),
+              // Instrument browser pageload/navigation performance
+              Sentry.browserTracingIntegration(),
+              // Enable replay integration
+              Sentry.replayIntegration(),
+            ],
 
             // Set tracesSampleRate to 1.0 to capture 100%
             // of transactions for performance monitoring.

src/components/BlurredOverlay.stories.tsx

@@ -0,0 +1,29 @@
+import { BlurredOverlay } from './BlurredOverlay';
+
+export default { title: 'components/BlurredOverlay', component: BlurredOverlay };
+
+export const Default = {
+  args: {
+    loading: true,
+  },
+};
+
+export const LoadingInProgress = {
+  args: {
+    loadingText: 'Loading...',
+    loading: true,
+    loaderProps: {
+      color: 'dvPrimary',
+    },
+    dataTestId: 'blurred-overlay-loading',
+  },
+};
+
+export const LoadingFinished = {
+  args: {
+    loading: false,
+    visible: true,
+    children: 'Hello World!',
+    dataTestId: 'blurred-overlay-finished',
+  },
+};

src/components/BlurredOverlay.tsx

@@ -0,0 +1,63 @@
+import { Box, LoadingOverlay, Loader, Stack } from '@mantine/core';
+import * as React from 'react';
+
+/**
+ * A blurred overlay that can be used to show a loading spinner and/or a loading text.
+ * The overlay is blurred and covers the whole screen or the parent element.
+ * Use the `visible` prop to show the overlay without the loading spinner and its children.
+ */
+export function BlurredOverlay({
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  children = <></>,
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  loadingText = <></>,
+  loaderProps = {
+    color: `dvGray.6`,
+  },
+  visible = false,
+  loading = false,
+  dataTestId,
+}: {
+  children?: React.ReactNode;
+  loadingText?: React.ReactNode;
+  loaderProps?: React.ComponentPropsWithoutRef<typeof Loader>;
+  loading?: boolean;
+  visible?: boolean;
+  dataTestId?: string;
+}) {
+  return (
+    <LoadingOverlay
+      className="mantine-BlurredOverlay-root"
+      overlayProps={{
+        blur: 2,
+      }}
+      // Set the zIndex explicitly to 200 (default 400) as it otherwise covers tooltips, popovers, ... (even within portals)
+      zIndex={200}
+      visible={visible || loading}
+      loaderProps={{
+        children: (
+          <Stack align="center" data-testid={dataTestId}>
+            {loading ? (
+              <>
+                <Loader {...loaderProps} />
+                {loadingText}
+              </>
+            ) : (
+              <Box
+                p="md"
+                style={{
+                  backgroundColor: 'rgba(255, 255, 255, 0.5)',
+                  borderRadius: '4px',
+                  display: 'grid',
+                  placeContent: 'center',
+                }}
+              >
+                {children}
+              </Box>
+            )}
+          </Stack>
+        ),
+      }}
+    />
+  );
+}

src/components/index.ts

@@ -1 +1,3 @@
+export * from './BlurredOverlay';
+export * from './HelpHoverCard';
 export * from './PermissionChooser';