- implements #1821

Author: boriskovar-m2ms

docker-compose.dev.vector.yml

@@ -1,11 +1,11 @@
 ---
-version: '3'
+version: "3"
 
 services:
   database:
     # image: postgres:15.12-alpine3.21
-    # image: postgres:12.2
-    image: informaticsmatters/rdkit-cartridge-debian:Release_2024_03_6
+    image: kaliif/pgvectorimage:latest
+    # image: informaticsmatters/rdkit-cartridge-debian:Release_2024_03_6
     volumes:
       - ../data/postgre/data:/var/lib/postgresql
     environment:
@@ -14,9 +14,13 @@ services:
       POSTGRES_DB: frag
       PGDATA: /var/lib/postgresql/data/pgdata
     ports:
-      - '5432:5432'
+      - "5432:5432"
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB -h localhost"]
+      test:
+        [
+          "CMD-SHELL",
+          "pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB -h localhost",
+        ]
       interval: 5s
       timeout: 5s
       retries: 20
@@ -25,7 +29,7 @@ services:
     image: redis:7.2.3-alpine3.18
     container_name: redis
     ports:
-    - "6379:6379"
+      - "6379:6379"
     healthcheck:
       test: redis-cli ping
       interval: 10s
@@ -37,8 +41,8 @@ services:
     image: informaticsmatters/fragnet-test:3.5.25-xchem-combi-sample-2021-02
     ports:
       # Comment these two out in produciton
-      - '7474:7474'
-      - '7687:7687'
+      - "7474:7474"
+      - "7687:7687"
     ulimits:
       nofile:
         soft: 40000
@@ -55,19 +59,19 @@ services:
       start_period: 10s
   web:
     container_name: web_dock
-    image: xchem/fragalysis-stack:latest
+    # image: xchem/fragalysis-stack:latest
     # image: xchem/fragalysis-backend:m2ms-1649-refresh-fix
     # image: boriskovarm2ms/fragalysis-stack:experiment2
     # image: kaliif/fragalysis-backend:download-task
-    # image: kaliif/fragalysis-backend:screenshots
+    image: kaliif/fragalysis-backend:coordinate-filter
     command: /bin/bash /code/launch-stack.sh
     volumes:
       - ../data/logs:/code/logs/
       - ../data/media:/code/media/
       - ../fragalysis-frontend:/code/frontend
       - ../data/target:/code/target
     ports:
-      - '8080:80'
+      - "8080:80"
     environment:
       POSTGRESQL_DATABASE: frag
       POSTGRESQL_USER: fragalysis
@@ -77,41 +81,41 @@ services:
       NEO4J_AUTH: neo4j/test123
       # DISCOURSE_API_KEY: ${DISCOURSE_API_KEY}
       FRAGALYSIS_BACKEND_SENTRY_DNS: https://27fa0675f555431aa02ca552e93d8cfb@o194333.ingest.sentry.io/1298290
-      ISPYB_FLAG: 'False'
+      ISPYB_FLAG: "False"
       # DISCOURSE_DEV_POST_SUFFIX: '-boris-local'
       # DISCOURSE_HOST: 'https://discourse.xchem-dev.diamond.ac.uk'
-      SQUONK2_UI_URL: 'https://data-manager-ui.xchem-dev.diamond.ac.uk/data-manager-ui'
-      SQUONK2_DMAPI_URL: 'https://data-manager.xchem-dev.diamond.ac.uk/data-manager-api'
-      SQUONK2_ASAPI_URL: 'https://account-server.xchem-dev.diamond.ac.uk/account-server-api'
+      SQUONK2_UI_URL: "https://data-manager-ui.xchem-dev.diamond.ac.uk/data-manager-ui"
+      SQUONK2_DMAPI_URL: "https://data-manager.xchem-dev.diamond.ac.uk/data-manager-api"
+      SQUONK2_ASAPI_URL: "https://account-server.xchem-dev.diamond.ac.uk/account-server-api"
       SQUONK2_ORG_OWNER: ${SQUONK2_ORG_OWNER}
       SQUONK2_ORG_OWNER_PASSWORD: ${SQUONK2_ORG_OWNER_PASSWORD}
       SQUONK2_ORG_UUID: ${SQUONK2_ORG_UUID}
-      SQUONK2_PRODUCT_FLAVOUR: 'SILVER'
+      SQUONK2_PRODUCT_FLAVOUR: "SILVER"
       SQUONK2_SLUG: ${SQUONK2_SLUG}
       SQUONK2_UNIT_BILLING_DAY: 3
