Merge pull request #148 from Appsilon/kamil.apply-review-suggestions

Apply Marek's review suggestions
Appsilon · Feb 1, 2021 · 54f05ef · 54f05ef
2 parents 747bd95 + 1ada9a1
commit 54f05ef
Show file tree

Hide file tree

Showing 32 changed files with 175 additions and 422 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -7,5 +7,6 @@
       }
     }
   ],
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 100
 }
diff --git a/app/actions/classify.ts b/app/actions/classify.ts
@@ -9,9 +9,7 @@ export interface ChangeDirectoryChoiceAction {
   };
 }
 
-export function changeDirectoryChoice(
-  newDirectoryChoice: string
-): ChangeDirectoryChoiceAction {
+export function changeDirectoryChoice(newDirectoryChoice: string): ChangeDirectoryChoiceAction {
   return {
     type: CHANGE_DIRECTORY_CHOICE,
     newDirectoryChoice,
@@ -26,9 +24,7 @@ export interface ChangeSavePathChoiceAction {
   newSavePathChoice: string;
 }
 
-export function changeSavePathChoice(
-  newSavePathChoice: string
-): ChangeSavePathChoiceAction {
+export function changeSavePathChoice(newSavePathChoice: string): ChangeSavePathChoiceAction {
   return {
     type: CHANGE_SAVE_PATH_CHOICE,
     newSavePathChoice

diff --git a/app/components/Classifier.tsx b/app/components/Classifier.tsx
@@ -19,12 +19,7 @@ import { TFunction } from 'i18next';
 
 import PythonLogViewer from './PythonLogViewer';
 import showSaveCsvDialog from '../utils/showSaveCsvDialog';
-import {
-  isDev,
-  isLinux,
-  isWin,
-  rootModelsDirectory
-} from '../utils/environment';
+import { isDev, isLinux, isWin, rootModelsDirectory } from '../utils/environment';
 import MissingModelsMessage from './MissingModelsMessage';
 
 type changeLogMessageType = (newChangeLogMessage: string | null) => {};
@@ -48,14 +43,8 @@ function displayWarningToast(message: string) {
   });
 }
 
-function runModelProcess(
-  baseArgs: string[],
-  t: TFunction
-): ChildProcessWithoutNullStreams | null {
-  const gridFilePath = path.join(
-    rootModelsDirectory,
-    'biomonitoring_stations.csv'
-  );
+function runModelProcess(baseArgs: string[], t: TFunction): ChildProcessWithoutNullStreams | null {
+  const gridFilePath = path.join(rootModelsDirectory, 'biomonitoring_stations.csv');
 
   let workdir;
   let program;
@@ -77,9 +66,7 @@ function runModelProcess(
     program = path.join(workdir, 'main');
     args.push(command);
   } else {
-    throw new Error(
-      `Unsupported operating system for running models: ${process.platform}`
-    );
+    throw new Error(`Unsupported operating system for running models: ${process.platform}`);
   }
 
   if (!fs.existsSync(program)) {
@@ -90,9 +77,7 @@ function runModelProcess(
   if (fs.existsSync(gridFilePath)) {
     args.push('--grid_file', gridFilePath);
   } else {
-    displayWarningToast(
-      t('classify.biomonitoringStationsFileNotFound', { gridFilePath })
-    );
+    displayWarningToast(t('classify.biomonitoringStationsFileNotFound', { gridFilePath }));
   }
 
   args.push(...baseArgs);
@@ -110,11 +95,7 @@ const computePredictions = (
   setExitCode: (value: number | null | undefined) => void,
   t: TFunction
 ) => {
-  const modelWeightsPath = path.join(
-    rootModelsDirectory,
-    modelName,
-    'trained_model.pkl'
-  );
+  const modelWeightsPath = path.join(rootModelsDirectory, modelName, 'trained_model.pkl');
 
   const args: string[] = [
     '--input_folder',
@@ -251,10 +232,7 @@ export default function Classifier(props: Props) {
           type="submit"
           className="bp3-button bp3-minimal bp3-intent-primary bp3-icon-search"
           onClick={() => {
-            showSaveCsvDialog(
-              'classification_result.csv',
-              changeSavePathChoice
-            );
+            showSaveCsvDialog('classification_result.csv', changeSavePathChoice);
           }}
         />
       </div>
@@ -324,18 +302,12 @@ export default function Classifier(props: Props) {
   );
 
   return (
-    <div
-      style={{ flex: 1, overflowY: 'scroll', maxHeight: 'calc(100vh - 50px)' }}
-    >
+    <div style={{ flex: 1, overflowY: 'scroll', maxHeight: 'calc(100vh - 50px)' }}>
       <div style={{ display: 'flex' }}>
         <div style={{ flex: 1, padding: '20px' }}>
           <Card elevation={Elevation.TWO}>
             <H1>{t('classify.title')}</H1>
-            {rootModelsDirectoryExists ? (
-              classifierFormView
-            ) : (
-              <MissingModelsMessage />
-            )}
+            {rootModelsDirectoryExists ? classifierFormView : <MissingModelsMessage />}
           </Card>
         </div>
         <div style={{ flex: 1, padding: '20px' }}>

diff --git a/app/components/Map.tsx b/app/components/Map.tsx
@@ -65,10 +65,7 @@ function makeStationMarker(
 
   const markerElement = document.createElement('div');
   markerElement.className = 'marker';
-  markerElement.setAttribute(
-    'style',
-    `width: ${diameter}px; height: ${diameter}px;`
-  );
+  markerElement.setAttribute('style', `width: ${diameter}px; height: ${diameter}px;`);
   ReactDOM.render(
     <img
       src={firstObservation.location}
@@ -131,11 +128,7 @@ function makeStationMarker(
 
   const marker = new mapboxgl.Marker(markerElement)
     .setLngLat(coordinates)
-    .setPopup(
-      new mapboxgl.Popup({ offset: diameter / 2 }).setDOMContent(
-        popupContentPlaceholder
-      )
-    );
+    .setPopup(new mapboxgl.Popup({ offset: diameter / 2 }).setDOMContent(popupContentPlaceholder));
   return marker;
 }
 

diff --git a/app/components/MissingModelsMessage.tsx b/app/components/MissingModelsMessage.tsx
@@ -2,22 +2,20 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { NonIdealState } from '@blueprintjs/core';
 import { shell } from 'electron';
+import path from 'path';
 
 import { userDataPath } from '../utils/environment';
 
 export default function MissingModelsMessage() {
   const { t } = useTranslation();
 
   return (
-    <NonIdealState
-      icon="search"
-      title={t('classify.modelsDirectoryMissing.title')}
-    >
+    <NonIdealState icon="search" title={t('classify.modelsDirectoryMissing.title')}>
       <p>
         {t('classify.modelsDirectoryMissing.description1')}
         {/* eslint-disable-next-line */}
         <a onClick={() => shell.openItem(userDataPath)}>{userDataPath}</a>
-        /models
+        {`${path.sep}models`}
         {t('classify.modelsDirectoryMissing.description2')}
       </p>
     </NonIdealState>

diff --git a/app/components/ObservationsInspector.tsx b/app/components/ObservationsInspector.tsx
@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  Card,
-  Classes,
-  Drawer,
-  Elevation,
-  Position,
-  Tooltip
-} from '@blueprintjs/core';
+import { Card, Classes, Drawer, Elevation, Position, Tooltip } from '@blueprintjs/core';
 import { useTranslation } from 'react-i18next';
 import path from 'path';
 import CreatableSelect from 'react-select/creatable';
@@ -17,14 +10,14 @@ import { taxonOptions } from '../constants/taxons';
 type ObservationCardProps = {
   observation: Observation;
   predictionOverride?: CreatableOption;
-  onPredictionOverride: (location: string, prediction: CreatableOption) => void;
+  onPredictionOverride: PredictionOverrideHandler;
 };
 
 function ObservationCard(props: ObservationCardProps) {
   const { observation, predictionOverride, onPredictionOverride } = props;
   const { t } = useTranslation();
 
-  const handlePredictionOverride = (newValue: CreatableOption) => {
+  const handlePredictionOverride = (newValue: CreatableOption | null) => {
     onPredictionOverride(observation.location, newValue);
   };
 
@@ -34,12 +27,69 @@ function ObservationCard(props: ObservationCardProps) {
     [formatAnimalClassName(observation.pred_3), observation.score_3]
   ];
 
+  const predictionsTable = (
+    <table className="bp3-html-table bp3-html-table-condensed">
+      <thead>
+        <tr>
+          <th>{t('explore.inspect.prediction')}</th>
+          <th>{t('explore.inspect.probability')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {predictions.map(i => (
+          <tr key={i[0]}>
+            <td>{i[0]}</td>
+            <td>
+              {((i[1] as number) * 100).toFixed(2)}
+              &nbsp;%
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+  const predictionOverrideWidget = (
+    <Tooltip content={t('explore.inspect.overrideTooltip')} position={Position.RIGHT}>
+      <div style={{ width: 250 }}>
+        <CreatableSelect
+          name={predictionOverride}
+          value={predictionOverride}
+          onChange={handlePredictionOverride}
+          isClearable
+          placeholder={t('explore.inspect.overridePlaceholder')}
+          options={taxonOptions}
+        />
+      </div>
+    </Tooltip>
+  );
+  const photoDetails = (
+    <div style={{ margin: '20px 10px' }}>
+      <p>
+        <strong>
+          {t('explore.inspect.camera')}
+          :&nbsp;
+        </strong>
+        {observation.camera}
+      </p>
+      <p>
+        <strong>
+          {t('explore.inspect.check')}
+          :&nbsp;
+        </strong>
+        {observation.check}
+      </p>
+      <p>
+        <strong>
+          {t('explore.inspect.file')}
+          :&nbsp;
+        </strong>
+        {path.basename(observation.location)}
+      </p>
+    </div>
+  );
+
   return (
-    <Card
-      elevation={Elevation.TWO}
-      key={observation.location}
-      style={{ marginTop: 10 }}
-    >
+    <Card elevation={Elevation.TWO} key={observation.location} style={{ marginTop: 10 }}>
       <h3 style={{ marginTop: 0 }}>
         {t('explore.inspect.photoHeader', {
           species: formatAnimalClassName(observation.pred_1),
@@ -48,70 +98,12 @@ function ObservationCard(props: ObservationCardProps) {
       </h3>
       <div style={{ display: 'flex' }}>
         <div>
-          <img
-            src={observation.location}
-            width={400}
-            alt={observation.pred_1}
-          />
+          <img src={observation.location} width={400} alt={observation.pred_1} />
         </div>
         <div style={{ marginLeft: 24 }}>
-          <table className="bp3-html-table bp3-html-table-condensed">
-            <thead>
-              <tr>
-                <th>{t('explore.inspect.prediction')}</th>
-                <th>{t('explore.inspect.probability')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {predictions.map(i => (
-                <tr key={i[0]}>
-                  <td>{i[0]}</td>
-                  <td>
-                    {((i[1] as number) * 100).toFixed(2)}
-                    &nbsp;%
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-          <Tooltip
-            content={t('explore.inspect.overrideTooltip')}
-            position={Position.RIGHT}
-          >
-            <div style={{ width: 250 }}>
-              <CreatableSelect
-                name={predictionOverride}
-                value={predictionOverride}
-                onChange={handlePredictionOverride}
-                isClearable
-                placeholder={t('explore.inspect.overridePlaceholder')}
-                options={taxonOptions}
-              />
-            </div>
-          </Tooltip>
-          <div style={{ margin: '20px 10px' }}>
-            <p>
-              <strong>
-                {t('explore.inspect.camera')}
-                :&nbsp;
-              </strong>
-              {observation.camera}
-            </p>
-            <p>
-              <strong>
-                {t('explore.inspect.check')}
-                :&nbsp;
-              </strong>
-              {observation.check}
-            </p>
-            <p>
-              <strong>
-                {t('explore.inspect.file')}
-                :&nbsp;
-              </strong>
-              {path.basename(observation.location)}
-            </p>
-          </div>
+          {predictionsTable}
+          {predictionOverrideWidget}
+          {photoDetails}
         </div>
       </div>
     </Card>
@@ -121,19 +113,12 @@ function ObservationCard(props: ObservationCardProps) {
 type ObservationsInspectorProps = {
   observations: Observation[];
   onClose: () => void;
-  predictionOverrides: Record<string, CreatableOption>;
-  onPredictionOverride: (location: string, prediction: CreatableOption) => void;
+  predictionOverrides: PredictionOverridesMap;
+  onPredictionOverride: PredictionOverrideHandler;
 };
 
-export default function ObservationsInspector(
-  props: ObservationsInspectorProps
-) {
-  const {
-    observations,
-    onClose,
-    predictionOverrides,
-    onPredictionOverride
-  } = props;
+export default function ObservationsInspector(props: ObservationsInspectorProps) {
+  const { observations, onClose, predictionOverrides, onPredictionOverride } = props;
   const { t } = useTranslation();
   if (observations.length === 0) {
     return null;