feat(LLM): 18562 rewrite LLM atom to reatom v3. Add dependency on referenceAreaAtom

package.json

@@ -93,6 +93,7 @@
     "@nebula.gl/edit-modes": "1.1.0-alpha.5",
     "@nebula.gl/layers": "1.1.0-alpha.5",
     "@paypal/react-paypal-js": "^8.5.0",
+    "@reatom/async": "^3.15.2",
     "@reatom/core": "^3.8.3",
     "@reatom/core-v2": "^3.1.4",
     "@reatom/logger": "^3.8.4",

src/features/llm_analytics/atoms/llmAnalyticsResource.ts

@@ -1,24 +1,40 @@
-import { createAsyncAtom } from '~utils/atoms/createAsyncAtom';
+import { reatomResource, withDataAtom, withErrorAtom } from '@reatom/async';
+import { atom } from '@reatom/core';
 import { focusedGeometryAtom } from '~core/focused_geometry/model';
 import { i18n } from '~core/localization';
 import { dispatchMetricsEventOnce } from '~core/metrics/dispatch';
 import { AppFeature } from '~core/auth/types';
 import { isGeoJSONEmpty } from '~utils/geoJSON/helpers';
 import { getLlmAnalysis } from '~core/api/insights';
+import { referenceAreaAtom } from '~core/shared_state/referenceArea';
 import type { LLMAnalyticsData } from '~core/types';
 
-// TODO: rewrite to reatom v3
-export const llmAnalyticsResourceAtom = createAsyncAtom(
-  focusedGeometryAtom,
-  async (fGeo, abortController) => {
-    if (!fGeo) return null;
-    const geometry = fGeo?.geometry as GeoJSON.FeatureCollection;
-    if (isGeoJSONEmpty(geometry)) {
+export const llmAnalyticsAtom = atom((ctx) => {
+  const fetchLlmAnalyticsResult = ctx.spy(fetchLlmAnalyticsResource.dataAtom);
+  const isPending = ctx.spy(fetchLlmAnalyticsResource.pendingAtom) > 0;
+  const error = ctx.spy(fetchLlmAnalyticsResource.errorAtom);
+  return {
+    data: fetchLlmAnalyticsResult,
+    loading: isPending,
+    error: error?.message ?? null,
+  };
+}, 'llmAnalyticsAtom');
+
+export const fetchLlmAnalyticsResource = reatomResource<LLMAnalyticsData | null>(
+  async (ctx) => {
+    const focusedGeometry = ctx.spy(focusedGeometryAtom.v3atom);
+    // we spy on referenceAreaAtom because its change needs to trigger new LLM request
+    const referenceArea = ctx.spy(referenceAreaAtom);
+    const focusedGeoJSON = focusedGeometry?.geometry;
+    if (isGeoJSONEmpty(focusedGeoJSON)) {
       return null;
     }
-    let responseData: LLMAnalyticsData | null | undefined;
+    let responseData: LLMAnalyticsData | null;
     try {
-      responseData = await getLlmAnalysis(geometry, abortController);
+      responseData = await getLlmAnalysis(
+        focusedGeoJSON as GeoJSON.FeatureCollection,
+        ctx.controller,
+      );
     } catch (e: unknown) {
       dispatchMetricsEventOnce(AppFeature.ANALYTICS_PANEL, false);
       throw new Error(i18n.t('analytics_panel.error_loading'));
@@ -30,5 +46,5 @@ export const llmAnalyticsResourceAtom = createAsyncAtom(
     }
     return responseData;
   },
-  'analyticsResource',
-);
+  'fetchLlmAnalyticsResource',
+).pipe(withDataAtom(null), withErrorAtom());

src/features/llm_analytics/components/LLMAnalyticsContainer/LLMAnalyticsContainer.tsx

@@ -1,17 +1,17 @@
-import { useAtom } from '@reatom/react-v2';
+import { useAtom } from '@reatom/npm-react';
 import { LoadingSpinner } from '~components/LoadingSpinner/LoadingSpinner';
 import { ErrorMessage } from '~components/ErrorMessage/ErrorMessage';
 import { createStateMap } from '~utils/atoms';
 import { focusedGeometryAtom } from '~core/focused_geometry/model';
 import { PagesDocument } from '~core/pages';
 import { i18n } from '~core/localization';
+import { llmAnalyticsAtom } from '~features/llm_analytics/atoms/llmAnalyticsResource';
 import { LLMAnalyticsEmptyState } from '../LLMAnalyticsEmptyState/LLMAnalyticsEmptyState';
-import { llmAnalyticsResourceAtom } from '../../atoms/llmAnalyticsResource';
 import { MarkdownWrapper } from '../MarkdownWrapper/MarkdownWrapper';
 
 export const LLMAnalyticsContainer = () => {
-  const [{ error, loading, data }] = useAtom(llmAnalyticsResourceAtom);
-  const [focusedGeometry] = useAtom(focusedGeometryAtom);
+  const [{ error, loading, data }] = useAtom(llmAnalyticsAtom);
+  const [focusedGeometry] = useAtom(focusedGeometryAtom.v3atom);
 
   const statesToComponents = createStateMap({
     error,