-      OIDC_AS_CLIENT_ID: 'account-server-api-dev'
-      OIDC_DM_CLIENT_ID: 'data-manager-api-dev'
-      OIDC_KEYCLOAK_REALM: 'https://keycloak.xchem-dev.diamond.ac.uk/auth/realms/xchem'
+      OIDC_AS_CLIENT_ID: "account-server-api-dev"
+      OIDC_DM_CLIENT_ID: "data-manager-api-dev"
+      OIDC_KEYCLOAK_REALM: "https://keycloak.xchem-dev.diamond.ac.uk/auth/realms/xchem"
       OIDC_RP_CLIENT_SECRET: ${OIDC_RP_CLIENT_SECRET}
-      OIDC_RP_CLIENT_ID: 'fragalysis-local'
+      OIDC_RP_CLIENT_ID: "fragalysis-local"
       OIDC_RENEW_ID_TOKEN_EXPIRY_MINUTES: 210
       # ISPYB_HOST: ispybdbproxy.diamond.ac.uk
       ISPYB_PORT: 4306
       ISPYB_USER: ${ISPYB_USER}
       ISPYB_PASSWORD: ${ISPYB_PASSWORD}
       SECURITY_CONNECTOR: ssh_ispyb
       LOGGING_FRAMEWORK_ROOT_LEVEL: DEBUG
-      AUTHENTICATE_UPLOAD: 'False'
-      CELERY_TASK_ALWAYS_EAGER: 'False'
-      DEBUG_FRAGALYSIS: 'True'
-      PROXY_FORWARDED_PROTO_HEADER: 'http'
-      LEGACY_URL: 'https://fragalysis.diamond.ac.uk'
-      DEPLOYMENT_MODE: 'development'
-      DISABLE_RESTRICT_PROPOSALS_TO_MEMBERSHIP: 'True'
-      PUBLIC_TAS: 'lb18145-1,lb32633-1'
-      RESTRICTED_TAS_USERS: 'spf57946:lb32627-261'
+      AUTHENTICATE_UPLOAD: "False"
+      CELERY_TASK_ALWAYS_EAGER: "False"
+      DEBUG_FRAGALYSIS: "True"
+      PROXY_FORWARDED_PROTO_HEADER: "http"
+      LEGACY_URL: "https://fragalysis.diamond.ac.uk"
+      DEPLOYMENT_MODE: "development"
+      DISABLE_RESTRICT_PROPOSALS_TO_MEMBERSHIP: "True"
+      PUBLIC_TAS: "lb18145-1,lb32633-1"
+      RESTRICTED_TAS_USERS: "spf57946:lb32627-261"
       WEB_DJANGO_SUPERUSER_PASSWORD: ${WEB_DJANGO_SUPERUSER_PASSWORD}
-      SQUONK2_REFRESH_SHOULD_RETRIEVE_RESULTS: 'Yes'
+      SQUONK2_REFRESH_SHOULD_RETRIEVE_RESULTS: "Yes"
       # INFECTIONS: 'structure-download'
     healthcheck:
       test: python manage.py --help || exit 1
@@ -141,24 +145,24 @@ services:
       - .env
     # image: ${BE_NAMESPACE:-xchem}/fragalysis-backend:${BE_IMAGE_TAG:-latest}
     # image: kaliif/fragalysis-backend:download-task
-    # image: kaliif/fragalysis-backend:screenshots
-    image: xchem/fragalysis-stack:latest
+    image: kaliif/fragalysis-backend:coordinate-filter
+    # image: xchem/fragalysis-stack:latest
     restart: on-failure
     volumes:
-    - ../data/logs:/code/logs/
-    - ../data/media:/code/media/
+      - ../data/logs:/code/logs/
+      - ../data/media:/code/media/
     environment:
-      AUTHENTICATE_UPLOAD: 'False'
-      DEPLOYMENT_MODE: 'development'
+      AUTHENTICATE_UPLOAD: "False"
+      DEPLOYMENT_MODE: "development"
       POSTGRESQL_DATABASE: frag
       POSTGRESQL_USER: fragalysis
       POSTGRESQL_PASSWORD: fragalysis
       POSTGRESQL_HOST: database
       POSTGRESQL_PORT: 5432
       # Comma-separated dforced errors (infections?)
-      INFECTIONS: ''
+      INFECTIONS: ""
       # Celery tasks need to run synchronously
-      CELERY_TASK_ALWAYS_EAGER: 'False'
+      CELERY_TASK_ALWAYS_EAGER: "False"
       # Error reporting and default/root log-level
       FRAGALYSIS_BACKEND_SENTRY_DNS: ${FRAGALYSIS_BACKEND_SENTRY_DNS}
       LOGGING_FRAMEWORK_ROOT_LEVEL: ${LOGGING_FRAMEWORK_ROOT_LEVEL:-INFO}
