chore: Remove VEDA dependency (as much as possible) (#1367)

**Related Ticket:** #1360 ### Description of Changes The reason I started looking at is I noticed that our library build has assets that are not supposed to be there (It started happening from ~ v5.9.0. If you build the library with v5.8, it builds clean.) All are quite small changes, (mainly changing the path for imports) + but lint change makes it look big :/ The changes in this PR so far do not fix the problem, but while we are on it let's clean up 🧹
NASA-IMPACT · Jan 14, 2025 · 66a7ab8 · 66a7ab8
1 parent 2f741b7
commit 66a7ab8
Show file tree

Hide file tree

Showing 16 changed files with 111 additions and 219 deletions.
diff --git a/app/scripts/components/common/browse-controls/index.tsx b/app/scripts/components/common/browse-controls/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Taxonomy } from 'veda';
 import { Overline } from '@devseed-ui/typography';
 import { Button, ButtonProps } from '@devseed-ui/button';
 import {
@@ -12,6 +11,7 @@ import { DropMenu, DropTitle } from '@devseed-ui/dropdown';
 
 import { useFiltersWithQS } from '../catalog/controls/hooks/use-filters-with-query';
 import { optionAll } from './constants';
+import { Taxonomy } from '$types/veda';
 import { FilterActions } from '$components/common/catalog/utils';
 
 import DropdownScrollable from '$components/common/dropdown-scrollable';
@@ -74,26 +74,21 @@ interface BrowseControlsProps extends ReturnType<typeof useFiltersWithQS> {
 }
 
 function BrowseControls(props: BrowseControlsProps) {
-  const {
-    taxonomiesOptions,
-    taxonomies,
-    search,
-    onAction,
-    ...rest
-  } = props;
+  const { taxonomiesOptions, taxonomies, search, onAction, ...rest } = props;
 
   const { isLargeUp } = useMediaQuery();
   const filterWrapConstant = 4;
   const wrapTaxonomies = taxonomiesOptions.length > filterWrapConstant; // wrap list of taxonomies when more then 4 filter options
 
-
   const createFilterList = (filterList: Taxonomy[]) => {
     return filterList.map(({ name, values }) => (
       <DropdownOptions
         key={name}
         prefix={name}
         items={[optionAll].concat(values)}
-        currentId={(taxonomies[name]? taxonomies[name] as unknown as string : 'all')}
+        currentId={
+          taxonomies[name] ? (taxonomies[name] as unknown as string) : 'all'
+        }
         onChange={(v) => {
           onAction(FilterActions.TAXONOMY, { key: name, value: v });
         }}
@@ -116,13 +111,16 @@ function BrowseControls(props: BrowseControlsProps) {
           {createFilterList(taxonomiesOptions.slice(0, filterWrapConstant))}
         </FilterOptionsWrapper>
       </SearchWrapper>
-      {
-        wrapTaxonomies && (
-          <FilterOptionsWrapper>
-            {createFilterList(taxonomiesOptions.slice(filterWrapConstant, taxonomiesOptions.length))}
-          </FilterOptionsWrapper>
-        )
-      }
+      {wrapTaxonomies && (
+        <FilterOptionsWrapper>
+          {createFilterList(
+            taxonomiesOptions.slice(
+              filterWrapConstant,
+              taxonomiesOptions.length
+            )
+          )}
+        </FilterOptionsWrapper>
+      )}
     </BrowseControlsWrapper>
   );
 }

diff --git a/app/scripts/components/common/content-taxonomy.tsx b/app/scripts/components/common/content-taxonomy.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Taxonomy } from 'veda';
 import { Link } from 'react-router-dom';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { Heading, Overline } from '@devseed-ui/typography';
+import { Taxonomy } from '$types/veda';
 
 import { FilterActions } from '$components/common/catalog/utils';
 
@@ -60,9 +60,9 @@ export function ContentTaxonomy(props: ContentTaxonomyProps) {
                   variation='achromic'
                   key={t.id}
                   as={Link}
-                  to={`${linkBase}?${FilterActions.TAXONOMY}=${encodeURIComponent(
-                    JSON.stringify({ [name]: [t.id] })
-                  )}`}
+                  to={`${linkBase}?${
+                    FilterActions.TAXONOMY
+                  }=${encodeURIComponent(JSON.stringify({ [name]: [t.id] }))}`}
                 >
                   {t.name}
                 </Pill>

diff --git a/app/scripts/components/data-catalog/dataset-menu.tsx b/app/scripts/components/data-catalog/dataset-menu.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 import { visuallyDisabled } from '@devseed-ui/theme-provider';
 import { Link } from 'react-router-dom';
-import { DatasetData } from 'veda';
 import {
   DropMenu,
   Dropdown,
@@ -16,6 +15,7 @@ import {
   CollecticonPage
 } from '@devseed-ui/collecticons';
 import { Button } from '@devseed-ui/button';
+import { DatasetData } from '$types/veda';
 
 import { getDatasetPath, getDatasetExplorePath } from '$utils/routes';
 import { NotebookConnectModal } from '$components/common/notebook-connect';

diff --git a/app/scripts/components/exploration/analysis-data.ts b/app/scripts/components/exploration/analysis-data.ts
@@ -7,7 +7,7 @@ import {
   TimelineDatasetAnalysis,
   DatasetStatus
 } from './types.d.ts';
-import { ExtendedError } from './data-utils';
+import { ExtendedError } from './data-utils-no-faux-module';
 import { utcString2userTzDate } from '$utils/date';
 import {
   fixAoiFcForStacSearch,

diff --git a/app/scripts/components/exploration/components/datasets/data-layer-card.tsx b/app/scripts/components/exploration/components/datasets/data-layer-card.tsx
@@ -2,7 +2,6 @@ import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { PrimitiveAtom } from 'jotai';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
-import { LayerLegendCategorical, LayerLegendGradient } from 'veda';
 import {
   CollecticonCircleInformation,
   CollecticonEyeDisabled,
@@ -15,6 +14,7 @@ import Tippy from '@tippyjs/react';
 import { LayerInfoLiner } from '../layer-info-modal';
 import LayerMenuOptions from './layer-options-menu';
 import { ColormapOptions } from './colormap-options';
+import { LayerLegendCategorical, LayerLegendGradient } from '$types/veda';
 import { TipButton } from '$components/common/tip-button';
 import {
   LayerCategoricalGraphic,

diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item-status.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item-status.tsx
@@ -9,7 +9,7 @@ import {
   DATASET_TRACK_BLOCK_HEIGHT,
   MAX_QUERY_NUM
 } from '$components/exploration/constants';
-import { ExtendedError } from '$components/exploration/data-utils';
+import { ExtendedError } from '$components/exploration/data-utils-no-faux-module';
 
 const loadingPattern = '.-.. --- .- -.. .. -. --.'
   .split(' ')
@@ -153,7 +153,10 @@ export function DatasetTrackError(props: {
       </>
     );
   }
-  if (error instanceof ExtendedError && error.code === 'ANALYSIS_NO_VALID_DATA') {
+  if (
+    error instanceof ExtendedError &&
+    error.code === 'ANALYSIS_NO_VALID_DATA'
+  ) {
     return (
       <>
         {patternContent}

diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
@@ -21,9 +21,10 @@ import {
 import { DatasetChart } from './dataset-chart';
 import { getBlockBoundaries, lumpBlocks } from './block-utils';
 import DataLayerCard from './data-layer-card';
-import { findDatasetAttribute } from '$components/exploration/data-utils';
+import { findDatasetAttribute } from '$components/exploration/data-utils-no-faux-module';
 import {
   DatasetStatus,
+  TimelineDataset,
   TimelineDatasetSuccess
 } from '$components/exploration/types.d.ts';
 import {
@@ -89,6 +90,7 @@ const DatasetData = styled.div`
 `;
 
 interface DatasetListItemProps {
+  datasets: TimelineDataset[];
   datasetId: string;
   width: number;
   xScaled?: ScaleTime<number, number>;
@@ -97,7 +99,7 @@ interface DatasetListItemProps {
 }
 
 export function DatasetListItem(props: DatasetListItemProps) {
-  const { datasetId, width, xScaled, onDragStart, onDragEnd } = props;
+  const { datasets, datasetId, width, xScaled, onDragStart, onDragEnd } = props;
 
   const datasetAtom = useTimelineDatasetAtom(datasetId);
   const dataset = useAtomValue(datasetAtom);
@@ -125,7 +127,7 @@ export function DatasetListItem(props: DatasetListItemProps) {
   }, [queryClient, datasetId]);
 
   const onClickLayerInfo = useCallback(() => {
-    const parentInfoDesc = findDatasetAttribute({
+    const parentInfoDesc = findDatasetAttribute(datasets, {
       datasetId: dataset.data.parentDataset.id,
       attr: 'infoDescription'
     });

diff --git a/app/scripts/components/exploration/components/datasets/dataset-list.tsx b/app/scripts/components/exploration/components/datasets/dataset-list.tsx
@@ -34,6 +34,7 @@ export function DatasetList(props: DatasetListProps) {
     >
       {datasets.map((dataset) => (
         <DatasetListItem
+          datasets={datasets}
           key={dataset.data.id}
           datasetId={dataset.data.id}
           width={width}

diff --git a/app/scripts/components/exploration/components/layer-info-modal.tsx b/app/scripts/components/exploration/components/layer-info-modal.tsx
@@ -9,7 +9,7 @@ import {
   ModalHeadline
 } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
-import { LayerInfo } from 'veda';
+import { LayerInfo } from '$types/veda';
 import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
 import { ParentDatasetTitle } from '$components/common/catalog/catalog-content';
 import { useVedaUI } from '$context/veda-ui-provider';
@@ -60,7 +60,7 @@ export interface LayerInfoModalData {
     id: string;
     name: string;
     infoDescription?: string;
-  }
+  };
 }
 
 interface LayerInfoModalProps {
@@ -73,14 +73,14 @@ export function LayerInfoLiner(props: { info: LayerInfo }) {
   const { info } = props;
   return (
     <span>
-    {Object.keys(info).map((key, idx, arr) => {
-      const currentValue = info[key];
-      return idx !== arr.length - 1 ? (
-        <span key={key}>{currentValue} · </span>
+      {Object.keys(info).map((key, idx, arr) => {
+        const currentValue = info[key];
+        return idx !== arr.length - 1 ? (
+          <span key={key}>{currentValue} · </span>
         ) : (
-        <span key={key}>{currentValue} </span>
-      );
-    })}
+          <span key={key}>{currentValue} </span>
+        );
+      })}
     </span>
   );
 }
@@ -114,19 +114,24 @@ export default function LayerInfoModal(props: LayerInfoModalProps) {
             </ParentDatasetTitle>
             <ParentDatasetHeading> {layerData.name} </ParentDatasetHeading>
             <p>
-              {
-                layerData.info && (
-                  <LayerInfoLinerModal>
-                    <LayerInfoLiner info={layerData.info} />
-                  </LayerInfoLinerModal>
-                )
-              }
+              {layerData.info && (
+                <LayerInfoLinerModal>
+                  <LayerInfoLiner info={layerData.info} />
+                </LayerInfoLinerModal>
+              )}
             </p>
             <p>{layerData.description}</p>
-          </ModalHeadline>);
+          </ModalHeadline>
+        );
       }}
       content={
-        <div dangerouslySetInnerHTML={{__html: parentData.infoDescription?? 'Currently, we are unable to display the layer information, but you can find it in the data catalog.' }} />
+        <div
+          dangerouslySetInnerHTML={{
+            __html:
+              parentData.infoDescription ??
+              'Currently, we are unable to display the layer information, but you can find it in the data catalog.'
+          }}
+        />
       }
       footerContent={
         <LinkComponent to={dataCatalogPath}>

diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { ProjectionOptions } from 'veda';
 import { useReconcileWithStacMetadata } from '../../hooks/use-stac-metadata-datasets';
 import {
   TimelineDataset,
@@ -10,6 +9,7 @@ import {
 import { Layer } from './layer';
 import { AnalysisMessageControl } from './analysis-message-control';
 import { ShowTourControl } from './tour-control';
+import { ProjectionOptions } from '$types/veda';
 
 import Map, { Compare, MapControls } from '$components/common/map';
 import { Basemap } from '$components/common/map/style-generators/basemap';

diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
@@ -6,10 +6,10 @@ import { useAtom, useSetAtom } from 'jotai';
 import { PopoverTourComponent, TourManager } from './tour-manager';
 
 import { DatasetSelectorModal } from './components/dataset-selector-modal';
-import { allExploreDatasets } from './data-utils';
 import useTimelineDatasetAtom from './hooks/use-timeline-dataset-atom';
 import { externalDatasetsAtom } from './atoms/datasetLayers';
 import ExplorationAndAnalysis from '.';
+import { allExploreDatasets } from '$data-layer/datasets';
 import { urlAtom } from '$utils/params-location-atom/url';
 import { PageMainContent } from '$styles/page';
 

diff --git a/app/scripts/components/exploration/data-utils-no-faux-module.ts b/app/scripts/components/exploration/data-utils-no-faux-module.ts
@@ -50,6 +50,7 @@ export const getLayersFromDataset = (datasets: DatasetData[]) =>
       }
     }));
   });
+
 /**
  * Returns an array of metrics based on the given Dataset Layer configuration.
  * If the layer has metrics defined, it returns only the metrics that match the
@@ -276,3 +277,26 @@ export const getLowestCommonTimeDensity = (
         : lowestDensity,
     TimeDensity.YEAR
   );
+
+export class ExtendedError extends Error {
+  code: string;
+  details?: any;
+
+  constructor(message: string, code: string) {
+    super(message);
+    this.code = code;
+  }
+}
+
+export const findDatasetAttribute = (
+  datasets,
+  {
+    datasetId,
+    attr
+  }: {
+    datasetId: string;
+    attr: string;
+  }
+) => {
+  return datasets[datasetId]?.data[attr];
+};