client/craco.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-    devServer: devServerConfig => {
-        devServerConfig.webSocketServer = {
-            options: { path: process.env.PUBLIC_URL + 'ws' }
-        };
-
-        return devServerConfig;
-    }
-};

client/package.json

@@ -14,16 +14,15 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resizable-panels": "^0.0.34",
-    "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "export $(cat .env | xargs) ; craco start",
+    "start": "export $(cat .env | xargs) ; react-scripts start",
-    "build": "export $(cat .env | xargs) ; craco build",
+    "build": "export $(cat .env | xargs) ; react-scripts build",
-    "test": "export $(cat .env | xargs) ; craco test",
+    "test": "export $(cat .env | xargs) ; react-scripts test",
-    "eject": "export $(cat .env | xargs) ; craco eject"
+    "eject": "export $(cat .env | xargs) ; react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
@@ -42,8 +41,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@craco/craco": "^7.0.0"
   }
 }

client/src/App.css

@@ -21,7 +21,6 @@ div {
 
 .Resizer {
   width: 0.5rem;
-  background-color: #ccc;
   border: 1px solid black;
 }
 
@@ -37,8 +36,6 @@ div {
 
 .Identities {
   display: flex;
-  padding: 0.25rem;
-  gap: 0.25rem;
   overflow-y: scroll;
   flex-direction: column;
   border: 1px solid green;
@@ -49,13 +46,16 @@ div {
   box-sizing: border-box;
   flex-direction: column;
   position: relative;
-  border: 2px solid #444;
 }
 
 .Face:hover {
   cursor: pointer;
 }
 
+.Face .Image {
+  border: 0.25rem solid transparent;
+}
+
 .ClusterEditor {
   display: flex;
   flex-direction: column;
@@ -82,17 +82,12 @@ div {
   background-position: 50% 50% !important;
 }
 
-.Active {
+.Face:hover .Image {
-  filter: brightness(1.25);
+  border: 0.25rem solid yellow;
-  border-color: orange !important;
 }
 
-.Face:hover {
+.Face.Selected .Image {
-  border-color: yellow;
+  border: 0.25rem solid blue;
-}
-
-.Face.Selected {
-  border-color: blue;
 }
 
 .Face .Title {
@@ -134,6 +129,5 @@ div {
 
 .Cluster .Faces {
   display: grid;
-  gap: 0.25rem;
   grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
 }

client/src/App.tsx

@@ -2,17 +2,9 @@
 import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { useApi } from './useApi';
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import {
-  BrowserRouter as Router,
-  Route,
-  Routes,
-  useParams
-} from "react-router-dom";
 import './App.css';
 
-const base = process.env.PUBLIC_URL; /* /identities -- set in .env */
+const makeFaceBoxes = (photo: any, dimensions: any): any => {
-
-const makeFaceBoxes = (photo: any, dimensions: any, onFaceClick: any): any => {
   const faces: FaceData[] = photo.faces;
 
   let width: number, height: number, offsetLeft = 0, offsetTop = 0;
@@ -32,29 +24,20 @@ const makeFaceBoxes = (photo: any, dimensions: any, onFaceClick: any): any => {
     offsetTop = 0;
   }
 
-  return faces.map((face: FaceData) => {
+  return faces.map((face: FaceData) => (
-    const faceId = face.faceId;
+    <div className="FaceBox"
-    const identityId = face.identityId;
+      key={face.faceId}
-    return (
+      style={{
-      <div className="FaceBox"
+        left: offsetLeft + Math.floor(face.left * width) + "px",
-        key={faceId}
+        top: offsetTop + Math.floor(face.top * height) + "px",
-        data-identity-id={identityId}
+        width: Math.floor((face.right - face.left) * width) + "px",
-        data-face-id={faceId}
+        height: Math.floor((face.bottom - face.top) * height) + "px"
-        style={{
+      }}
-          left: offsetLeft + Math.floor(face.left * width) + "px",
+    />
-          top: offsetTop + Math.floor(face.top * height) + "px",
+  ));
-          width: Math.floor((face.right - face.left) * width) + "px",
-          height: Math.floor((face.bottom - face.top) * height) + "px"
-        }}
-        onClick={(e) => { onFaceClick(e, face) }}
-        onMouseEnter={(e) => { onFaceMouseEnter(e, face) }}
-        onMouseLeave={(e) => { onFaceMouseLeave(e, face) }}
-      />
-    )
-  });
 };
 
-const Photo = ({ photoId, onFaceClick }: any) => {
+const Photo = ({ photoId }: any) => {
   const [image, setImage] = useState<any>(undefined);
   const ref = useRef(null);
   const [dimensions, setDimensions] = React.useState({width: 0, height: 0});
@@ -63,8 +46,8 @@ const Photo = ({ photoId, onFaceClick }: any) => {
     if (image === undefined || dimensions.height === 0) {
       return <></>;
     }
-    return makeFaceBoxes(image, dimensions, onFaceClick);
+    return makeFaceBoxes(image, dimensions);
-  }, [image, dimensions, onFaceClick]);
+  }, [image, dimensions]);
 
   useEffect(() => {
     if (!ref.current) {
@@ -86,7 +69,7 @@ const Photo = ({ photoId, onFaceClick }: any) => {
     }
     const fetchImageData = async (image: number) => {
       console.log(`Loading photo ${image}`);
-      const res = await window.fetch(`${base}/api/v1/photos/${image}`);
+      const res = await window.fetch(`../api/v1/photos/${image}`);
       const photo = await res.json();
       setImage(photo);
     };
@@ -101,56 +84,19 @@ const Photo = ({ photoId, onFaceClick }: any) => {
   return (<div className="Image"
     ref={ref}
     style={{
-      background: `url("${base}/../${image.path}thumbs/scaled/${image.filename}")`.replace(/ /g, '%20')
+      background: `url(../${image.path}thumbs/scaled/${image.filename})`.replace(/ /g, '%20')
     }}>{ faces }</div>
   );
 };
 
-const onFaceMouseEnter = (e: any, face: FaceData) => {
+const Face = ({ faceId, onClick, title, ...rest }: any) => {
-  const faceId = face.faceId;
-  const els = [...document.querySelectorAll(`[data-face-id="${faceId}"]`)];
-
-  if (face.identity) {
-    const identityId = face.identity.identityId;
-    els.splice(0, 0, 
-      ...document.querySelectorAll(`[data-identity-id="${identityId}"]`));
-  }
-
-  els.forEach(el => {
-    el.classList.add('Active');
-  })
-};
-
-const onFaceMouseLeave = (e: any, face: FaceData) => {
-  const faceId = face.faceId;
-  const els = [...document.querySelectorAll(`[data-face-id="${faceId}"]`)];
-
-  if (face.identity) {
-    const identityId = face.identity.identityId;
-    els.splice(0, 0,
-      ...document.querySelectorAll(`[data-identity-id="${identityId}"]`));
-  }
-
-  els.forEach(el => {
-    el.classList.remove('Active');
-  })
-};
-
-const Face = ({ face, onFaceClick, title, ...rest }: any) => {
-  const faceId = face.faceId;
   const idPath = String(faceId % 100).padStart(2, '0');
   return (
-    <div 
+    <div {...rest} onClick={(e) => { onClick(e, faceId) }}
-      data-face-id={face.faceId}
-      data-identity-id={face.identityId}
-      {...rest} 
-      onClick={(e) => { onFaceClick(e, face) }}
-      onMouseEnter={(e) => { onFaceMouseEnter(e, face) }}
-      onMouseLeave={(e) => { onFaceMouseLeave(e, face) }}
       className='Face'>
       <div className='Image'
         style={{
-          background: `url("${base}/../faces/${idPath}/${faceId}.jpg")`,
+          background: `url("/faces/${idPath}/${faceId}.jpg")`,
         }}>
         <div className='Title'>{title}</div>
       </div>
@@ -159,54 +105,47 @@ const Face = ({ face, onFaceClick, title, ...rest }: any) => {
 };
 
 type ClusterProps = {
-  identity: IdentityData,
+  identity: Identity,
   setImage(image: number): void,
   setSelected(selected: number[]): void,
-  setIdentity(identity: IdentityData): void
+  setIdentity(identity: Identity): void
 };
 
 const Cluster = ({ identity, setIdentity, setImage, setSelected }: ClusterProps) => {
   const relatedFacesJSX = useMemo(() => {
-    const faceClicked = async (e: any, face: FaceData) => {
+    const faceClicked = async (e: any, id: any) => {
       if (!identity) {
         return;
       }
       const el = e.currentTarget;
-    
+      const face = identity.relatedFaces.find(item => item.faceId === id);
-      /* Control -- select / deselect single item */
+      if (!face) {
-      if (e.ctrlKey) {
-        el.classList.toggle('Selected');
-        const selected = [...el.parentElement
-          .querySelectorAll('.Selected')]
-          .map((face: any) => face.getAttribute('data-face-id'));
-        setSelected(selected);
-        return;
-      } 
-      
-      /* Shift -- select groups */
-      if (e.shiftKey) {
         return;
       }
-
+      if (e.shiftKey) {
-      /* Default to load image */
+        e.stopPropagation();
-      e.stopPropagation();
+        e.preventDefault();
-      e.preventDefault();
+        setImage(face.photoId);
-      setImage(face.photoId);
+        return;
+      }
+      el.classList.toggle('Selected');
+      const selected = [...el.parentElement
+        .querySelectorAll('.Selected')]
+        .map((face: any) => face.getAttribute('data-face-id'));
+      setSelected(selected);
+      console.log(face);
     }
     if (identity === undefined) {
       return <></>;
     }
+  
     return identity.relatedFaces.map(face =>
-      <div 
+      <Face
+        data-face-id={face.faceId}
         key={face.faceId}
-        style={{
+        faceId={face.faceId}
-          display: "flex", 
+        onClick={faceClicked}
-          alignItems: "center"}}>
+        title={face.distance}/>
-        <Face
-          face={face}
-          onFaceClick={faceClicked}
-          title={face.distance}/>
-      </div>
     );
   }, [identity, setImage, setSelected]);
 
@@ -286,7 +225,6 @@ type FaceData = {
   firstName: string,
   middleName: string,
   displayName: string,
-  identity: IdentityData,
   identityId: number,
   distance: number,
   descriptors: any[],
@@ -296,33 +234,40 @@ type FaceData = {
   left: number,
 };
 
-type IdentityData = {
+type Identity = {
   lastName: string,
   middleName: string,
   firstName: string,
   descriptors: number[],
-  identityId: number
+  id: number
   displayName: string,
   relatedFaces: FaceData[]
 };
 
 interface IdentitiesProps {
-  identities: IdentityData[],
+  setIdentity(identity: Identity): void,
-  onFaceClick(e: any, face: FaceData): void
+  identities: Identity[]
 };
 
-const Identities = ({ identities, onFaceClick } : IdentitiesProps) => {
+const Identities = ({ identities, setIdentity } : IdentitiesProps) => {
   const identitiesJSX = useMemo(() => {
+    const loadIdentity = async (id: number) => {
+      const res = await window.fetch(`../api/v1/identities/${id}`);
+      const data = await res.json();
+      setIdentity(data[0]);
+    };
+
     return identities.map((identity) => {
       const face = identity.relatedFaces[0];
       return (
         <Face key={face.faceId} 
-          face={face}
+          data-face-id={face.faceId}
-          onFaceClick={onFaceClick}
+          faceId={face.faceId}
+          onClick={() => loadIdentity(identity.id)}
           title={identity.displayName}/>
       );
     });
-  }, [ identities, onFaceClick ]);
+  }, [ setIdentity, identities ]);
 
   return (
     <div className='Identities'>
@@ -340,50 +285,24 @@ const Button = ({ onClick, children }: any) => {
 };
 
 const App = () => {
-  const [identities, setIdentities] = useState<IdentityData[]>([]);
+  const [identities, setIdentities] = useState<Identity[]>([]);
-  const { identityId, faceId } = useParams();
   const [identity, setIdentity] = useState<any>(undefined);
   const [image, setImage] = useState<number>(0);
   const { loading, data } = useApi(
-    `${base}/api/v1/identities`
+    '../api/v1/identities'
   );
   const [selected, setSelected] = useState<number[]>([]);
 
-  const loadIdentity = async (identityId: number) => {
-    try {
-      const res = await window.fetch(`${base}/api/v1/identities/${identityId}`);
-      const data = await res.json();
-      setIdentity(data[0]);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  useEffect(() => {
-    if (identityId !== undefined && !isNaN(+identityId)) {
-      loadIdentity(+identityId);
-    }
-
-    if (faceId !== undefined && !isNaN(+faceId)) {
-      setImage(+faceId);
-    }
-  }, []);
-
   useEffect(() => {
     if (data && data.length) {
-      data.forEach((identity: IdentityData) => {
+      setIdentities(data as Identity[]);
-        identity.relatedFaces.forEach(face => {
-          face.identity = identity;
-        });
-      });
-      setIdentities(data as IdentityData[]);
     }
   }, [data]);
 
   const removeSelected = async () => {
     try {
       const res = await window.fetch(
-        `${base}/api/v1/identities/faces/remove/${identity.identityId}`, {
+        `../api/v1/identities/faces/remove/${identity.id}`, {
         method: 'PUT', 
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ faces: selected })
@@ -403,30 +322,6 @@ const App = () => {
     }
   };
 
-  const onFaceClick = (e: any, face: FaceData) => {
-    if (!face.identity) {
-      console.log(`Face ${face.faceId} does not have an Identity`);
-      return;
-    }
-    const identityId = face.identity.identityId;
-    console.log(face.identity);
-    const identitiesEl = document.querySelector('.Identities');
-    if (!identitiesEl) {
-      return;
-    }
-    const faceIdentity = identitiesEl.querySelector(
-      `[data-identity-id="${identityId}"]`);
-    if (!faceIdentity) {
-      return;
-    }
-    faceIdentity.scrollIntoView()
-  };
-
-  const identitiesOnFaceClick = (e: any, face: FaceData) => {
-    const identityId = face.identity.identityId;
-    loadIdentity(identityId);
-  } 
-
   return (
     <div className="App">
       <div className="Worksheet">
@@ -451,24 +346,13 @@ const App = () => {
           <PanelResizeHandle className="Resizer"/>
           <Panel>
             {image === 0 && <div style={{ margin: '1rem' }}>Select image to view</div>}
-            {image !== 0 && <Photo onFaceClick={onFaceClick} photoId={image}/> }
+            {image !== 0 && <Photo photoId={image}/> }
           </Panel>
         </PanelGroup>
-        { !loading && <Identities 
+        { !loading && <Identities {... {identities, setIdentity }}/> }
-          {... { onFaceClick: identitiesOnFaceClick, identities }}/> }
       </div>
     </div>
   );
 }
 
-const AppRouter = () => {
+export default App;
-  return (
-    <Router>
-      <Routes>
-        <Route element={<App />} path={`${base}/:identityId?/:faceId?`} />
-      </Routes>
-    </Router>
-  );
-}
-
-export default AppRouter;

client/src/useApi.tsx

@@ -16,7 +16,6 @@ const useApi = (_url: string, _options?: {}) : UseApi => {
     if (_url === '') {
       return;
     }
-
     const fetchApi = async () => {
       console.log(`Fetching ${_url}...`);
       try {

server/development.location

@@ -1,8 +1,4 @@
 # DEVELOPMENT -- use npm development server on port 3000 (entrypoint.sh)
-location /identities/api/v1/ {
-  rewrite ^/identities/api/v1/(.*)$ https://${host}/api/v1/$1 permanent;
-}
-
 location /identities {
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
@@ -13,6 +9,6 @@ location /identities {
   proxy_pass_header P3P;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
-  proxy_set_header Connection "Upgrade";
+  proxy_set_header Connection "upgrade";
   proxy_pass https://localhost:3000;
-}
+}

server/production.location

@@ -1,8 +1,4 @@
 # PRODUCTION -- pre-built source
-location /identities/api/v1/ {
-  rewrite ^/identities/api/v1/(.*)$ https://${host}/api/v1/$1 permanent;
-}
-
 location /identities {
   try_files $uri $uri/ =404;
   alias /website/client/build;

server/routes/identities.js

@@ -174,7 +174,6 @@ router.get("/:id?", async (req, res) => {
         identity[key] = '';
       }
     });
-    identity.identityId = identity.id;
 
     const relatedFaces = identity.relatedFaceIds.split(","),
       relatedFacePhotos = identity.relatedFacePhotoIds.split(",");
@@ -198,7 +197,6 @@ router.get("/:id?", async (req, res) => {
       );
 
       return {
-        identityId: identity.id,
         faceId,
         photoId: relatedFacePhotos[index],
         distance
@@ -217,7 +215,6 @@ router.get("/:id?", async (req, res) => {
       identity.relatedFaces = [ identity.relatedFaces[0] ];
     }
 
-    delete identity.id;
     delete identity.descriptors;
     delete identity.relatedFaceIds;
     delete identity.relatedFacePhotoIds;

server/routes/photos.js

@@ -1127,8 +1127,8 @@ router.get("/:id", async (req, res) => {
       if (face.identityId) {
         const results = await photoDB.sequelize.query(
           `
-          SELECT id AS identityId,displayName,firstName,lastName,middleName FROM identities
+          SELECT displayName,firstName,lastName,middleName FROM identities
-          WHERE identityId=:id
+          WHERE id=:id
           `, {
             replacements: { id: face.identityId },
             type: photoDB.Sequelize.QueryTypes.SELECT
@@ -1136,6 +1136,7 @@ router.get("/:id", async (req, res) => {
         );
         face.identity = results[0];
       }
+      delete face.identityId;
     });
     
     return res.status(200).json(photo);