@@ -168,12 +172,12 @@ services:
       OIDC_RP_CLIENT_SECRET: ${OIDC_RP_CLIENT_SECRET}
       OIDC_AS_CLIENT_ID: ${OIDC_AS_CLIENT_ID:-account-server-api}
       OIDC_DM_CLIENT_ID: ${OIDC_DM_CLIENT_ID:-data-manager-api}
-      OIDC_RENEW_ID_TOKEN_EXPIRY_MINUTES: '210'
+      OIDC_RENEW_ID_TOKEN_EXPIRY_MINUTES: "210"
       # Public target access strings?
       # A comma-separated list of Project titles.
       PUBLIC_TAS: ${PUBLIC_TAS:-lb18145-1}
       # Squonk configuration
-      SQUONK2_VERIFY_CERTIFICATES: 'No'
+      SQUONK2_VERIFY_CERTIFICATES: "No"
       SQUONK2_UNIT_BILLING_DAY: 3
       SQUONK2_PRODUCT_FLAVOUR: BRONZE
       SQUONK2_SLUG: fs-local
@@ -199,6 +203,6 @@ services:
       - .env
     # image: ${BE_NAMESPACE:-xchem}/fragalysis-backend:${BE_IMAGE_TAG:-latest}
     # image: kaliif/fragalysis-backend:download-task
-    image: xchem/fragalysis-stack:latest
-    # image: kaliif/fragalysis-backend:screenshots
+    # image: xchem/fragalysis-stack:latest
+    image: kaliif/fragalysis-backend:coordinate-filter
     restart: on-failure

js/components/nglView/nglView.js

@@ -4,7 +4,7 @@
 
 import { Stage, Shape } from 'ngl';
 import React, { memo, useEffect, useCallback, useContext, useState, useRef } from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch, useSelector } from 'react-redux';
 import * as nglActions from '../../reducers/ngl/actions';
 import * as nglDispatchActions from '../../reducers/ngl/dispatchActions';
 import * as selectionActions from '../../reducers/selection/actions';
@@ -15,6 +15,8 @@ import { NGL_PARAMS } from './constants';
 import { makeStyles, Popover, TextField, Button, Typography } from '@material-ui/core';
 import { VIEWS } from '../../constants/constants';
 import { INITIAL_STATE as NGL_INITIAL } from '../../reducers/ngl/nglReducers';
