Assets Panel TODO, isPublic: {isPublic}
+
+
);
};
diff --git a/react/src/components/DeleteMapModal/DeleteMapModal.test.tsx b/react/src/components/DeleteMapModal/DeleteMapModal.test.tsx
index 7e68d5e9..d9fdf73b 100644
--- a/react/src/components/DeleteMapModal/DeleteMapModal.test.tsx
+++ b/react/src/components/DeleteMapModal/DeleteMapModal.test.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { render, screen } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';
-import { act } from 'react-dom/test-utils';
import { QueryClient, QueryClientProvider } from 'react-query';
import DeleteMapModal from './DeleteMapModal';
import { Provider } from 'react-redux';
diff --git a/react/src/components/FeatureFileTree/FeatureFileTree.module.css b/react/src/components/FeatureFileTree/FeatureFileTree.module.css
new file mode 100644
index 00000000..4a5702b9
--- /dev/null
+++ b/react/src/components/FeatureFileTree/FeatureFileTree.module.css
@@ -0,0 +1,57 @@
+.root {
+ width: 100%;
+ overflow: visible;
+
+ :global(.ant-tree .ant-tree-treenode) {
+ margin-bottom: 0px !important; /*needed to ensure calculation of row hight is right */
+ }
+
+ /* Remove switcher space */
+ :global(.ant-tree-switcher) {
+ display: none;
+ }
+
+ /* Hovering over non-selected items */
+ :global(.ant-tree-node-content-wrapper:hover:not(.ant-tree-node-selected)) {
+ background-color: var(--global-color-accent--weak) !important;
+ }
+
+ /* Selected items (both normal and hover state) */ /*TODO*/
+ :global(.ant-tree-node-content-wrapper.ant-tree-node-selected) {
+ background-color: var(--global-color-accent--weak) !important;
+ }
+}
+
+.featureFileTree {
+ height: 100%;
+
+ :global(.ant-tree-node-content-wrapper) {
+ /*https://tacc-main.atlassian.net/browse/WG-390*/
+ font-size: var(--global-font-family--small);
+ font-family: var(--global-font-family--sans);
+ max-width: var(--hazmapper-panel-width); /* fixed width of panel*/
+ padding-left: 5px;
+ padding-right: 5px;
+ overflow: hidden;
+ }
+
+ /* Adjust indent size */
+ :global(.ant-tree-indent-unit) {
+ width: 8px;
+ }
+}
+
+.treeNode {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+}
+
+.fileName {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-left: 0.25em;
+}
diff --git a/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx b/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
new file mode 100644
index 00000000..acf52002
--- /dev/null
+++ b/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import FeatureFileTree from './FeatureFileTree';
+import { featureCollection } from '@hazmapper/__fixtures__/featuresFixture';
+import { useDeleteFeature } from '@hazmapper/hooks';
+
+// Mock the hooks
+jest.mock('@hazmapper/hooks', () => ({
+ useDeleteFeature: jest.fn(),
+}));
+
+jest.mock('react-resize-detector', () => ({
+ useResizeDetector: () => ({
+ height: 500,
+ ref: jest.fn(),
+ }),
+}));
+
+const renderWithRouter = (ui: React.ReactElement, { route = '/' } = {}) => {
+ return {
+ ...render(
+
+
+
+
+
+
+
+ {featureNode.isDirectory ? (
+
+ );
+ };
+
+ if (!treeData.length) return null;
+
+ return (
+
+
+ );
+};
+
+export default React.memo(FeatureFileTree);
diff --git a/react/src/components/FeatureFileTree/index.tsx b/react/src/components/FeatureFileTree/index.tsx
new file mode 100644
index 00000000..af0dde87
--- /dev/null
+++ b/react/src/components/FeatureFileTree/index.tsx
@@ -0,0 +1 @@
+export { default } from './FeatureFileTree';
diff --git a/react/src/components/FeatureIcon/FeatureIcon.module.css b/react/src/components/FeatureIcon/FeatureIcon.module.css
new file mode 100644
index 00000000..9b936cfe
--- /dev/null
+++ b/react/src/components/FeatureIcon/FeatureIcon.module.css
@@ -0,0 +1,3 @@
+.icon {
+ color: var(--global-color-accent--normal);
+}
diff --git a/react/src/components/FeatureIcon/FeatureIcon.tsx b/react/src/components/FeatureIcon/FeatureIcon.tsx
new file mode 100644
index 00000000..e4bcaf66
--- /dev/null
+++ b/react/src/components/FeatureIcon/FeatureIcon.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+ faCameraRetro,
+ faVideo,
+ faClipboardList,
+ faMapMarkerAlt,
+ faDrawPolygon,
+ faCloud,
+ faBezierCurve,
+ faRoad,
+ faLayerGroup,
+ faQuestionCircle,
+} from '@fortawesome/free-solid-svg-icons';
+
+import { FeatureType, FeatureTypeNullable } from '@hazmapper/types';
+import styles from './FeatureIcon.module.css';
+
+const featureTypeToIcon: Record
+
+ );
+ }
+
+ if (error || !activeProject) {
+ /* TODO_REACT show error and improve spinner https://tacc-main.atlassian.net/browse/WG-260
+
+ * if no access, note why (missing project vs no access to project)
+ * if not logged in and project exists but they might have access, prompt to log in to see if accesable
+ */
+
+ return (
+
+ Error loading project
+
+ );
+ }
+
+ return
@@ -113,7 +156,11 @@ const MapProject: React.FC = ({ isPublic = false }) => {
{activePanel && activePanel !== Panel.Manage && (
({
return useMutation(deleteUtil, options);
}
+
+type UseDeleteWithParams = {
+ endpoint: string | ((variables: Variables) => string);
+ options?: Omit<
+ UseMutationOptions,
+ 'mutationFn'
+ >;
+ apiService?: ApiService;
+};
+
+export function useDeleteWithParams({
+ endpoint,
+ options = {},
+ apiService = ApiService.Geoapi,
+}: UseDeleteWithParams) {
+ const client = axios;
+ const state = store.getState();
+ const configuration = useAppConfiguration();
+
+ useEnsureAuthenticatedUserHasValidTapisToken();
+
+ const baseUrl = getBaseApiUrl(apiService, configuration);
+ const headers = getHeaders(apiService, state.auth);
+
+ const deleteUtil = async (variables: Variables) => {
+ const finalEndpoint =
+ typeof endpoint === 'function' ? endpoint(variables) : endpoint;
+
+ const response = await client.delete(
+ `${baseUrl}${finalEndpoint}`,
+ { headers }
+ );
+ return response.data;
+ };
+
+ return useMutation(deleteUtil, options);
+}
diff --git a/react/src/types/feature.test.ts b/react/src/types/feature.test.ts
new file mode 100644
index 00000000..8d96b0d3
--- /dev/null
+++ b/react/src/types/feature.test.ts
@@ -0,0 +1,24 @@
+import { featureCollection } from '@hazmapper/__fixtures__/featuresFixture';
+import { getFeatureType } from '@hazmapper/types/feature';
+
+describe('FeatureClass', () => {
+ describe('featureType', () => {
+ it('should return asset_type when there is exactly one asset', () => {
+ const feature = featureCollection.features[0];
+ expect(getFeatureType(feature)).toBe('image');
+ });
+
+ it('should return "collection" when there are multiple assets', () => {
+ const feature = featureCollection.features[0];
+ const feature2 = featureCollection.features[1];
+ feature.assets.push(feature2.assets[0]);
+ expect(getFeatureType(feature)).toBe('collection');
+ });
+
+ it('should return geometry type when there are no assets', () => {
+ const feature = featureCollection.features[0];
+ feature.assets = [];
+ expect(getFeatureType(feature)).toBe('Point');
+ });
+ });
+});
diff --git a/react/src/types/feature.ts b/react/src/types/feature.ts
index 46533508..4915926d 100644
--- a/react/src/types/feature.ts
+++ b/react/src/types/feature.ts
@@ -1,5 +1,21 @@
import { GeoJsonProperties, Geometry } from 'geojson';
+// Define asset types from GeoApi
+export type AssetType =
+ | 'image'
+ | 'video'
+ | 'questionnaire'
+ | 'point_cloud'
+ | 'streetview';
+
+// Define all possible geometry types from GeoJSON (e.g. "Point", "MultiPoint", "Polygon" etc)
+export type GeoJSONGeometryType = Geometry['type'];
+
+// Combined feature type that includes all possibilities for a feature
+export type FeatureType = AssetType | GeoJSONGeometryType | 'collection';
+
+export type FeatureTypeNullable = FeatureType | undefined;
+
/**
* Asset of a feature
*/
@@ -7,10 +23,7 @@ export interface Asset {
id: number;
path: string;
uuid: string;
- /**
- * The type of asset, such as "image", "video", "point_cloud", or "streetview".
- */
- asset_type: string;
+ asset_type: AssetType;
original_path: string;
original_name: string | null;
display_path: string;
@@ -50,34 +63,19 @@ export interface Feature {
assets: Asset[];
}
-export class FeatureClass implements Feature {
- constructor(
- public id: number,
- public project_id: number,
- public type: string,
- public geometry: Geometry,
- public properties: any,
- public styles: any,
- public assets: Asset[]
- ) {}
-
- /**
- * Returns the type of the feature based on its assets and geometry.
- * If there are no assets, returns the type of the feature's geometry.
- * If there is only one asset, returns the type of that asset (i.e. "image", "video", "point_cloud", or "streetview".)
- * If there are multiple assets, returns "collection".
- * If there are no assets or geometry, returns "unknown".
- *
- * @returns The type of the feature as a string.
- */
- featureType(): string {
- if (this.assets.length === 1) {
- return this.assets[0].asset_type;
- } else if (this.assets.length > 1) {
- return 'collection';
- } else {
- return this.geometry.type;
- }
+/**
+ * Returns the type of the feature based on its assets and geometry.
+ */
+export function getFeatureType(feature: Feature): FeatureType {
+ if (feature.assets.length === 1) {
+ /* If there is only one asset, returns the type of that asset (i.e. "image", "video", "point_cloud", or "streetview".)*/
+ return feature.assets[0].asset_type;
+ } else if (feature.assets.length > 1) {
+ /* multiple assets */
+ return 'collection';
+ } else {
+ /* else we rely on geojson geometry type */
+ return feature.geometry.type;
}
}
@@ -94,3 +92,14 @@ export interface FeatureCollection {
*/
features: Feature[];
}
+
+/**
+ * Features/file abstraction for feature file tree representation
+ */
+export interface FeatureFileNode {
+ nodeId: string /* feature id if feature; path if directory node */;
+ name: string;
+ isDirectory: boolean;
+ featureType: FeatureTypeNullable;
+ children?: FeatureFileNode[];
+}
diff --git a/react/src/types/index.ts b/react/src/types/index.ts
index 8182d704..46ebc71e 100644
--- a/react/src/types/index.ts
+++ b/react/src/types/index.ts
@@ -1,10 +1,5 @@
export type { TileServerLayer } from './tileServerLayer';
-export type {
- Asset,
- Feature,
- FeatureClass,
- FeatureCollection,
-} from './feature';
+export * from './feature';
export type {
Project,
DesignSafeProjectCollection,
diff --git a/react/src/utils/featureTreeUtils.test.ts b/react/src/utils/featureTreeUtils.test.ts
new file mode 100644
index 00000000..3ed2b5a2
--- /dev/null
+++ b/react/src/utils/featureTreeUtils.test.ts
@@ -0,0 +1,37 @@
+import { featureCollectionToFileNodeArray } from './featureTreeUtils';
+import { featureCollectionWithNestedPaths } from '@hazmapper/__fixtures__/featuresFixture';
+
+describe('featureTreeUtils', () => {
+ describe('featureCollectionToFileNodeArray', () => {
+ it('should convert a feature collection to a tree structure', () => {
+ const mockFeatureCollection = featureCollectionWithNestedPaths;
+
+ const result = featureCollectionToFileNodeArray(mockFeatureCollection);
+
+ expect(result).toHaveLength(1); // One root node (folder1)
+ expect(result[0].name).toBe('folder1');
+ expect(result[0].isDirectory).toBeTruthy();
+
+ // folder1/ contents
+ expect(result[0].children).toHaveLength(2); // file1.jpg and subfolder
+ //file1.jpg
+ expect(result[0].children?.[0].name).toBe('file1.jpg');
+ expect(result[0].children?.[0].featureType).toBe('image');
+ expect(result[0].children?.[0].nodeId).toBe('1');
+ expect(result[0].children?.[0].isDirectory).toBeFalsy();
+ // subfolder
+ expect(result[0].children?.[1].name).toBe('subfolder');
+ expect(result[0].children?.[1].isDirectory).toBeTruthy();
+
+ // folder1/subfolder/ contents
+ expect(result[0].children?.[1].children?.[0].isDirectory).toBeFalsy();
+ expect(result[0].children?.[1].children?.[0].name).toBe('file2.rq');
+ expect(result[0].children?.[1].children?.[0].featureType).toBe(
+ 'questionnaire'
+ );
+ expect(result[0].children?.[1].children?.[0].nodeId).toBe('2');
+ });
+
+ // Add more test cases as needed
+ });
+});
diff --git a/react/src/utils/featureTreeUtils.ts b/react/src/utils/featureTreeUtils.ts
new file mode 100644
index 00000000..d58b4400
--- /dev/null
+++ b/react/src/utils/featureTreeUtils.ts
@@ -0,0 +1,88 @@
+import {
+ FeatureCollection,
+ Feature,
+ FeatureType,
+ FeatureFileNode,
+ getFeatureType,
+} from '../types';
+
+function createFeatureFileNode(
+ nodeId: string,
+ name: string,
+ isDirectory: boolean,
+ featureType: FeatureType | undefined,
+ children?: FeatureFileNode[]
+): FeatureFileNode {
+ return {
+ nodeId,
+ name,
+ isDirectory,
+ featureType,
+ ...(children && { children }),
+ };
+}
+
+function getFullPathFromFeature(feature: Feature): string {
+ const firstAsset = feature.assets[0];
+ if (firstAsset?.display_path) {
+ return firstAsset.display_path;
+ }
+ if (firstAsset) {
+ return firstAsset.id.toString();
+ }
+ return feature.id.toString();
+}
+
+/**
+ * Convert a feature collection to a tree of file nodes.
+ *
+ * This returns an array of only top-level nodes (which contain
+ * a node for all the features + their parent directories)
+ */
+export function featureCollectionToFileNodeArray(
+ featureCollection: FeatureCollection
+): FeatureFileNode[] {
+ const rootNodes: FeatureFileNode[] = [];
+ const nodeMap: { [key: string]: FeatureFileNode } = {};
+
+ // Sort features to ensure consistent order
+ const sortedFeatures = featureCollection.features.sort((a, b) =>
+ getFullPathFromFeature(a).localeCompare(getFullPathFromFeature(b))
+ );
+
+ sortedFeatures.forEach((feature) => {
+ const nodePath = getFullPathFromFeature(feature);
+ const parts = nodePath.split('/');
+
+ let currentPath = '';
+ let currentNode: FeatureFileNode | null = null;
+
+ parts.forEach((part, index) => {
+ currentPath += (currentPath ? '/' : '') + part;
+ const isLast = index === parts.length - 1;
+
+ if (!nodeMap[currentPath]) {
+ const newNode = createFeatureFileNode(
+ isLast ? feature.id.toString() : `DIR_${currentPath}` /* nodeId */,
+ part /* name */,
+ !isLast /* isDirectory */,
+ isLast
+ ? getFeatureType(feature) /*featureType*/
+ : undefined /* or if dir, then undefined */
+ );
+ nodeMap[currentPath] = newNode;
+
+ if (currentNode) {
+ if (!currentNode.children) currentNode.children = [];
+ currentNode.children.push(newNode);
+ } else {
+ rootNodes.push(newNode);
+ }
+ }
+
+ currentNode = nodeMap[currentPath];
+ });
+ });
+
+ return rootNodes;
+}
{activePanel === Panel.Assets && (
- = ({ isPublic = false }) => {
diff --git a/react/src/requests.ts b/react/src/requests.ts
index ee03e1a4..11dc937a 100644
--- a/react/src/requests.ts
+++ b/react/src/requests.ts
@@ -189,3 +189,40 @@ export function useDelete