fix: resolve all ESLint warnings in acquisition frontend

frontend/acquisition/src/AcquisitionApi.js

@@ -65,7 +65,7 @@ export const AcquisitionApi = (props) => {
     const [recordingFileBase, setRecordingFileBase] = useState('');
     const [recordingFilename, setRecordingFilename] = useState('');
     const [recordingProgress, setRecordingProgress] = useState('');
-    const [keypoints, setKeypoints] = useState([]);
+    const [keypoints] = useState([]);
     const [diskSpaceInfo, setDiskSpaceInfo] = useState(null);
     const [showDiskWarningModal, setShowDiskWarningModal] = useState(false);
     const [diskWarningOnStartup, setDiskWarningOnStartup] = useState(false);

frontend/acquisition/src/AnalysisHome.js

@@ -268,7 +268,7 @@ const AnalysisHome = () => {
     }
 
     const toggle = (val) => {
-        val = val == "true";
+        val = val === "true";
         console.log("toggle", val);
         setSortByDate(val);
     }
@@ -287,7 +287,7 @@ const AnalysisHome = () => {
                             variant={idx % 2 ? 'outline-success' : 'outline-danger'}
                             name="radio"
                             value={radio.value}
-                            checked={sortByDate == radio.value}
+                            checked={sortByDate === radio.value}
                             onChange={(e) => toggle(e.currentTarget.value)}
                         >
                             {radio.name}

frontend/acquisition/src/components/SmplBrowser.js

@@ -25,7 +25,7 @@ const SmplBrowser = () => {
     const [selectedParticipant, setSelectedParticipant] = useState(null);
     const [selectedSession, setSelectedSession] = useState(null);
     const [selectedVideo, setSelectedVideo] = useState(null);
-    const [recordingValidated, setRecordingValidated] = useState(false);
+    const [, setRecordingValidated] = useState(false);
     const [selectedModel, setSelectedModel] = useState("SMPL");
 
     useEffect(() => {
@@ -137,12 +137,6 @@ const SmplBrowser = () => {
         zIndex: '1000'
     }
 
-    const dropDownStyle = {
-        maxHeight: '28px',
-        overflowY: 'scroll'
-    }
-
-
     return (
         <Container>
             <Row>

frontend/acquisition/src/components/visualization_js/animator.js

@@ -89,7 +89,7 @@ class Animator {
         if (options.play === undefined) {
             options.play = true;
         }
-        if (options.loop == undefined) {
+        if (options.loop === undefined) {
             options.loop = true;
         }
         if (options.clampWhenFinished === undefined) {
@@ -126,7 +126,7 @@ class Animator {
         if (this.playing) {
             this.mixer.update(this.clock.getDelta());
             this.viewer.setDirty();
-            if (this.duration != 0) {
+            if (this.duration !== 0) {
                 this.displayProgress(this.action.time);
             } else {
                 this.displayProgress(0);

frontend/acquisition/src/components/visualization_js/system.js

@@ -156,34 +156,34 @@ function createScene(system) {
         geom[1].forEach(function (collider) {
             const rgba = collider.rgba;
             const color = new THREE.Color(rgba[0], rgba[1], rgba[2]);
-            const mat = (collider.name == 'Plane') ?
+            const mat = (collider.name === 'Plane') ?
                 createCheckerBoard() :
-                (collider.name == 'heightMap') ?
+                (collider.name === 'heightMap') ?
                     new THREE.MeshStandardMaterial({ color: color, flatShading: true }) :
                     new THREE.MeshPhongMaterial({ color: color });
             let child;
             let axisSize;
-            if (collider.name == 'Box') {
+            if (collider.name === 'Box') {
                 child = createBox(collider, mat);
                 axisSize = getBoxAxisSize(collider);
-            } else if (collider.name == 'Capsule') {
+            } else if (collider.name === 'Capsule') {
                 child = createCapsule(collider, mat);
                 axisSize = getCapsuleAxisSize(collider);
-            } else if (collider.name == 'Plane') {
+            } else if (collider.name === 'Plane') {
                 child = createPlane(collider.plane, mat);
-            } else if (collider.name == 'Sphere') {
+            } else if (collider.name === 'Sphere') {
                 child = createSphere(collider, mat);
                 axisSize = getSphereAxisSize(collider);
-            } else if (collider.name == 'HeightMap') {
+            } else if (collider.name === 'HeightMap') {
                 console.log('heightMap not implemented');
                 return;
-            } else if (collider.name == 'Mesh') {
+            } else if (collider.name === 'Mesh') {
                 child = createMesh(collider, mat);
                 axisSize = getMeshAxisSize(collider);
             } else if ('clippedPlane' in collider) {
                 console.log('clippedPlane not implemented');
                 return;
-            } else if (collider.name == 'Convex') {
+            } else if (collider.name === 'Convex') {
                 console.log('convex not implemented');
                 return;
             }
@@ -220,8 +220,8 @@ function createScene(system) {
 
         ids.forEach((id) => {
             // filter out all the data for this specific ID
-            const firstFrame = meshes.filter((mesh) => mesh.some((m) => m.id == id))[0];
-            const verts = firstFrame.filter((m) => m.id == id)[0].verts;
+            const firstFrame = meshes.filter((mesh) => mesh.some((m) => m.id === id))[0];
+            const verts = firstFrame.filter((m) => m.id === id)[0].verts;
 
             const smpl = createSmplPerson(id, faces, verts);
             smplGroup.add(smpl);
@@ -339,9 +339,6 @@ function createSmplPerson(personId, faces, vertices) {
 
     const name = "person_" + personId;
 
-    // compute the number of vertices as the maximum index in the faces (list of list)
-    const numVertices = faces.reduce((max, face) => Math.max(max, ...face), 0) + 1;
-
     // This person isn't yet in the scene so we need to create a new mesh for them.
     const bufferGeometry = new THREE.BufferGeometry();
 
@@ -415,7 +412,7 @@ function createSmplTrajectory(system, scene) {
         // want to get a list of ids where the mesh is visible, need to first map each frame to include
         // the frame id, then filter
         const visibleFrames = allFrames.map((frame, frameId) => {
-            return { frameId: frameId, visible: frame.some((m) => m.id == index) };
+            return { frameId: frameId, visible: frame.some((m) => m.id === index) };
         }
         ).filter((frame) => frame.visible);
         const firstVisible = visibleFrames[0].frameId;

frontend/acquisition/src/components/visualization_js/viewer.js

@@ -37,41 +37,6 @@ function downloadFile(name, contents, mime) {
     link.remove();
 }
 
-/**
- * Toggles the contact point debug in the scene.
- * @param {!ObjType} obj A Scene or Mesh object.
- * @param {boolean} debug Whether to add contact debugging.
- */
-function toggleContactDebug(obj, debug) {
-    for (let i = 0; i < obj.children.length; i++) {
-        let c = obj.children[i];
-        if (c.type == 'AxesHelper') {
-            /* toggle visibility on world axis */
-            c.visible = debug;
-        }
-        if (c.type == 'Group' && c.name && c.name.startsWith('contact')) {
-            /* toggle visibility of all contact points */
-            c.children[0].visible = debug;
-        }
-        if (c.type == 'Group') {
-            /* recurse over group's children */
-            for (let j = 0; j < c.children.length; j++) {
-                toggleContactDebug(c.children[j], debug);
-            }
-        }
-    }
-    if (obj.type == 'Mesh') {
-        /* change opacity for each mesh */
-        if (debug) {
-            obj.material.opacity = 0.6;
-            obj.material.transparent = true;
-        } else {
-            obj.material.opacity = 1.0;
-            obj.material.transparent = false;
-        }
-    }
-}
-
 const hoverMaterial = new THREE.MeshPhongMaterial({ color: 0x332722, emissive: 0x114a67 });
 const selectMaterial = new THREE.MeshPhongMaterial({
     color: 0x1a1a1a, // A darker color
@@ -147,7 +112,7 @@ class Viewer {
 
         this.gui = new GUI({ autoPlace: false });
 
-        if (guiElement != undefined) {
+        if (guiElement !== undefined) {
             guiElement.appendChild(this.gui.domElement);
         } else {
             // if full screen or in an iframe, this works.
@@ -232,7 +197,7 @@ class Viewer {
             // get updated. To get this working, we will need to extract an average
             // position from the morphTargets and use that as the position of the
             // mesh element.
-            if (system.smpl.ids.length == 1) {
+            if (system.smpl.ids.length === 1) {
                 console.log('setting up SMPL follower')
                 const smplGroup = this.scene.getObjectByName('smpl')
                 this.target = smplGroup.children[0];
@@ -296,7 +261,7 @@ class Viewer {
         if (h === undefined) {
             h = this.domElement.clientHeight;
         }
-        if (this.camera.type == 'OrthographicCamera') {
+        if (this.camera.type === 'OrthographicCamera') {
             this.camera.right =
                 this.camera.left + w * (this.camera.top - this.camera.bottom) / h;
         } else {
@@ -324,7 +289,7 @@ class Viewer {
         requestAnimationFrame(() => this.animate());
         this.animator.update();
 
-        const annotationMode = (this.system.smpl != undefined) && (this.system.smpl.ids.length > 1);
+        const annotationMode = (this.system.smpl !== undefined) && (this.system.smpl.ids.length > 1);
         if (this.target && !annotationMode) {
             // make sure the orbiter is pointed at the right target
             const targetPos = new THREE.Vector3();