+import { api } from '../../utils/api';
+import { base_url } from '../routes/constants';
 
 const useStyles = makeStyles(theme => ({
   paper: {
@@ -40,6 +42,7 @@ const NglView = memo(
     defaultRadius = 5,
     apiEndpoint = '/api/radius-selection'
   }) => {
+    const dispatch = useDispatch();
     // connect to NGL Stage object
     const { registerNglView, unregisterNglView, getNglView } = useContext(NglContext);
     const [stage, setStage] = useState();
@@ -54,6 +57,24 @@ const NglView = memo(
     const sphereCompRef = useRef(null);
     const lastOriginRef = useRef(null);
 
+    const targetId = useSelector(state => state.apiReducers.target_on);
+
+    const sphereCoordinates = useSelector(state => state.selectionReducers.sphereCoordinates);
+    const coordinateRadius = useSelector(state => state.selectionReducers.coordinateRadius);
+    const unifiedFilter = useSelector(state => state.selectionReducers.unifiedFilter);
+    const isCoordinateFilterApplied = useSelector(state => state.selectionReducers.isCoordinateFilterApplied);
+    const sphereRendered = useSelector(state => state.selectionReducers.sphereRendered);
+
+    const isCoordinateFilterPermitted = unifiedFilter?.detail?.coordinateSearch === true;
+    const isCoordinateFilterPermittedRef = useRef(isCoordinateFilterPermitted);
+    // Keep ref up to date
+    useEffect(() => {
+      isCoordinateFilterPermittedRef.current = isCoordinateFilterPermitted;
+    }, [isCoordinateFilterPermitted]);
+    // console.log('unifiedFilter?.detail?.coordinateSearch:', unifiedFilter?.detail?.coordinateSearch);
+    const rendererDomElement = stage?.viewer?.renderer?.domElement;
+    const mousePosition = stage?.mouseObserver?.position;
+
     const parseRadius = useCallback(
       val => {
         const n = parseFloat(val);
@@ -91,16 +112,22 @@ const NglView = memo(
       const origin = lastOriginRef.current;
       if (!origin) return;
       const value = parseRadius(radius);
-      const payload = { origin: [origin.x, origin.y, origin.z], radius: value };
-      try {
-        await fetch(apiEndpoint, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payload)
+      api({
+        url: `${base_url}/api/site_observation_ids/?target=${targetId}&xorigin=${origin.x}&yorigin=${origin.y}&zorigin=${origin.z}&radius=${value}`
+      })
+        .then(response => {
+          if (response?.data?.results) {
+            const ids = response.data.results.map(item => item.id);
+            dispatch(selectionActions.setCoordinateFilterResults(ids));
+            dispatch(selectionActions.setIsCoordinateFilterApplied(true));
+            // console.log('Site Observation IDs within radius:', ids);
+          }
+        })
+        .catch(err => {
+          console.log(err);
         });
-      } catch (e) {}
       setPopoverOpen(false);
-    }, [apiEndpoint, radius, parseRadius]);
+    }, [dispatch, parseRadius, radius, targetId]);
 
     useEffect(() => {
       const monitor = () => {
@@ -133,31 +160,63 @@ const NglView = memo(
       }
     }, [div_id, getNglView]);
 
+    // Stable handler, always reads latest value from ref
     const handleStageClicked = useCallback(
       pickingProxy => {
+        // Always use ref for latest value
+        if (!isCoordinateFilterPermittedRef.current) return;
         if (!pickingProxy) return;
         if (!(pickingProxy.atom || pickingProxy.bond)) return;
         const pos = pickingProxy.position?.clone?.();
         if (!pos) return;
 
         lastOriginRef.current = pos;
-        ensureSphereAt(pos, parseRadius(radius));
+        dispatch(selectionActions.setSphereCoordinate(pos));
+        dispatch(selectionActions.setCoordinateRadius(radius));
+        // ensureSphereAt(pos, parseRadius(radius));
 
         // Anchor popover to mouse cursor using NGL's mouseObserver
-        const canvas = stage?.viewer?.renderer?.domElement;
-        if (canvas && stage?.mouseObserver?.position) {
+        const canvas = rendererDomElement;
+        if (canvas && mousePosition) {
           const rect = canvas.getBoundingClientRect();
-          const m = stage.mouseObserver.position;
+          const m = mousePosition;
           setAnchorPos({
             top: Math.round(rect.top + m.y),
             left: Math.round(rect.left + m.x)
           });
         }
         setPopoverOpen(true);
       },
-      [ensureSphereAt, parseRadius, radius, stage]
+      [dispatch, mousePosition, radius, rendererDomElement]
     );
 
+    useEffect(() => {
+      if (!ready) return;
+      if (sphereCoordinates && isCoordinateFilterPermitted && !sphereRendered) {
+        dispatch(selectionActions.setSphereRendered(true));
+        ensureSphereAt(sphereCoordinates, parseRadius(coordinateRadius));
+      } else {
+        if (!sphereCoordinates && sphereCompRef.current && sphereRendered) {
+          try {
+            stage.removeComponent(sphereCompRef.current);
+            dispatch(selectionActions.setSphereRendered(false));
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+    }, [
+      coordinateRadius,
+      dispatch,
+      ensureSphereAt,
+      isCoordinateFilterPermitted,
+      parseRadius,
+      ready,
+      sphereCoordinates,
+      sphereRendered,
+      stage
+    ]);
+
     const registerStageEvents = useCallback(
       (newStage, getNglView) => {
         if (newStage) {
@@ -217,12 +276,12 @@ const NglView = memo(
         }
       }
 
-      return () => {
-        if (stage) {
-          unregisterStageEvents(stage, getNglView);
-          unregisterNglView(div_id);
-        }
-      };
+      // return () => {
+      //   if (stage) {
+      //     unregisterStageEvents(stage, getNglView);
+      //     unregisterNglView(div_id);
+      //   }
+      // };
     }, [
       div_id,
       handleResize,
@@ -280,7 +339,17 @@ const NglView = memo(
             fullWidth
           />
           <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 12 }}>
-            <Button onClick={() => setPopoverOpen(false)}>Cancel</Button>
+            <Button
+              onClick={() => {
+                if (!isCoordinateFilterApplied) {
+                  dispatch(selectionActions.setSphereCoordinate(null));
+                  dispatch(selectionActions.setCoordinateRadius(''));
+                }
+                setPopoverOpen(false);
+              }}
+            >
+              Cancel
+            </Button>
             <Button variant="contained" color="primary" onClick={submitRadius}>
               Apply
             </Button>