Images UI Search fixes (#111)

* Fix off by one bugs in index range

* Fix typos

* Fix image blob data not refreshing on Search

Author: jescalada

src/src/components/AxesPropsPopover/AxesPropsPopover.tsx

@@ -170,14 +170,14 @@ function AxesPropsPopover({
         {
           errorCondition: (value: number) =>
             max === undefined ? false : value > max,
-          errorText: `Value should be equal or smaller then ${max}`,
+          errorText: `Value should be equal or smaller than ${max}`,
         },
       ],
       max: (min?: number) => [
         {
           errorCondition: (value: number) =>
             min === undefined ? false : value < min,
-          errorText: `Value should be equal or greater then ${min}`,
+          errorText: `Value should be equal or greater than ${min}`,
         },
       ],
     }),

src/src/components/ExportPreview/ExportPreview.tsx

@@ -278,11 +278,11 @@ function ExportPreview({
     (min: number, max: number) => [
       {
         errorCondition: (value: number) => value < min,
-        errorText: `Value should be equal or greater then ${min}`,
+        errorText: `Value should be equal or greater than ${min}`,
       },
       {
         errorCondition: (value: number) => value > max,
-        errorText: `Value should be equal or smaller then ${max}`,
+        errorText: `Value should be equal or smaller than ${max}`,
       },
     ],
     [],

src/src/components/MediaList/ImageBox.tsx

@@ -32,15 +32,15 @@ const ImageBox = ({
   const { format, blob_uri } = data;
   const [isImageFullViewPopupOpened, setIsImageFullViewPopupOpened] =
     React.useState<boolean>(false);
-  let [blobData, setBlobData] = React.useState<string>(
+  const [blobData, setBlobData] = React.useState<string>(
     blobsURIModel.getState()[blob_uri] ?? null,
   );
 
   React.useEffect(() => {
     let timeoutID: number;
     let subscription: any;
 
-    if (blobData === null) {
+    if (!blobData) {
       // Get the formatted URI containing the run hash and experiment id
       const formattedUri = data.run.props.experiment.artifact_location
         ? `${data.run.props.experiment.artifact_location}/${data.run.hash}/artifacts/${blob_uri}`

src/src/components/MediaPanel/MediaPanel.tsx

@@ -200,9 +200,11 @@ function MediaPanel({
     if (blobUriArray.current.includes(blobUrl)) {
       return;
     }
+    /* jescalada: removing this refreshes the image when clicking Search
     if (processedBlobUriArray.current.includes(blobUrl)) {
       return;
     }
+    */
 
     blobUriArray.current.push(blobUrl);
     getBatch();

src/src/components/RangePanel/RangePanel.tsx

@@ -28,7 +28,7 @@ function RangePanel({
         {items?.map((item) => {
           const rangeLength = _.range(
             item.rangeEndpoints?.[0] ?? 0,
-            (item.rangeEndpoints?.[1] ?? 0) + 1,
+            (item.rangeEndpoints?.[1] ?? 0) + 2,
           ).length;
           return (
             <React.Fragment key={item.sliderName}>
@@ -40,7 +40,7 @@ function RangePanel({
                   countTitleTooltip={item.inputTitleTooltip}
                   sliderTitleTooltip={item.sliderTitleTooltip}
                   min={item.rangeEndpoints?.[0]}
-                  max={item.rangeEndpoints?.[1]}
+                  max={item.rangeEndpoints?.[1] + 1}
                   selectedRangeValue={item.selectedRangeValue}
                   selectedCountValue={item.inputValue}
                   onSearch={onApply}
@@ -54,13 +54,13 @@ function RangePanel({
                     item?.inputValidationPatterns ?? [
                       {
                         errorCondition: (value: string | number) => +value <= 0,
-                        errorText: `Value should be greater then ${0}`,
+                        errorText: `Value should be greater than ${0}`,
                       },
                       {
                         errorCondition: (value: string | number) => {
                           return +value > rangeLength;
                         },
-                        errorText: `Value should be smaller then ${
+                        errorText: `Value should be smaller than ${
                           rangeLength + 1
                         }`,
                       },

src/src/components/kit/Input/Input.test.tsx

@@ -32,12 +32,12 @@ describe('<InputWrapper /> -', () => {
 
     const minValidationPattern = {
       errorCondition: (value: any) => value < 10,
-      errorText: `Value should be equal or greater then ${min}`,
+      errorText: `Value should be equal or greater than ${min}`,
     };
 
     const maxValidationPattern = {
       errorCondition: (value: any) => value > max,
-      errorText: `Value should be equal or smaller then ${max}`,
+      errorText: `Value should be equal or smaller than ${max}`,
     };
 
     const zeroValidationPattern = {

src/src/modules/BaseExplorer/components/Controls/ConfigureAxes/Popover/AxesRange.tsx

@@ -95,14 +95,14 @@ function AxesRange(props: IAxesRangeProps) {
         {
           errorCondition: (value: number) =>
             max === undefined ? false : value > max,
-          errorText: `Value should be equal or smaller then ${max}`,
+          errorText: `Value should be equal or smaller than ${max}`,
         },
       ],
       max: (min?: number) => [
         {
           errorCondition: (value: number) =>
             min === undefined ? false : value < min,
-          errorText: `Value should be equal or greater then ${min}`,
+          errorText: `Value should be equal or greater than ${min}`,
         },
       ],
     }),

src/src/modules/BaseExplorer/components/RangePanel/RangePanelItem.tsx

@@ -61,13 +61,13 @@ const RangePanelItem = ({
     () => [
       {
         errorCondition: (value: string | number) => +value <= 0,
-        errorText: `Value should be greater then ${0}`,
+        errorText: `Value should be greater than ${0}`,
       },
       {
         errorCondition: (value: string | number) => {
           return +value > rangeLength;
         },
-        errorText: `Value should be smaller then ${rangeLength + 1}`,
+        errorText: `Value should be smaller than ${rangeLength + 1}`,
       },
     ],
     [rangeLength],

src/src/modules/BaseExplorer/components/RangePanel/helpers.ts

@@ -25,7 +25,7 @@ export function getRangeAndDensityData(
   ];
   // calculating the items count in range
   const rangeTotalCount = total[1] - total[0] === 0 ? 1 : total[1] - total[0];
-  // checking if the previous density is bigger then the items in the total range.
+  // checking if the previous density is bigger than the items in the total range.
   // setting the density value to the items count otherwise setting the the previous density.
   const density: number =
     prevDensity > rangeTotalCount ? rangeTotalCount : prevDensity;

src/src/services/models/imagesExplore/imagesExploreAppModel.ts

@@ -366,7 +366,7 @@ function getImagesData(
         !_.isEmpty(indexSlice) &&
         !_.isNil(recordSlice?.[0]) &&
         !_.isNil(recordSlice[1])
-          ? `${indexSlice?.[0]}:${(indexSlice?.[1] || 0) + 1}`
+          ? `${indexSlice?.[0]}:${indexSlice?.[1] || 0}`
           : '',
       record_density:
         !_.isNil(recordDensity) && +recordDensity > 0 ? recordDensity : '',
@@ -682,8 +682,9 @@ function setModelData(rawData: any[], configData: IImagesExploreAppConfig) {
       ranges?.index_range_total[0] - 1,
       ranges?.index_range_total[1] + 1,
     )
-      ? ranges?.index_range_used[1] - 1
-      : ranges?.index_range_total[1] - 1,
+      ? // jescalada: Removed the "-1" in order to match the backend behavior
+        ranges?.index_range_used[1]
+      : ranges?.index_range_total[1],
   ];
   const recordRangeTotalCount =
     ranges?.record_range_total[1] - 1 - ranges?.record_range_total[0];