feat: Worker progress curtain

src/common/helpers/fake-progress.ts

@@ -0,0 +1,17 @@
+export const fakeProgress = (durationInMs: number, progress: (fakePercent: number) => void) => {
+  const startTime = performance.now();
+
+  const timer = setInterval(() => {
+    const passedTimeFromTheBeginning = performance.now() - startTime;
+    const ratioOfPassedTime = Math.min(passedTimeFromTheBeginning / durationInMs, 1);
+
+    // Fast-start easing: (1 - (1 - x)^2) slows down towards the end
+    const fakePercent = Math.floor((1 - Math.pow(1 - ratioOfPassedTime, 2)) * 95);
+    progress(fakePercent);
+
+    if (fakePercent >= 95) {
+      clearInterval(timer);
+    }
+  }, 200);
+  return () => clearInterval(timer);
+};

src/common/helpers/http.ts

@@ -0,0 +1,31 @@
+const DEFAULT_TIMEOUT = 5000;
+
+export const abortableFetch = async (url: string) => {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), DEFAULT_TIMEOUT);
+
+  try {
+    const response = await fetch(url, {
+      signal: controller.signal,
+    });
+
+    clearTimeout(timeoutId);
+
+    return response;
+  } catch (err) {
+    throw err;
+  }
+};
+
+export async function safeRead(
+  reader: ReadableStreamDefaultReader<Uint8Array<ArrayBuffer>>
+): Promise<ReadableStreamReadResult<Uint8Array<ArrayBuffer>>> {
+  const result = await Promise.race<ReadableStreamReadResult<Uint8Array<ArrayBuffer>>>([
+    reader.read(),
+    new Promise<never>((_, reject) =>
+      setTimeout(() => reject(new Error('Stalled connection')), DEFAULT_TIMEOUT)
+    ),
+  ]);
+
+  return result;
+}

src/common/i18n/en.json

@@ -66,6 +66,8 @@
   "general.more.text": "more...",
   "general.missing.translation": "##MISSING_TRANSLATION##",
   "general.search.placeholder": "Search...",
+  "general.invalid.geometry": "Invalid geometry {value}",
+  "general.http.empty-stream.error": "No data was received",
 
   "terrain-provider.access.error": "Unavailable terrain information",
 
@@ -874,5 +876,16 @@
   "export-layer.validations.relations.lower": "lower than-",
   "export-layer.validations.relations.lowerOrEqual": "lower or equal to-",
   "export-layer.validations.relations.equal": "equals to-",
-  "export-layer.validations.againstOtherField": "Value should be {relation} field {fieldName}"
+  "export-layer.validations.againstOtherField": "Value should be {relation} field {fieldName}",
+
+  "progress.titleProcess": "process",
+  "progress.titleProgress": "progress",
+  "progress.titleTime": "time (ms)",
+
+  "progress.stage.init": "Boot",
+  "progress.stage.load": "Loading",
+  "progress.stage.parsing": "Preparing info",
+  "progress.stage.cache": "Cache",
+  "progress.stage.updateAreas": "Calculating areas",
+  "progress.stage.computeOuterGeometry": "Calculating perimeter"
 }

src/common/i18n/he.json

@@ -66,6 +66,8 @@
   "general.more.text": "עוד...",
   "general.missing.translation": "##MISSING_TRANSLATION##",
   "general.search.placeholder": "חיפוש...",
+  "general.invalid.geometry": "גיאומטריה {value} לא תקינה",
+  "general.http.empty-stream.error": "לא התקבלו נתונים מההורדה",
 
   "terrain-provider.access.error": "מידע פני השטח לא זמין",
 
@@ -874,5 +876,16 @@
   "export-layer.validations.relations.lower": "קטן מ-",
   "export-layer.validations.relations.lowerOrEqual": "קטן או שווה מ-",
   "export-layer.validations.relations.equal": "שווה ל-",
-  "export-layer.validations.againstOtherField": "הערך צריך להיות {relation} שדה {fieldName}"
+  "export-layer.validations.againstOtherField": "הערך צריך להיות {relation} שדה {fieldName}",
+
+  "progress.titleProcess": "תהליך",
+  "progress.titleProgress": "התקדמות",
+  "progress.titleTime": "זמן (ms)",
+
+  "progress.stage.init": "מאתחל",
+  "progress.stage.load": "טעינה",
+  "progress.stage.parsing": "הכנת המידע",
+  "progress.stage.cache": "מטמון",
+  "progress.stage.updateAreas": "חישוב השטחים",
+  "progress.stage.computeOuterGeometry": "חישוב ההיקף"
 }

src/discrete-layer/components/layer-details/raster/entity.raster.dialog.tsx

@@ -51,11 +51,6 @@ import { RasterWorkflowProvider, RasterWorkflowContext } from './state-machine/c
 import { getUIIngestionFieldDescriptors } from './utils';
 
 import './entity.raster.dialog.css';
-/*****START: REMOVE IT !!!!!!!!!!!!!!!! */
-import { useWorkerAPI } from './worker/useWorkerAPI';
-import { FeatureCollection } from 'geojson';
-import { MOCK_POLYGON } from './state-machine/MOCK';
-/*****END: REMOVE IT !!!!!!!!!!!!!!!! */
 
 const DEFAULT_ID = 'DEFAULT_UI_ID';
 const DEFAULT_TYPE_NAME = 'DEFAULT_TYPE_NAME';
