Bug fixes; Update URLs to match autoindexJson v1

saravanabalagi · saravanabalagi · commit 015ae9ff9d68 · 2021-07-30T18:56:24.000+01:00
diff --git a/client/README.md b/client/README.md
@@ -20,7 +20,7 @@ The app is fully functional offline after the initial page load, except for the
 
 ## Serving dataset files
 
-The web-client expect the dataset files to be downloadable at `/files`, with an [autoindex JSON API](https://www.npmjs.com/package/autoindex-json) conforming to [NGINX JSON autoindex](http://nginx.org/en/docs/http/ngx_http_autoindex_module.html#autoindex_format) output standards for browsing the data directories at `/files?path=<path>`.
+The web-client expect the dataset files to be downloadable at `/files`, with an [autoindex JSON API](https://www.npmjs.com/package/autoindex-json) conforming to [NGINX JSON autoindex](http://nginx.org/en/docs/http/ngx_http_autoindex_module.html#autoindex_format) output standards for browsing the data directories at `/files/<path>`.
 
 ## Setting up with a Custom Server
 
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "odoviz-react-client",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "repository": "https://github.com/robotvisionmu/odoviz/tree/main/client",
   "author": "Saravanabalagi Ramachandran <saravanabalagi@hotmail.com>",
diff --git a/client/public/index.html b/client/public/index.html
@@ -19,7 +19,7 @@
     work correctly both with client-side routing and a non-root public URL.
     Learn how to configure a non-root public URL by running `npm run build`.
   -->
-  <title>Odoviz | 3D Odometry Visualization and Processing Tool</title>
+  <title>OdoViz | 3D Odometry Visualization and Processing Tool</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/client/src/extensions/distances/distances.js b/client/src/extensions/distances/distances.js
@@ -40,8 +40,7 @@ class Distances extends Component {
     this.state = {
       loading: null,
       error: null,
-      sideBar: false,
-      imagesToDisplay: {},
+      sideBar: true,
       selectedIndex: null,
       compareIndex: 1,
       localTopKToDisplay: props.topKToDisplay,
@@ -97,8 +96,8 @@ class Distances extends Component {
     this.setState({ loading: false });
   };
 
-  setImagesToDisplay = (e) => {
-    const i = parseInt(e.currentTarget.getAttribute('i'));
+  getImagesToDisplay = (i) => {
+    if (i == null) return {};
     const { distancesNpzs, currentDistancesIndex, topKToDisplay, skip0thMatch } = this.props;
     const distances = distancesNpzs && distancesNpzs[currentDistancesIndex];
     const imagesToDisplay = [...Array(topKToDisplay + skip0thMatch).keys()].reduce((result, j, dict_index) => {
@@ -107,7 +106,7 @@ class Distances extends Component {
       result[dict_index] = [this.getImagePath(label, index), [label, index]];
       return result;
     }, {});
-    this.setState({ imagesToDisplay, sideBar: true, selectedIndex: i });
+    return imagesToDisplay;
   };
 
   getImagePath = (label, index) => {
@@ -127,6 +126,15 @@ class Distances extends Component {
     this.setState({ compareIndex: index });
   };
 
+  setSelectedIndex = (index) => {
+    this.setState({ selectedIndex: index });
+  };
+
+  handleSetSelectedIndex = (e) => {
+    const index = parseInt(e.currentTarget.getAttribute('i'));
+    this.setSelectedIndex(index);
+  };
+
   handleSetCompareIndex = (e) => {
     const index = parseInt(e.currentTarget.getAttribute('j'));
     this.setCompareIndex(index);
@@ -137,8 +145,8 @@ class Distances extends Component {
   };
 
   handleSetTopKDisplay = (e, value) => {
+    this.setState((s) => ({ localTopKToDisplay: value, compareIndex: s.compareIndex > value ? 1 : s.compareIndex }));
     this.props.setTopKToDisplay(value);
-    this.setState({ localTopKToDisplay: value });
   };
 
   handleSetSkip0thMatch = (e, value) => {
@@ -164,7 +172,8 @@ class Distances extends Component {
     const { loading, error, sideBar } = this.state;
     const { topKToDisplay, skip0thMatch, dataFile, dataJson, distancesNpzs, distancesFiles, currentDistancesIndex } =
       this.props;
-    const { imagesToDisplay, selectedIndex, compareIndex, localTopKToDisplay } = this.state;
+    const { selectedIndex, compareIndex, localTopKToDisplay } = this.state;
+    const imagesToDisplay = this.getImagesToDisplay(selectedIndex);
 
     const steps = this.getAllSteps();
     const distanceIndexMarks = steps.map((step, i) => ({
@@ -319,7 +328,7 @@ class Distances extends Component {
                           className={classnames('row', { selected: i === selectedIndex })}
                           key={i}
                           i={i}
-                          onClick={this.setImagesToDisplay}
+                          onClick={this.handleSetSelectedIndex}
                         >
                           <Grid container spacing={1} direction={'row'} wrap={'nowrap'}>
                             <Grid item className={'displayImagesIcon'}>
diff --git a/client/src/extensions/explorer/explorer.js b/client/src/extensions/explorer/explorer.js
@@ -81,7 +81,7 @@ class Explorer extends Component {
   fetchDir = async (path) => {
     this.setState({ loading: true });
     try {
-      const response = await fetch(`/files?path=${path}`);
+      const response = await fetch(`/files/${path}`);
       if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
       const data = await response.json();
       this.setState({ files: data || [], loading: false, error: data.error });
diff --git a/client/src/extensions/matching/matching.js b/client/src/extensions/matching/matching.js
@@ -123,8 +123,8 @@ class Matching extends Component {
     const carsGroup = scene.getObjectByName('cars');
     if (carsGroup) carsSubgroups = carsGroup.children;
 
-    const queryCars = carsSubgroups[0].children.map((car) => car.data);
-    const refCarsArray = carsSubgroups.slice(1).map((carsSubgroup) => carsSubgroup.children.map((car) => car.data));
+    const queryCars = carsSubgroups[0].children;
+    const refCarsArray = carsSubgroups.slice(1).map((carsSubgroup) => carsSubgroup.children);
     exportPoses(queryCars, refCarsArray);
   };
 
diff --git a/client/src/matcher/oxfordRobotcarMatcher.js b/client/src/matcher/oxfordRobotcarMatcher.js
@@ -130,15 +130,15 @@ function exportPoses(queryCars, matchedCarsArray) {
     // and add them based on query index inside
     for (let i = 0; i < matchedCars.length; i++) {
       const matchedCar = matchedCars[i];
-      classes[matchedCar.samplingIndex].push(matchedCar);
+      classes[matchedCar.data.matchingForSamplingIndex].push(matchedCar);
     }
   }
 
   const classesWithPath = {};
   Object.entries(classes).forEach(([key, values]) => {
     classesWithPath[key] = [];
     values.forEach((car) => {
-      const imagePath = getImgPath(car.image.value, car.parent.name);
+      const imagePath = getImgPath(car.data.image.stereo_centre, car.parent.name);
       classesWithPath[key].push(imagePath);
     });
   });
diff --git a/client/src/parsers/oxfordRobotcarParser.js b/client/src/parsers/oxfordRobotcarParser.js
@@ -34,7 +34,7 @@ async function parseFn(data, filePath) {
   console.debug('Total INS timestamps', dataLines.length);
 
   const imageFolder = getImgPath(null, filePath);
-  const response = await fetch(`/files?path=${imageFolder}`);
+  const response = await fetch(`/files/${imageFolder}`);
   const responseData = await response.json();
   const filenames = responseData
     .filter((f) => f.type === 'file')
diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "odoviz",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A reactive web-based odometry 3D visualization and processing tool",
   "repository": "git@github.com:robotvisionmu/odoviz.git",
   "author": "Saravanabalagi Ramachandran <saravanabalagi@hotmail.com>",
   "license": "MIT",
   "dependencies": {
-    "autoindex-json": "^0.2.0",
+    "autoindex-json": "^1.0.0",
     "express": "^4.17.1",
     "express-pino-logger": "^4.0.0",
     "pino-colada": "^1.4.4"
diff --git a/server.js b/server.js
@@ -11,7 +11,7 @@ const PORT = process.env.ODOVIZ_PORT || 3000;
 const DATA_DIR = process.env.ODOVIZ_DATA_DIR;
 
 if (DATA_DIR == null) {
-  console.error("Please specify ODOVIZ_DATA_DIR environment variable before initializing OdoViz");
+  console.error('Please specify ODOVIZ_DATA_DIR environment variable before initializing OdoViz');
   process.exit();
 }
 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "odoviz-react-client",`
`3`		`- "version": "1.0.0",`
	`3`	`+ "version": "1.0.1",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"repository": "https://github.com/robotvisionmu/odoviz/tree/main/client",`
`6`	`6`	`"author": "Saravanabalagi Ramachandran <saravanabalagi@hotmail.com>",`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const PORT = process.env.ODOVIZ_PORT \|\| 3000;`
`11`	`11`	`const DATA_DIR = process.env.ODOVIZ_DATA_DIR;`
`12`	`12`
`13`	`13`	`if (DATA_DIR == null) {`
`14`		`- console.error("Please specify ODOVIZ_DATA_DIR environment variable before initializing OdoViz");`
	`14`	`+ console.error('Please specify ODOVIZ_DATA_DIR environment variable before initializing OdoViz');`
`15`	`15`	`process.exit();`
`16`	`16`	`}`
`17`	`17`