Compare commits
No commits in common. "17fbb4e21c574e982d98746c9ea83044cc15574f" and "0043480ff877ee57a401ee2ba793f405e30b752b" have entirely different histories.
17fbb4e21c
...
0043480ff8
@ -1,9 +0,0 @@
|
||||
module.exports = {
|
||||
devServer: devServerConfig => {
|
||||
devServerConfig.webSocketServer = {
|
||||
options: { path: process.env.PUBLIC_URL + 'ws' }
|
||||
};
|
||||
|
||||
return devServerConfig;
|
||||
}
|
||||
};
|
||||
1150
client/package-lock.json
generated
1150
client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
"build": "export $(cat .env | xargs) ; craco build",
|
||||
"test": "export $(cat .env | xargs) ; craco test",
|
||||
"eject": "export $(cat .env | xargs) ; craco eject"
|
||||
"start": "export $(cat .env | xargs) ; react-scripts start",
|
||||
"build": "export $(cat .env | xargs) ; react-scripts build",
|
||||
"test": "export $(cat .env | xargs) ; react-scripts test",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
filter: brightness(1.25);
|
||||
border-color: orange !important;
|
||||
.Face:hover .Image {
|
||||
border: 0.25rem solid yellow;
|
||||
}
|
||||
|
||||
.Face:hover {
|
||||
border-color: yellow;
|
||||
}
|
||||
|
||||
.Face.Selected {
|
||||
border-color: blue;
|
||||
.Face.Selected .Image {
|
||||
border: 0.25rem solid blue;
|
||||
}
|
||||
|
||||
.Face .Title {
|
||||
@ -134,6 +129,5 @@ div {
|
||||
|
||||
.Cluster .Faces {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
@ -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, onFaceClick: any): any => {
|
||||
const makeFaceBoxes = (photo: any, dimensions: 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) => {
|
||||
const faceId = face.faceId;
|
||||
const identityId = face.identityId;
|
||||
return (
|
||||
<div className="FaceBox"
|
||||
key={faceId}
|
||||
data-identity-id={identityId}
|
||||
data-face-id={faceId}
|
||||
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) }}
|
||||
/>
|
||||
)
|
||||
});
|
||||
return faces.map((face: FaceData) => (
|
||||
<div className="FaceBox"
|
||||
key={face.faceId}
|
||||
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"
|
||||
}}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
||||
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);
|
||||
}, [image, dimensions, onFaceClick]);
|
||||
return makeFaceBoxes(image, dimensions);
|
||||
}, [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 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 Face = ({ faceId, onClick, title, ...rest }: any) => {
|
||||
const idPath = String(faceId % 100).padStart(2, '0');
|
||||
return (
|
||||
<div
|
||||
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) }}
|
||||
<div {...rest} onClick={(e) => { onClick(e, faceId) }}
|
||||
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;
|
||||
|
||||
/* Control -- select / deselect single item */
|
||||
if (e.ctrlKey) {
|
||||
el.classList.toggle('Selected');
|
||||
const selected = [...el.parentElement
|
||||
.querySelectorAll('.Selected')]
|
||||
.map((face: any) => face.getAttribute('data-face-id'));
|
||||
setSelected(selected);
|
||||
const face = identity.relatedFaces.find(item => item.faceId === id);
|
||||
if (!face) {
|
||||
return;
|
||||
}
|
||||
|
||||
/* Shift -- select groups */
|
||||
if (e.shiftKey) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setImage(face.photoId);
|
||||
return;
|
||||
}
|
||||
|
||||
/* Default to load image */
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setImage(face.photoId);
|
||||
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={{
|
||||
display: "flex",
|
||||
alignItems: "center"}}>
|
||||
<Face
|
||||
face={face}
|
||||
onFaceClick={faceClicked}
|
||||
title={face.distance}/>
|
||||
</div>
|
||||
faceId={face.faceId}
|
||||
onClick={faceClicked}
|
||||
title={face.distance}/>
|
||||
);
|
||||
}, [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[],
|
||||
onFaceClick(e: any, face: FaceData): void
|
||||
setIdentity(identity: Identity): 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}
|
||||
onFaceClick={onFaceClick}
|
||||
data-face-id={face.faceId}
|
||||
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 { identityId, faceId } = useParams();
|
||||
const [identities, setIdentities] = useState<Identity[]>([]);
|
||||
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) => {
|
||||
identity.relatedFaces.forEach(face => {
|
||||
face.identity = identity;
|
||||
});
|
||||
});
|
||||
setIdentities(data as IdentityData[]);
|
||||
setIdentities(data as Identity[]);
|
||||
}
|
||||
}, [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
|
||||
{... { onFaceClick: identitiesOnFaceClick, identities }}/> }
|
||||
{ !loading && <Identities {... {identities, setIdentity }}/> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const AppRouter = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route element={<App />} path={`${base}/:identityId?/:faceId?`} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default AppRouter;
|
||||
export default App;
|
||||
|
||||
@ -16,7 +16,6 @@ const useApi = (_url: string, _options?: {}) : UseApi => {
|
||||
if (_url === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchApi = async () => {
|
||||
console.log(`Fetching ${_url}...`);
|
||||
try {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
WHERE identityId=:id
|
||||
SELECT displayName,firstName,lastName,middleName FROM identities
|
||||
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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user