Skip to content

Commit

Permalink
feat: wire up front end to download service
Browse files Browse the repository at this point in the history
  • Loading branch information
stdavis committed Dec 12, 2023
1 parent ea8bc4a commit 9ccdd94
Show file tree
Hide file tree
Showing 10 changed files with 208 additions and 161 deletions.
1 change: 1 addition & 0 deletions .env.template
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
VITE_FIREBASE_CONFIG={...}
VITE_DISCOVER_KEY=
VITE_WEB_API_KEY=
VITE_DOWNLOAD_URL=
1 change: 1 addition & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@
"VITE",
"wksh",
"woodside",
"wrappity",
"wstrn",
"wstrn no",
"xlsxwriter",
Expand Down
27 changes: 6 additions & 21 deletions src/SearchMachineProvider.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const blankFilter = {
* @property {QueryLayerResult[]} resultLayers
* @property {Object} resultExtent
* @property {string[]} selectedDownloadLayers
* @property {Object[]} downloadResultLayers
* @property {string} downloadResultUrl
* @property {string} downloadFormat
* @property {string | null} error
*/
Expand Down Expand Up @@ -80,7 +80,7 @@ const blankContext = {
resultLayers: null,
resultExtent: null,
selectedDownloadLayers: [],
downloadResultLayers: [],
downloadResultUrl: null,
downloadFormat: downloadFormats.shapefile,
error: null,
};
Expand Down Expand Up @@ -159,7 +159,7 @@ const machine = createMachine(
resultLayers: [],
resultExtent: null,
error: null,
downloadResultLayers: [],
downloadResultUrl: null,
downloadFormat: downloadFormats.shapefile,
selectedDownloadLayers: [],
}),
Expand Down Expand Up @@ -224,7 +224,7 @@ const machine = createMachine(
},
download: {
entry: assign({
downloadResultLayers: [],
downloadResultUrl: null,
}),
on: {
CLEAR: {
Expand Down Expand Up @@ -256,40 +256,25 @@ const machine = createMachine(
error: null,
}),
on: {
RESULT: {
COMPLETE: {
actions: assign({
// @ts-ignore
downloadResultLayers: (context, { result }) => [
...context.downloadResultLayers,
result,
],
downloadResultUrl: (_, { url }) => url,
}),
},
// generic error with download (not specific to a query layer)
ERROR: {
target: 'error',
actions: assign({
// @ts-ignore
error: (_, { message }) => message,
}),
},
COMPLETE: {
target: 'result',
actions: assign({
// @ts-ignore
resultExtent: (_, { extent }) => extent,
}),
},
CANCEL: {
target: 'download',
},
BACK: {
target: 'download',
},
CLEAR: {
target: 'selectLayers',
actions: 'clear',
},
},
},
error: {
Expand Down
5 changes: 2 additions & 3 deletions src/components/RelatedRecords.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,8 @@ function TabContent({
relationshipClassConfig[fieldNames.relationshipClasses.foreignKey];

async function getData() {
const featureServiceUrl = `${
childConfig[fieldNames.relatedTables.featureService]
}`;
const featureServiceUrl =
childConfig[fieldNames.relatedTables.featureService];

/**
* @type {Object} FeatureServiceJson
Expand Down
9 changes: 4 additions & 5 deletions src/components/ResultTable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import useMap from '../contexts/useMap';
import Button from '../utah-design-system/Button';
import Icon from '../utah-design-system/Icon';
import Table from '../utah-design-system/Table';
import { getAlias } from '../utils';
import { getAlias, getRelationships } from '../utils';
import Identify from './Identify';
import Legend from './Legend';
import { useRemoteConfigValues } from '../RemoteConfigProvider';
Expand Down Expand Up @@ -72,10 +72,9 @@ export default function ResultTable({
.json();

const attributes = result.features[0].attributes;
const relationshipClasses = allRelationshipClasses.filter(
(config) =>
config[fieldNames.relationshipClasses.parentDatasetName] ===
queryLayerResult[fieldNames.queryLayers.tableName],
const relationshipClasses = getRelationships(
queryLayerResult[fieldNames.queryLayers.tableName],
allRelationshipClasses,
);
const fields =
configIdentifyFields.length > 0 ? configIdentifyFields : result.fields;
Expand Down
89 changes: 42 additions & 47 deletions src/components/search-wizard/DownloadProgress.jsx
Original file line number Diff line number Diff line change
@@ -1,69 +1,64 @@
import PropTypes from 'prop-types';
import { useRef } from 'react';
import { fieldNames } from '../../../functions/common/config';
import Icon from '../../utah-design-system/Icon';
import ResultStatusIcons from './ResultStatusIcons';
import Tag from '../Tag';

export default function DownloadProgress({ layers, results }) {
const anchorTagRefs = useRef(new Map());
import Spinner from '../../utah-design-system/Spinner';

/**
* @param {Object} props
* @param {import('../../../functions/common/config').QueryLayerConfig[]} props.layers
* @param {string} props.url
* @param {Error} [props.error]
* @returns {JSX.Element}
*/
export default function DownloadProgress({ layers, url, error }) {
return (
<>
<h3>Download Results</h3>
<ul>
{layers.map((searchLayer) => {
const tableName = searchLayer[fieldNames.queryLayers.tableName];
const resultConfig = results.find(
(result) => result.tableName === tableName,
);
const layerName = searchLayer[fieldNames.queryLayers.layerName];

return (
<li key={tableName} className="mb-1">
<div className="flex items-center justify-start">
<ResultStatusIcons
resultConfig={resultConfig}
layerName={layerName}
/>
<span className="leading-5">
{layerName}
{resultConfig?.features ? (
<Tag>{resultConfig.features.length.toLocaleString()}</Tag>
) : null}
</span>
<span className="leading-5">{layerName}</span>
</div>
{resultConfig?.url ? (
<a
ref={(node) => {
if (node) {
anchorTagRefs.current.set(tableName, node);
} else {
anchorTagRefs.current.delete(tableName);
}
}}
href={resultConfig.url}
download={resultConfig.url.substring(
resultConfig.url.lastIndexOf('/') + 1,
)}
className="flex items-center justify-center rounded-md border-2 border-success-500 p-1 font-bold text-success-500"
>
<Icon className="mr-2" name="arrowDown" label="download" />{' '}
download
</a>
) : null}
</li>
);
})}
</ul>
<p className="mt-4">
This can take up to several minutes for larger datasets.
</p>
{url ? (
<a
href={url}
download={url.substring(url.lastIndexOf('/') + 1)}
className="mt-4 flex items-center justify-center rounded-md border-2 border-success-500 p-1 font-bold text-success-500"
>
<Icon className="mr-2" name="arrowDown" label="download" /> download
</a>
) : error ? (
<p className="mt-4 flex align-middle text-error-500">
<Icon
name="error"
className="mr-1"
label="error message"
size="3xl"
/>
There was an error downloading the data: {error.message}
</p>
) : (
<>
<p className="mt-4">
This can take up to several minutes for larger datasets.
</p>
<div className="flex items-center justify-center">
<Spinner
ariaLabel="downloading activity indicator"
size="custom"
className="h-14 w-14"
/>
</div>
</>
)}
</>
);
}

DownloadProgress.propTypes = {
layers: PropTypes.arrayOf(PropTypes.object).isRequired,
results: PropTypes.arrayOf(PropTypes.object),
};
35 changes: 17 additions & 18 deletions src/components/search-wizard/DownloadProgress.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ export default {
component: DownloadProgress,
decorators: [
(Story) => (
<div className="w-80">
<div className="w-80 border">
<Story />
</div>
),
],
};

/** @type {import('../../../functions/common/config').QueryLayerConfig} */
const queryLayerResult2 = {
...queryLayerResult,
[fieldNames.queryLayers.tableName]: 'TableName',
Expand All @@ -38,22 +39,20 @@ const layers = [
queryLayerResult4,
];

export const Default = () => {
const results = [
{
tableName: 'SomeOtherTable',
error: 'There was an error!',
},
{
tableName: 'DifferentTable',
url: 'https://services1.arcgis.com/99lidPhWCzftIe9K/ArcGIS/rest/services/SITEREM/FeatureServer/replicafilescache/SITEREM_-1519884480040818284.zip',
features: [{}, {}],
},
{
tableName: 'AnotherTable',
url: 'https://services1.arcgis.com/99lidPhWCzftIe9K/ArcGIS/rest/services/SITEREM/FeatureServer/replicafilescache/SITEREM_-1519884480040818284.zip',
},
];
export const Pending = () => {
return <DownloadProgress layers={layers} url={null} />;
};

export const Success = () => {
return <DownloadProgress layers={layers} url="https://google.com" />;
};

return <DownloadProgress layers={layers} results={results} />;
export const ErrorMessage = () => {
return (
<DownloadProgress
layers={layers}
url={null}
error={new Error('test error message')}
/>
);
};
Loading

0 comments on commit 9ccdd94

Please sign in to comment.