@map-colonies/react-components 3.9.0 → 3.10.0

package/src/lib/cesium-map/terrain-providers/terrain-provider.stories.tsx

@@ -13,10 +13,11 @@ import { Story, Meta } from '@storybook/react/types-6-0';
 import { CesiumMap, useCesiumMap } from '../map';
 import { CesiumSceneMode } from '../map.types';
 import { Cesium3DTileset } from '../layers';
+import { LayerType } from '../layers-manager';
 import QuantizedMeshTerrainProvider from './custom/quantized-mesh-terrain-provider';
 
 export default {
-  title: 'Cesium Map',
+  title: 'Cesium Map/QuantizedMesh',
   component: CesiumMap,
   parameters: {
     layout: 'fullscreen',
@@ -40,7 +41,7 @@ const BASE_MAPS = {
       baseRasteLayers: [
         {
           id: 'GOOGLE_TERRAIN',
-          type: 'XYZ_LAYER',
+          type: 'XYZ_LAYER' as LayerType,
           opacity: 1,
           zIndex: 0,
           options: {
@@ -159,7 +160,7 @@ const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
   );
 };
 
-export const QuantizedMesh: Story = () => {
+export const QuantizedMeshProviders: Story = () => {
   // const [center] = useState<[number, number]>([24, -200]);
   const [center] = useState<[number, number]>([-122, 43]);
   return (
@@ -181,3 +182,4 @@ export const QuantizedMesh: Story = () => {
     </div>
   );
 };
+QuantizedMeshProviders.storyName = 'Providers';

package/src/lib/cesium-map/tools/inspector.tool.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+import { viewerCesiumInspectorMixin } from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+export interface InspectorProps {}
+
+export const InspectorTool: React.FC<InspectorProps> = (props) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+
+  useEffect(() => {
+    mapViewer.extend(viewerCesiumInspectorMixin);
+  }, [mapViewer]);
+
+  return <></>;
+};

package/src/lib/cesium-map/tools/terranian-height.tool.tsx

@@ -0,0 +1,167 @@
+import React, { ChangeEvent } from 'react';
+import {
+  Cartesian2,
+  Ellipsoid,
+  Color as CesiumColor,
+  LabelStyle as CesiumLabelStyle,
+  VerticalOrigin as CesiumVerticalOrigin,
+  Cartographic,
+  sampleTerrainMostDetailed,
+} from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+interface IParsedData {
+  cartographic: Cartographic;
+  cartesian: Cartesian2;
+}
+
+const LABEL_PIXEL_OFFSET = -25;
+const FIRST_DATA_ROW_IDX = 2;
+
+export interface TerrainianHeightProps {}
+
+export const TerrainianHeightTool: React.FC<TerrainianHeightProps> = (
+  props
+) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+
+  const csvToArray = (str: string, delimiter = ','): IParsedData[] => {
+    // const headers = str.slice(0, str.indexOf('\n')).split(delimiter);
+    const rows = str.slice(str.indexOf('\n') + 1).split('\n');
+
+    const arr = rows.map((row) => {
+      const values = row.split(delimiter);
+      const el = Cartographic.fromDegrees(
+        parseFloat(values[0]),
+        parseFloat(values[1])
+      );
+      // const el = headers.reduce((object: Record<string, number>, header, index) => {
+      //   const trimmedHeader = header.trim();
+      //   object[trimmedHeader] = parseFloat(values[index]);
+      //   return object;
+      // }, {});
+
+      //return el;
+      return {
+        cartographic: el,
+        cartesian: new Cartesian2(parseFloat(values[0]), parseFloat(values[1])),
+      };
+    });
+
+    return arr;
+  };
+
+  const loadCSV = (evt: ChangeEvent<HTMLInputElement>): void => {
+    evt.preventDefault();
+    evt.persist();
+    const reader = new FileReader();
+
+    reader.onload = (e: ProgressEvent<FileReader>): any => {
+      const text = e.target?.result;
+      const parsed = csvToArray(text as string);
+      const ellipsoid = Ellipsoid.WGS84;
+
+      console.log('Loaded CSV content:\n', text);
+
+      void sampleTerrainMostDetailed(
+        mapViewer.terrainProvider,
+        parsed.map((item) => item.cartographic)
+      ).then(
+        (updatedPositions) => {
+          console.log(updatedPositions);
+
+          mapViewer.scene.globe.depthTestAgainstTerrain = true;
+          mapViewer.entities.suspendEvents();
+          mapViewer.entities.removeAll();
+
+          updatedPositions.forEach((position, idx) => {
+            mapViewer.entities.add({
+              name: (idx + FIRST_DATA_ROW_IDX).toString(),
+              position: ellipsoid.cartographicToCartesian(position),
+              billboard: {
+                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
+                scale: 0.7,
+                image: 'assets/img/map-marker.gif',
+              },
+              label: {
+                text: (idx + FIRST_DATA_ROW_IDX).toString(),
+                font: '14pt monospace',
+                fillColor: CesiumColor.BLACK,
+                style: CesiumLabelStyle.FILL_AND_OUTLINE,
+                outlineWidth: 4,
+                outlineColor: CesiumColor.BLACK,
+                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
+                pixelOffset: new Cartesian2(0, LABEL_PIXEL_OFFSET),
+              },
+              description: `
+                Long: ${parsed[idx].cartesian.x} </br>
+                Lat: ${parsed[idx].cartesian.y} </br>
+                Height(m): <span style="font-weight: 500">${position.height}</span>
+              `,
+            });
+          });
+
+          mapViewer.entities.resumeEvents();
+
+          if (evt.target.files !== null) {
+            exportToCsv(
+              `terranian_heights_${evt.target.files[0].name}`,
+              parsed
+            );
+            evt.target.value = '';
+          }
+
+          console.log(
+            'Pinned point count is ',
+            mapViewer.entities.values.length
+          );
+        },
+        (err) => {
+          console.error('ERROR while sampleTerrainMostDetailed:', err);
+        }
+      );
+    };
+
+    if (evt.target.files?.[0]) {
+      reader.readAsText(evt.target.files[0]);
+    }
+  };
+
+  const exportToCsv = (filename: string, rows: IParsedData[]): void => {
+    const processRow = (row: IParsedData): string => {
+      let finalVal = '';
+      finalVal += row.cartesian.x.toString() + ',';
+      finalVal += row.cartesian.y.toString() + ',';
+      finalVal += row.cartographic.height.toString();
+      return finalVal + '\n';
+    };
+
+    let csvFile = 'long,lat,height\n';
+    rows.forEach((row) => {
+      csvFile += processRow(row);
+    });
+
+    const blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', filename);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <>
+      <input
+        type="file"
+        id="csvFile"
+        accept=".csv"
+        onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+          loadCSV(e);
+        }}
+      />
+    </>
+  );
+};

package/src/lib/date-range-picker/{stories/DateRangePicker.stories.tsx → date-range-picker.stories.tsx}

@@ -1,13 +1,13 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Story } from '@storybook/react/types-6-0';
-import { CSFStory } from '../../utils/story';
-import { SupportedLocales } from '../../models/enums';
-import { DateTimeRangePicker } from '../date-range-picker';
-import { DateTimeRangePickerFormControl } from '../date-range-picker.form-control';
+import { CSFStory } from '../utils/story';
+import { SupportedLocales } from '../models/enums';
+import { DateTimeRangePicker } from './date-range-picker';
+import { DateTimeRangePickerFormControl } from './date-range-picker.form-control';
 
 export default {
-  title: 'Picker',
+  title: 'Date Range Picker',
   component: DateTimeRangePicker,
 };
 

package/src/lib/file-picker/file-picker.css

@@ -0,0 +1,56 @@
+body[dir='rtl'] .chonky-fileListWrapper [class^='listContainer-'] {
+  direction: rtl !important;
+}
+
+body[dir='rtl'] .chonky-chonkyRoot {
+  text-align: right;
+}
+
+body[dir='rtl'] .chonky-infoText {
+  margin-left: unset;
+  margin-right: 12px;
+}
+
+body[dir='rtl'] .chonky-contextMenuList .MuiListItemText-root,
+body[dir='rtl'] .chonky-dropdownList .MuiListItemText-root {
+  text-align: right;
+}
+
+body[dir='rtl'] .chonky-icon {
+  margin-right: unset;
+  margin-left: 8px;
+}
+
+.chonky-chonkyRoot div[class^='folderBackSide'] {
+  box-shadow: unset;
+}
+
+.chonky-chonkyRoot div[class^='folderBackSide']::after {
+  border-color: var(--fp-theme-background, #fff)
+    var(--fp-theme-background, #fff) transparent transparent;
+}
+
+.chonky-chonkyRoot div[class^='listFileEntryIcon-'] {
+  color: #d5d5d5;
+}
+
+.chonky-chonkyRoot div[class*='previewFile-d'] {
+  background-color: #d5d5d5;
+}
+
+.chonky-chonkyRoot div[class^='selectionIndicator-'] {
+  background: var(--fp-theme-selection-background, #455570);
+}
+
+.chonky-chonkyRoot {
+  background-color: var(--fp-theme-background, #fff) !important;
+}
+
+.chonky-contextMenuList {
+  background-color: var(--fp-theme-surface, #fff) !important;
+}
+
+button[class*='chonky-activeButton'],
+.chonky-selectionSizeText {
+  color: var(--fp-theme-primary, #24aee9) !important;
+}

package/src/lib/file-picker/file-picker.stories.tsx

@@ -0,0 +1,381 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import React, {
+  useCallback,
+  useState,
+  useMemo,
+  useRef,
+  useEffect,
+} from 'react';
+import { Story } from '@storybook/react/types-6-0';
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from '@material-ui/core';
+import { Box } from '../box';
+import { SupportedLocales } from '../models';
+import {
+  FileActionData,
+  FilePicker,
+  FileArray,
+  FileData,
+  FileHelper,
+  FilePickerActions,
+} from './file-picker';
+import FsMap from './fs-map.json';
+
+export default {
+  title: 'File Picker',
+  component: FilePicker,
+};
+
+interface CustomFileData extends FileData {
+  parentId?: string;
+  childrenIds?: string[];
+}
+interface CustomFileMap {
+  [fileId: string]: CustomFileData;
+}
+
+const prepareCustomFileMap = (): Record<string, unknown> => {
+  const baseFileMap = (FsMap.fileMap as unknown) as CustomFileMap;
+  const rootFolderId = FsMap.rootFolderId;
+  return { baseFileMap, rootFolderId };
+};
+
+// Sets up files map and actions
+// eslint-disable-next-line
+const useCustomFileMap = () => {
+  const { baseFileMap, rootFolderId } = useMemo(prepareCustomFileMap, []);
+
+  const [fileMap, setFileMap] = useState<CustomFileMap>(
+    baseFileMap as CustomFileMap
+  );
+  const [currentFolderId, setCurrentFolderId] = useState(rootFolderId);
+
+  const resetFileMap = useCallback(() => {
+    setFileMap(baseFileMap as CustomFileMap);
+    setCurrentFolderId(rootFolderId);
+  }, [baseFileMap, rootFolderId]);
+
+  const currentFolderIdRef = useRef(currentFolderId);
+
+  useEffect(() => {
+    currentFolderIdRef.current = currentFolderId;
+  }, [currentFolderId]);
+
+  const deleteFiles = useCallback((files: CustomFileData[]) => {
+    setFileMap((currentFileMap) => {
+      const newFileMap = { ...currentFileMap };
+
+      files.forEach((file) => {
+        delete newFileMap[file.id];
+
+        if (file.parentId) {
+          const parent = newFileMap[file.parentId];
+          const newChildrenIds = parent.childrenIds?.filter(
+            (id) => id !== file.id
+          );
+          newFileMap[file.parentId] = {
+            ...parent,
+            childrenIds: newChildrenIds,
+            childrenCount: newChildrenIds?.length,
+          };
+        }
+      });
+
+      return newFileMap;
+    });
+  }, []);
+
+  const moveFiles = useCallback(
+    (
+      files: CustomFileData[],
+      source: CustomFileData,
+      destination: CustomFileData
+    ) => {
+      setFileMap((currentFileMap) => {
+        const newFileMap = { ...currentFileMap };
+        const moveFileIds = new Set(files.map((f) => f.id));
+
+        // Delete files from their source folder.
+        const newSourceChildrenIds = source.childrenIds?.filter(
+          (id) => !moveFileIds.has(id)
+        );
+        newFileMap[source.id] = {
+          ...source,
+          childrenIds: newSourceChildrenIds,
+          childrenCount: newSourceChildrenIds?.length,
+        };
+
+        // Add the files to their destination folder.
+        const newDestinationChildrenIds = [
+          ...(destination.childrenIds as string[]),
+          ...files.map((f) => f.id),
+        ];
+        newFileMap[destination.id] = {
+          ...destination,
+          childrenIds: newDestinationChildrenIds,
+          childrenCount: newDestinationChildrenIds.length,
+        };
+
+        // Finally, update the parent folder ID on the files - from source folder
+        // ID to the destination folder ID.
+        files.forEach((file) => {
+          newFileMap[file.id] = {
+            ...file,
+            parentId: destination.id,
+          };
+        });
+
+        return newFileMap;
+      });
+    },
+    []
+  );
+
+  // TODO: in production we should use UUIDs or MD5 hashes for file paths
+  const idCounter = useRef(0);
+  const createFolder = useCallback((folderName: string) => {
+    setFileMap((currentFileMap) => {
+      const newFileMap = { ...currentFileMap };
+
+      const parentId = currentFolderIdRef.current as string;
+      // Create the new folder.
+      const newFolderId = `new-folder-${idCounter.current++}`;
+      newFileMap[newFolderId] = {
+        id: newFolderId,
+        name: folderName,
+        isDir: true,
+        modDate: new Date(),
+        parentId: parentId,
+        childrenIds: [],
+        childrenCount: 0,
+      };
+
+      // Update parent folder to reference the new folder.
+      const parent = newFileMap[parentId];
+      newFileMap[parentId] = {
+        ...parent,
+        childrenIds: [...(parent.childrenIds as string[]), newFolderId],
+      };
+
+      return newFileMap;
+    });
+  }, []);
+
+  return {
+    fileMap,
+    currentFolderId,
+    setCurrentFolderId,
+    resetFileMap,
+    deleteFiles,
+    moveFiles,
+    createFolder,
+  };
+};
+
+const useFiles = (
+  fileMap: CustomFileMap,
+  currentFolderId: string
+): FileArray => {
+  return useMemo(() => {
+    const currentFolder = fileMap[currentFolderId];
+    const files = currentFolder.childrenIds
+      ? currentFolder.childrenIds.map((fileId: string) => fileMap[fileId])
+      : [];
+    return files;
+  }, [currentFolderId, fileMap]);
+};
+
+const useFolderChain = (
+  fileMap: CustomFileMap,
+  currentFolderId: string
+): FileArray => {
+  return useMemo(() => {
+    const currentFolder = fileMap[currentFolderId];
+    const folderChain = [currentFolder];
+    let parentId = currentFolder.parentId;
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    while (parentId) {
+      const parentFile = fileMap[parentId];
+      // eslint-disable-next-line
+      if (parentFile) {
+        folderChain.unshift(parentFile);
+        parentId = parentFile.parentId;
+      } else {
+        break;
+      }
+    }
+    return folderChain;
+  }, [currentFolderId, fileMap]);
+};
+
+const useFileActionHandler = (
+  setCurrentFolderId: (folderId: string) => void,
+  deleteFiles: (files: CustomFileData[]) => void,
+  moveFiles: (
+    files: FileData[],
+    source: FileData,
+    destination: FileData
+  ) => void,
+  createFolder: (folderName: string) => void
+): ((data: FileActionData) => void) => {
+  return useCallback(
+    (data: FileActionData) => {
+      if (data.id === FilePickerActions.OpenFiles.id) {
+        const { targetFile, files } = data.payload;
+        const fileToOpen = targetFile ?? files[0];
+        // eslint-disable-next-line
+        if (fileToOpen && FileHelper.isDirectory(fileToOpen)) {
+          setCurrentFolderId(fileToOpen.id);
+          return;
+        }
+      } else if (data.id === FilePickerActions.DeleteFiles.id) {
+        deleteFiles(data.state.selectedFilesForAction);
+      } else if (data.id === FilePickerActions.MoveFiles.id) {
+        moveFiles(
+          data.payload.files,
+          data.payload.source as FileData,
+          data.payload.destination
+        );
+      } else if (data.id === FilePickerActions.CreateFolder.id) {
+        const folderName = prompt('Provide the name for your new folder:');
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        if (folderName) createFolder(folderName);
+      }
+    },
+    [createFolder, deleteFiles, moveFiles, setCurrentFolderId]
+  );
+};
+
+export const ReadOnlyMode: Story = () => {
+  const {
+    fileMap,
+    currentFolderId,
+    setCurrentFolderId,
+    // resetFileMap,
+    deleteFiles,
+    moveFiles,
+    createFolder,
+  } = useCustomFileMap();
+  const files = useFiles(fileMap, currentFolderId as string);
+  const folderChain = useFolderChain(fileMap, currentFolderId as string);
+  const handleFileAction = useFileActionHandler(
+    setCurrentFolderId,
+    deleteFiles,
+    moveFiles,
+    createFolder
+  );
+  return (
+    <Box style={{ height: '600px' }}>
+      <FilePicker
+        files={files}
+        folderChain={folderChain}
+        onFileAction={handleFileAction}
+        readOnlyMode={true}
+      />
+    </Box>
+  );
+};
+
+export const DarkTheme: Story = () => {
+  const {
+    fileMap,
+    currentFolderId,
+    setCurrentFolderId,
+    // resetFileMap,
+    deleteFiles,
+    moveFiles,
+    createFolder,
+  } = useCustomFileMap();
+  const files = useFiles(fileMap, currentFolderId as string);
+  const folderChain = useFolderChain(fileMap, currentFolderId as string);
+  const handleFileAction = useFileActionHandler(
+    setCurrentFolderId,
+    deleteFiles,
+    moveFiles,
+    createFolder
+  );
+  return (
+    <Box style={{ height: '600px' }}>
+      <FilePicker
+        files={files}
+        folderChain={folderChain}
+        onFileAction={handleFileAction}
+        theme={{
+          primary: 'blue',
+          background: 'black',
+          surface: 'gray',
+          textOnBackground: 'white',
+          selectionBackground: '#455570',
+        }}
+      />
+    </Box>
+  );
+};
+
+export const Localized: Story = () => {
+  const {
+    fileMap,
+    currentFolderId,
+    setCurrentFolderId,
+    // resetFileMap,
+    deleteFiles,
+    moveFiles,
+    createFolder,
+  } = useCustomFileMap();
+  const files = useFiles(fileMap, currentFolderId as string);
+  const folderChain = useFolderChain(fileMap, currentFolderId as string);
+  const handleFileAction = useFileActionHandler(
+    setCurrentFolderId,
+    deleteFiles,
+    moveFiles,
+    createFolder
+  );
+  const [locale, setLocale] = useState<SupportedLocales>(SupportedLocales.HE);
+  const handleLocaleChange = useCallback(
+    (event) => setLocale(event.target.value),
+    []
+  );
+  return (
+    <>
+      <FormControl component="fieldset" style={{ marginBottom: 15 }}>
+        <FormLabel component="legend">Pick a language:</FormLabel>
+        <RadioGroup
+          aria-label="locale"
+          name="locale"
+          value={locale}
+          onChange={handleLocaleChange}
+        >
+          <FormControlLabel
+            value={SupportedLocales.HE}
+            control={<Radio />}
+            label="עברית"
+          />
+          <FormControlLabel
+            value={SupportedLocales.RU}
+            control={<Radio />}
+            label="Русский"
+          />
+          <FormControlLabel
+            value={SupportedLocales.EN}
+            control={<Radio />}
+            label="English"
+          />
+        </RadioGroup>
+      </FormControl>
+      <br />
+      <Box style={{ height: '600px' }}>
+        <FilePicker
+          files={files}
+          folderChain={folderChain}
+          onFileAction={handleFileAction}
+          locale={locale}
+        />
+      </Box>
+    </>
+  );
+};