@@ -161,61 +156,8 @@ export const EntityRasterDialog: React.FC<EntityRasterDialogProps> = observer(
       return buildRasterRecord(descriptors);
     };
 
-    /*****START: REMOVE IT !!!!!!!!!!!!!!!! */
-    const api = useWorkerAPI();
-    const intl = useIntl();
-    const handleRun = async () => {
-      if (!api) return;
-      const FC: FeatureCollection = { type: 'FeatureCollection', features: [] };
-      for (let i = 0; i < 10000; i++) {
-        FC.features.push({
-          type: 'Feature',
-          geometry: MOCK_POLYGON,
-          properties: null,
-        });
-      }
-      await api.init.method();
-      // await api.load.method(FC);
-      await api.loadFromShapeFile.method(
-        'https://download-int.mapcolonies.net/api/raster/v1/downloads/validation-reports/a80296ad-06f4-4d3c-9c2d-8982eb65d04b/vivid_ihud_orthophoto_v3.0_report_2026-02-04T15:32:09.836Z.zip',
-        {
-          customProperties: {
-            _key: 'featureKey',
-            _featureLabel: intl.formatMessage({ id: 'resolutionConflict.partName' }),
-            _zoomLevel: '9',
-            // _featureType: 'LOW_RESOLUTION_PP'
-          },
-        }
-      );
-      await api.updateAreas.method();
-      const outerPerimeterGeom = await api.computeOuterGeometry.method();
-      console.log('api.computeOuterGeometry:', outerPerimeterGeom);
-
-      // await api.query.method({
-      //       minX: 53.028770883699195,
-      //       minY: 22.697544881824143,
-      //       maxX: 61.174158863397594,
-      //       maxY: 29.21600387903102
-      //     }); //1066
-      await api.query.method({
-        minX: 54.35290071061968,
-        minY: 25.72995702729723,
-        maxX: 55.45933754011244,
-        maxY: 26.38730710623136,
-      }); //11
-
-      const updatedFC = await api.getFeatureCollection.method();
-      console.log('api.getFeatureCollection:', updatedFC.features.length);
-    };
-    /*****END: REMOVE IT !!!!!!!!!!!!!!!! */
-
     return (
       <RasterWorkflowProvider>
-        {/*****START: REMOVE IT !!!!!!!!!!!!!!!! */}
-        <button onClick={handleRun} style={{ width: '100px', height: '30px', zIndex: 50 }}>
-          Run {`${api?.updateAreas.progress?.message} ${api?.loadFromShapeFile.progress?.message}`}
-        </button>
-        {/*****END: REMOVE IT !!!!!!!!!!!!!!!! */}
         <EntityRasterDialogInner
           {...props}
           layerRecord={getRecordLayer(job)}

src/discrete-layer/components/layer-details/raster/progressCurtain/progressCurtain.css

@@ -0,0 +1,107 @@
+.relativePosition {
+  position: relative;
+}
+
+#progressCurtain {
+  position: absolute;
+  display: flex;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-weight: 600;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+  background-color: rgba(0, 0, 0, 0.6);
+  font-size: 2ch;
+  overflow-y: auto;
+}
+
+#progressCurtain .curtainRow {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  color: var(--mdc-theme-text-primary-on-background);
+  text-align: center;
+  padding: 2ch;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
+}
+
+#progressCurtain .titles {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 2ch 6ch;
+}
+
+#progressCurtain .titleIconSpacer {
+  min-width: 36px;
+}
+
+#progressCurtain .titleProcess {
+  min-width: 20ch;
+  padding: 0 0.5ch;
+  text-align: start;
+}
+
+#progressCurtain .titleProgress {
+  min-width: 10ch;
+  text-align: end;
+}
+
+#progressCurtain .titleTime {
+  min-width: 8ch;
+  text-align: end;
+}
+
+#progressCurtain .curtainRow .icon {
+  font-size: 24px;
+  padding: 0px 8px;
+}
+
+#progressCurtain .processName {
+  min-width: 24ch;
+  display: inline-block;
+  text-align: start;
+  padding: 0 0.5ch;
+}
+
+#progressCurtain .info {
+  display: flex;
+  gap: 4ch;
+}
+
+#progressCurtain .progress {
+  min-width: 8ch;
+  text-align: start;
+}
+
+body[dir='rtl'] #progressCurtain .progress {
+  text-align: end;
+}
+
+#progressCurtain .elapsedTime {
+  min-width: 8ch;
+  text-align: start;
+}
+
+body[dir='rtl'] #progressCurtain .elapsedTime {
+  text-align: end;
+}
+
+#progressCurtain .errorsContainer {
+  display: flex;
+  justify-self: end;
+  height: 10ch;
+  padding-top: 10ch;
+}
+
+#progressCurtain .curtainRow.inactive {
+  opacity: 0.6;
+}
+
+#progressCurtain .curtainRow.blink {
+  animation: blink 3s ease-in-out infinite alternate;
+}