Release 10.0.0 (#270)

## What's changed

* feat: add possibility to insert score column after given column in
ranking (#262)
* refactor: rename labels of filter buttons
(#266)
* fix(vis): duplicate option values in scatterplot sidebar select
(#261)
* chore: remove usage of flask
(#257)
* fix(vis): violin vis selection events
(#267)

Makefile

@@ -3,7 +3,7 @@ pkg_src = visyn_core
 
 black = black --line-length 140 $(pkg_src) setup.py
 pyright = pyright $(pkg_src) setup.py
-ruff = ruff $(pkg_src) setup.py --line-length 140 --select E,W,F,N,I,C,B,UP,PT,SIM,RUF --ignore E501,C901,B008
+ruff = ruff check $(pkg_src) setup.py --line-length 140 --select E,W,F,N,I,C,B,UP,PT,SIM,RUF --ignore E501,C901,B008
 
 .PHONY: start  ## Start the development server
 start:
@@ -26,7 +26,7 @@ check-format:
 
 .PHONY: lint  ## Run flake8 and pyright
 lint:
-	$(ruff) --format=github
+	$(ruff) --output-format=github
 	$(pyright)
 
 .PHONY: test  ## Run tests

package.json

@@ -1,7 +1,7 @@
 {
   "name": "visyn_core",
   "description": "Core repository for datavisyn applications.",
-  "version": "9.2.2",
+  "version": "10.0.0",
   "author": {
     "name": "datavisyn GmbH",
     "email": "[email protected]",
@@ -114,7 +114,7 @@
     "react-plotly.js": "^2.5.1",
     "react-spring": "^9.7.1",
     "use-deep-compare-effect": "^1.8.0",
-    "visyn_scripts": "^8.0.0"
+    "visyn_scripts": "^9.0.0"
   },
   "devDependencies": {
     "chromatic": "^6.19.9",

requirements.txt

@@ -1,37 +1,34 @@
 # a2wsgi==1.6.0 # This WSIGMiddleware is not compatible with starlette_context
-alembic==1.11.1
-cachetools==5.3.2
-fastapi==0.101.1
-Flask[async]>=2.1.0,<=2.2.2
+alembic==1.13.1
+cachetools==5.3.3
+fastapi==0.110.1
 json-cfg==0.4.2
 openpyxl==3.1.2
-opentelemetry-api==1.19.0
-opentelemetry-exporter-otlp==1.19.0
-opentelemetry-exporter-prometheus==1.12.0rc1
-opentelemetry-instrumentation-fastapi==0.40b0
-opentelemetry-instrumentation-httpx==0.40b0
-opentelemetry-instrumentation-logging==0.40b0
-opentelemetry-instrumentation-requests==0.40b0
-opentelemetry-instrumentation-sqlalchemy==0.40b0
-opentelemetry-instrumentation-system-metrics==0.40b0
-opentelemetry-sdk==1.19.0
-psycopg==3.1.9
-psycopg2==2.9.6
-pydantic==1.10.11
+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
+psycopg2==2.9.9
+pydantic==1.10.14
 pyjwt[crypto]==2.8.0
-pytest-postgresql==5.0.0
+pytest-postgresql==6.0.0
 python-dateutil==2.8.2
-python-multipart==0.0.6
+python-multipart==0.0.9
 requests==2.31.0
 SQLAlchemy>=1.4.40,<=1.4.49
 starlette-context==0.3.6
-uvicorn[standard]==0.23.1
+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
-# pin werkzeug version because the new major version 3.0.0 breaks our applications on Oct 2 2023; the version can be removed later again when the other packages support v3.0.0
-werkzeug==2.3.7

requirements_dev.txt

@@ -1,5 +1,5 @@
-black~=22.12.0
-pyright==1.1.308
-pytest-runner~=6.0.0
-pytest~=7.2.0
-ruff==0.0.218
+black~=24.3.0
+pyright==1.1.356
+pytest-runner~=6.0.1
+pytest~=8.1.1
+ruff==0.3.5

src/idtype/IDTypeManager.ts

@@ -113,7 +113,7 @@ export class IDTypeManager {
    */
   public searchMapping = (idType: IDType, pattern: string, toIDType: string | IDType, limit = 10): Promise<{ match: string; to: string }[]> => {
     const target = this.resolveIdType(toIDType);
-    return appContext.getAPIJSON(`/idtype/${idType.id}/${target.id}/search`, { q: pattern, limit });
+    return appContext.getAPIJSON(`/idtype/${idType.id}/${target.id}/search/`, { q: pattern, limit });
   };
 
   /**
@@ -140,7 +140,7 @@ export class IDTypeManager {
     if (idType.id === target.id) {
       return names;
     }
-    return IDType.chooseRequestMethod(`/idtype/${idType.id}/${target.id}`, { q: names, mode: 'first' });
+    return IDType.chooseRequestMethod(`/idtype/${idType.id}/${target.id}/`, { q: names, mode: 'first' });
   };
 
   public mapNameToName = async (idType: IDType, names: string[], toIDtype: IDTypeLike): Promise<string[][]> => {
@@ -149,7 +149,7 @@ export class IDTypeManager {
     // if(idType.id === target.id) {
     //   return names.map((name) => [name]);
     // }
-    return IDType.chooseRequestMethod(`/idtype/${idType.id}/${target.id}`, { q: names });
+    return IDType.chooseRequestMethod(`/idtype/${idType.id}/${target.id}/`, { q: names });
   };
 
   public findMappablePlugins = (target: IDType, all: IPluginDesc[]) => {

src/ranking/overrides/DatavisynTaggle.tsx

@@ -1,4 +1,4 @@
-import { IRankingDump, Ranking, Taggle, DataProvider, LocalDataProvider, TaggleRenderer } from 'lineupjs';
+import { Column, DataProvider, IRankingDump, LocalDataProvider, Ranking, Taggle, TaggleRenderer } from 'lineupjs';
 import castArray from 'lodash/castArray';
 import { IScoreColumnDesc, IScoreResult } from '../score/interfaces';
 
@@ -37,8 +37,11 @@ export class DatavisynTaggle<T extends DataProvider = LocalDataProvider> extends
    * Creates a score column in the supplied ranking. Uses the default ranking if none is supplied.
    *
    * @param desc The score description
+   * @param options Options for the score creation (optional)
    */
-  createScoreColumn(desc: IScoreResult, ranking = this.ranking) {
+  createScoreColumn(desc: IScoreResult, options?: { ranking?: Ranking; insertAfter?: Column }) {
+    const ranking = options?.ranking || this.ranking;
+
     if (!ranking) {
       throw new Error('No ranking found');
     }
@@ -55,6 +58,9 @@ export class DatavisynTaggle<T extends DataProvider = LocalDataProvider> extends
 
       const col = this.data.create(colDesc);
 
+      if (options?.insertAfter) {
+        return ranking.insertAfter(col, options.insertAfter);
+      }
       return ranking.push(col);
     });
   }

src/security/LoginUtils.ts

@@ -1,5 +1,4 @@
-import { appContext } from '../base/AppContext';
-import { userSession, UserSession } from './UserSession';
+import { userSession } from './UserSession';
 import { IUser, IUserStore } from './interfaces';
 import { Ajax } from '../base/ajax';
 
@@ -13,7 +12,7 @@ export class LoginUtils {
    */
   static login(username: string, password: string) {
     userSession.reset();
-    const r = Ajax.send('/login', { username, password }, 'post').then((user) => {
+    const r = Ajax.send('/api/login', { username, password }, 'post').then((user) => {
       userSession.login(user);
       return user;
     });
@@ -31,7 +30,7 @@ export class LoginUtils {
    * @return {Promise<any>} when done also from the server side
    */
   static logout(): Promise<any> {
-    return Ajax.send('/logout', {}, 'post')
+    return Ajax.send('/api/logout', {}, 'post')
       .then((r) => {
         userSession.logout(r);
       })
@@ -43,7 +42,7 @@ export class LoginUtils {
   }
 
   static loggedInAs(): Promise<IUser> {
-    return Ajax.send('/loggedinas', {}, 'POST').then((user: string | IUser) => {
+    return Ajax.send('/api/loggedinas', {}, 'POST').then((user: string | IUser) => {
       if (typeof user !== 'string' && user.name) {
         return user;
       }

src/utils/XlsxUtils.ts

@@ -21,21 +21,21 @@ export class XlsxUtils {
     const data = new FormData();
     data.set('file', file);
 
-    return appContext.sendAPI('/tdp/xlsx/to_json', data, 'POST');
+    return appContext.sendAPI('/xlsx/to_json/', data, 'POST');
   }
 
   static xlsx2jsonArray(file: File): Promise<any[][]> {
     const data = new FormData();
     data.set('file', file);
 
-    return appContext.sendAPI('/tdp/xlsx/to_json_array', data, 'POST');
+    return appContext.sendAPI('/xlsx/to_json_array/', data, 'POST');
   }
 
   static json2xlsx(file: IXLSXJSONFile): Promise<Blob> {
-    return Ajax.send(appContext.api2absURL('/tdp/xlsx/from_json'), file, 'POST', 'blob', 'application/json');
+    return Ajax.send(appContext.api2absURL('/xlsx/from_json/'), file, 'POST', 'blob', 'application/json');
   }
 
   static jsonArray2xlsx(file: any[][]): Promise<Blob> {
-    return Ajax.send(appContext.api2absURL('/tdp/xlsx/from_json_array'), file, 'POST', 'blob', 'application/json');
+    return Ajax.send(appContext.api2absURL('/xlsx/from_json_array/'), file, 'POST', 'blob', 'application/json');
   }
 }

src/vis/sidebar/FilterButtons.tsx

@@ -8,21 +8,21 @@ interface FilterButtonsProps {
 
 export function FilterButtons({ callback }: FilterButtonsProps) {
   return (
-    <Input.Wrapper label="Filter">
+    <Input.Wrapper label="Selected points">
       <Button.Group>
-        <Tooltip label="Filters any point not currently selected">
+        <Tooltip label="Keep selected points, remove other points">
           <Button style={{ flexGrow: 1 }} p={0} variant="default" onClick={() => callback(EFilterOptions.IN)}>
-            {EFilterOptions.IN}
+            Keep
           </Button>
         </Tooltip>
-        <Tooltip label="Filters all currently selected points">
+        <Tooltip label="Remove selected points, keep other points">
           <Button style={{ flexGrow: 1 }} p={0} variant="default" onClick={() => callback(EFilterOptions.OUT)}>
-            {EFilterOptions.OUT}
+            Remove
           </Button>
         </Tooltip>
-        <Tooltip label="Removes any existing filter">
+        <Tooltip label="Clear all point filters">
           <Button style={{ flexGrow: 1 }} p={0} variant="default" onClick={() => callback(EFilterOptions.CLEAR)}>
-            {EFilterOptions.CLEAR}
+            Clear
           </Button>
         </Tooltip>
       </Button.Group>

src/vis/sidebar/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import { CloseButton, Combobox, Input, Pill, PillsInput, Stack, Tooltip, useCombobox, Text, Group } from '@mantine/core';
+import { CloseButton, Combobox, Input, Pill, PillsInput, Stack, Tooltip, useCombobox, Text, Group, ScrollArea } from '@mantine/core';
 import * as React from 'react';
 import { ColumnInfo, EColumnTypes, VisColumn } from '../interfaces';
 
@@ -26,9 +26,9 @@ export function MultiSelect({
     callback(currentSelected.filter((s) => s.id !== id));
   };
 
-  const handleValueSelect = (name: string) => {
-    const itemToAdd = filteredColumns.find((c) => c.info.name === name);
-    currentSelected.find((c) => c.name === name) ? handleValueRemove(itemToAdd.info.id) : callback([...currentSelected, itemToAdd.info]);
+  const handleValueSelect = (id: string) => {
+    const itemToAdd = filteredColumns.find((c) => c.info.id === id);
+    currentSelected.find((c) => c.id === id) ? handleValueRemove(itemToAdd.info.id) : callback([...currentSelected, itemToAdd.info]);
   };
 
   const handleValueRemoveAll = () => {
@@ -39,7 +39,7 @@ export function MultiSelect({
     .filter((c) => !currentSelected.map((s) => s.id).includes(c.info.id))
     .map((item) => {
       return (
-        <Combobox.Option value={item.info.name} key={item.info.id}>
+        <Combobox.Option value={item.info.id} key={item.info.id}>
           <Tooltip
             withinPortal
             withArrow
@@ -121,7 +121,11 @@ export function MultiSelect({
       </Combobox.DropdownTarget>
 
       <Combobox.Dropdown>
-        <Combobox.Options>{options.length === 0 ? <Combobox.Empty>All options selected</Combobox.Empty> : options}</Combobox.Options>
+        <Combobox.Options>
+          <ScrollArea.Autosize type="scroll" mah={200}>
+            {options.length === 0 ? <Combobox.Empty>All options selected</Combobox.Empty> : options}
+          </ScrollArea.Autosize>
+        </Combobox.Options>
       </Combobox.Dropdown>
     </Combobox>
   );

src/vis/stories/Iris.stories.tsx

@@ -22,7 +22,7 @@ const Template: ComponentStory<typeof Vis> = (args) => {
   return (
     <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
       <div style={{ width: '70%', height: '80%' }}>
-        <Vis {...args} columns={columns} selected={selection} selectionCallback={setSelection} />
+        <Vis {...args} setExternalConfig={() => {}} columns={columns} selected={selection} selectionCallback={setSelection} />
       </div>
     </div>
   );

src/vis/stories/Vis/Bar/BarRandom.stories.tsx

@@ -123,7 +123,7 @@ const Template: ComponentStory<typeof Vis> = (args) => {
     <VisProvider>
       <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
         <div style={{ width: '70%', height: '80%' }}>
-          <Vis {...args} columns={columns} />
+          <Vis {...args} setExternalConfig={() => {}} columns={columns} />
         </div>
       </div>
     </VisProvider>

src/vis/stories/Vis/Correlation/CorrelationIris.stories.tsx

@@ -26,7 +26,7 @@ const Template: ComponentStory<typeof Vis> = (args) => {
     <VisProvider>
       <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
         <div style={{ width: '70%', height: '80%' }}>
-          <Vis {...args} columns={columns} selected={selection} selectionCallback={setSelection} />
+          <Vis {...args} setExternalConfig={() => {}} columns={columns} selected={selection} selectionCallback={setSelection} />
         </div>
       </div>
     </VisProvider>

src/vis/stories/Vis/Heatmap/HeatmapRandom.stories.tsx

@@ -129,7 +129,7 @@ const Template: ComponentStory<typeof Vis> = (args) => {
     <VisProvider>
       <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
         <div style={{ width: '70%', height: '80%' }}>
-          <Vis {...args} selected={selected} selectionCallback={setSelected} columns={columns} />
+          <Vis {...args} setExternalConfig={() => {}} selected={selected} selectionCallback={setSelected} columns={columns} />
         </div>
       </div>
     </VisProvider>

src/vis/stories/Vis/Hexbin/HexbinRandom.stories.tsx

@@ -100,7 +100,7 @@ const Template: ComponentStory<typeof Vis> = (args) => {
     <VisProvider>
       <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
         <div style={{ width: '70%', height: '80%' }}>
-          <Vis {...args} columns={columns} />
+          <Vis {...args} setExternalConfig={() => {}} columns={columns} />
         </div>
       </div>
     </VisProvider>

src/vis/stories/Vis/Raincloud/RaincloudRandom.stories.tsx

@@ -132,7 +132,7 @@ const Template: ComponentStory<typeof Vis> = (args) => {
     <VisProvider>
       <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
         <div style={{ width: '70%', height: '80%' }}>
-          <Vis {...args} columns={columns} selected={selected} selectionCallback={setSelected} />
+          <Vis {...args} setExternalConfig={() => {}} columns={columns} selected={selected} selectionCallback={setSelected} />
         </div>
       </div>
     </VisProvider>

src/vis/stories/Vis/Scatter/ScatterRandom.stories.tsx

@@ -111,7 +111,7 @@ const Template: ComponentStory<typeof Vis> = (args) => {
     <VisProvider>
       <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
         <div style={{ width: '70%', height: '80%' }}>
-          <Vis {...args} selected={selected} selectionCallback={setSelected} columns={columns} />
+          <Vis {...args} setExternalConfig={() => {}} selected={selected} selectionCallback={setSelected} columns={columns} />
         </div>
       </div>
     </VisProvider>

src/vis/stories/Vis/Violin/ViolinIris.stories.tsx

@@ -21,7 +21,7 @@ const Template: ComponentStory<typeof Vis> = (args) => {
     <VisProvider>
       <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
         <div style={{ width: '70%', height: '80%' }}>
-          <Vis {...args} columns={columns} />
+          <Vis {...args} setExternalConfig={() => {}} columns={columns} />
         </div>
       </div>
     </VisProvider>