Dataviz (#107)

* Fix StackLayer when using "To acquired" datasets * Fix Leaflet map z-index * Remove console.log in DatasetFileInput * Use the web optimized raster or vector files for dataviz * file: 'download' attribute on link is not accepted by Safari * Datagrid: Wrap content in cell; add horizontal overflow * Dataviz: Add colors to raster * Dropzone: no need to have type="hidden" * Display preview raster & geojson * Tooltip: remove type:"button" in trigger
BLSQ · Jun 29, 2022 · 6876128 · 6876128
1 parent 0a9d637
commit 6876128
Show file tree

Hide file tree

Showing 25 changed files with 1,115 additions and 749 deletions.
diff --git a/leaflet.d.ts b/leaflet.d.ts
@@ -11,6 +11,7 @@ interface BigGeoJSONOptions extends GeoJSONOptions {
   promoteId?: string | null; // name of a feature property to be promoted to feature.id
   generateId?: boolean; // whether to generate feature ids. Cannot be used with promoteId
   debug?: number;
+  style?: ((feature: any) => object) | object;
 }
 
 declare module "leaflet" {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,7 +50,6 @@
     "clsx": "^1.1.1",
     "csv-parse": "^5.2.0",
     "deepmerge": "^4.2.2",
-    "dropzone": "^6.0.0-beta.2",
     "eslint": "^8.18.0",
     "eslint-config-next": "^12.1.6",
     "eslint-config-prettier": "^8.5.0",

diff --git a/public/locales/en/messages.json b/public/locales/en/messages.json
@@ -51,6 +51,7 @@
   "Breadcrumb": "Breadcrumb",
   "Cancel": "Cancel",
   "Category column": "Category column",
+  "Category values": "Category values",
   "Change": "Change",
   "Change owner": "Change owner",
   "Change the owner of this project": "Change the owner of this project",
@@ -159,12 +160,15 @@
   "Parameters": "Parameters",
   "Password": "Password",
   "Pending": "Pending",
+  "Percentile": "Percentile",
+  "Percentiles": "Percentiles",
   "Population": "Population",
   "Previous": "Previous",
   "Project": "Project",
   "Project name": "Project name",
   "Projects": "Projects",
   "Queued": "Queued",
+  "Range": "Range",
   "Raster": "Raster",
   "Raster file": "Raster file",
   "Ready": "Ready",
@@ -206,6 +210,7 @@
   "Teams": "Teams",
   "The metadata of your dataset has not been extracted yet.": "The metadata of your dataset has not been extracted yet.",
   "The metadata of your dataset have not been extracted yet.": "The metadata of your dataset have not been extracted yet.",
+  "The preview of this dataset is not yet ready": "The preview of this dataset is not yet ready",
   "The spatial resolution refers to the linear spacing of a measurement.": "The spatial resolution refers to the linear spacing of a measurement.",
   "The user or team responsible for this project": "The user or team responsible for this project",
   "The user that created this project": "The user that created this project",
@@ -235,6 +240,7 @@
   "Travel Scenario": "Travel Scenario",
   "Travel Times": "Travel Times",
   "Type": "Type",
+  "Unique values": "Unique values",
   "Unknown": "Unknown",
   "Unknown error": "Unknown error",
   "Unknown project": "Unknown project",
@@ -252,6 +258,7 @@
   "Users": "Users",
   "Valid": "Valid",
   "Validating": "Validating",
+  "Value": "Value",
   "Vector": "Vector",
   "View all": "View all",
   "Viewer": "Viewer",

diff --git a/public/locales/fr/messages.json b/public/locales/fr/messages.json
@@ -54,6 +54,7 @@
   "Breadcrumb": "",
   "Cancel": "",
   "Category column": "",
+  "Category values": "",
   "Change": "",
   "Change owner": "",
   "Change the owner of this project": "",
@@ -162,12 +163,15 @@
   "Parameters": "",
   "Password": "",
   "Pending": "",
+  "Percentile": "",
+  "Percentiles": "",
   "Population": "",
   "Previous": "",
   "Project": "",
   "Project name": "",
   "Projects": "",
   "Queued": "",
+  "Range": "",
   "Raster": "",
   "Raster file": "",
   "Ready": "",
@@ -209,6 +213,7 @@
   "Teams": "",
   "The metadata of your dataset has not been extracted yet.": "",
   "The metadata of your dataset have not been extracted yet.": "",
+  "The preview of this dataset is not yet ready": "",
   "The spatial resolution refers to the linear spacing of a measurement.": "",
   "The user or team responsible for this project": "",
   "The user that created this project": "",
@@ -238,6 +243,7 @@
   "Travel Scenario": "",
   "Travel Times": "",
   "Type": "",
+  "Unique values": "",
   "Unknown": "",
   "Unknown error": "",
   "Unknown project": "",
@@ -255,6 +261,7 @@
   "Users": "",
   "Valid": "",
   "Validating": "",
+  "Value": "",
   "Vector": "",
   "View all": "",
   "Viewer": "",

diff --git a/schema.graphql b/schema.graphql
@@ -604,6 +604,7 @@ type Mutation {
   deleteAccessmodFileset(input: DeleteAccessmodFilesetInput!): DeleteAccessmodFilesetResult!
   prepareAccessmodFileUpload(input: PrepareAccessmodFileUploadInput!): PrepareAccessmodFileUploadResult!
   prepareAccessmodFileDownload(input: PrepareAccessmodFileDownloadInput!): PrepareAccessmodFileDownloadResult!
+  prepareAccessmodFilesetVisualizationDownload(input: PrepareAccessmodFilesetVisualizationDownloadInput!): PrepareAccessmodFilesetVisualizationDownloadResult!
   createAccessmodFile(input: CreateAccessmodFileInput!): CreateAccessmodFileResult!
   createAccessmodAccessibilityAnalysis(input: CreateAccessmodAccessibilityAnalysisInput): CreateAccessmodAccessibilityAnalysisResult!
   createAccessmodZonalStatistics(input: CreateAccessmodZonalStatisticsInput): CreateAccessmodZonalStatisticsResult!
@@ -644,6 +645,15 @@ type PrepareAccessmodFileDownloadResult {
   downloadUrl: String
 }
 
+input PrepareAccessmodFilesetVisualizationDownloadInput {
+  id: String!
+}
+
+type PrepareAccessmodFilesetVisualizationDownloadResult {
+  success: Boolean!
+  url: String
+}
+
 input PrepareAccessmodFileUploadInput {
   filesetId: String!
   mimeType: String!
@@ -669,6 +679,7 @@ type Query {
   accessmodAnalysis(id: String): AccessmodAnalysis
   accessmodAnalyses(projectId: String!, page: Int, perPage: Int): AccessmodAnalysisPage!
   country(code: String, alpha3: String): Country
+  boundaries(country_code: String!, level: String!): [WHOBoundary!]!
   countries: [Country!]!
 }
 
@@ -874,6 +885,15 @@ type User {
   lastLogin: DateTime
 }
 
+type WHOBoundary {
+  id: String!
+  name: String!
+  country: Country!
+  administrative_level: Int!
+  parent: String
+  extent: String!
+}
+
 type WHOInfo {
   region: WHORegion
   defaultCRS: Int!

diff --git a/src/components/DataGrid.tsx b/src/components/DataGrid.tsx
@@ -68,7 +68,7 @@ export const DATA_GRID_DEFAULT_THEME = {
   thead: "",
   tbody: "",
   th: "text-xs font-medium text-gray-500 tracking-wider text-left uppercase items-end flex px-3 py-3",
-  td: "whitespace-nowrap text-sm font-medium text-gray-800 px-3 py-1 md:py-2 flex items-center",
+  td: "whitespace-wrap text-sm font-medium text-gray-800 px-3 py-1 md:py-2 flex items-center",
   tr: "hover:bg-gray-200",
   pagination: "px-3",
 };
@@ -203,54 +203,59 @@ const DataGrid = (props: DataGridProps) => {
   }, [onFetchData, pageIndex, pageSize, sortBy]);
   return (
     <div className={className}>
-      <table className={clsx(theme.table)} {...getTableProps()}>
-        <thead className={clsx(theme.thead)}>
-          {headerGroups.map((headerGroup, i) => (
-            <tr className={theme.tr} {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column) => (
-                <th
-                  className={clsx(theme.th, column.className)}
-                  {...column.getHeaderProps(column.getSortByToggleProps())}
-                >
-                  {column.render("Header")}
-                  {column.isSorted && i === headerGroups.length - 1 && (
-                    <span
-                      className={clsx(
-                        "ml-2 inline-block w-4 flex-none rounded bg-gray-200 text-gray-900 group-hover:bg-gray-300"
-                      )}
-                    >
-                      {column.isSortedDesc ? (
-                        <ChevronDownIcon
-                          className="h-4 w-4"
-                          aria-hidden="true"
-                        />
-                      ) : (
-                        <ChevronUpIcon className="h-4 w-4" aria-hidden="true" />
-                      )}
-                    </span>
-                  )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody className={theme.tbody} {...getTableBodyProps()}>
-          {page.map((row, i) => {
-            prepareRow(row);
-            return (
-              <tr className={theme.tr} {...row.getRowProps()}>
-                {row.cells.map((cell) => {
-                  return (
-                    <td className={theme.td} {...cell.getCellProps()}>
-                      {cell.render("Cell")}
-                    </td>
-                  );
-                })}
+      <div className="overflow-x-auto">
+        <table className={clsx(theme.table)} {...getTableProps()}>
+          <thead className={clsx(theme.thead)}>
+            {headerGroups.map((headerGroup, i) => (
+              <tr className={theme.tr} {...headerGroup.getHeaderGroupProps()}>
+                {headerGroup.headers.map((column) => (
+                  <th
+                    className={clsx(theme.th, column.className)}
+                    {...column.getHeaderProps(column.getSortByToggleProps())}
+                  >
+                    {column.render("Header")}
+                    {column.isSorted && i === headerGroups.length - 1 && (
+                      <span
+                        className={clsx(
+                          "ml-2 inline-block w-4 flex-none rounded bg-gray-200 text-gray-900 group-hover:bg-gray-300"
+                        )}
+                      >
+                        {column.isSortedDesc ? (
+                          <ChevronDownIcon
+                            className="h-4 w-4"
+                            aria-hidden="true"
+                          />
+                        ) : (
+                          <ChevronUpIcon
+                            className="h-4 w-4"
+                            aria-hidden="true"
+                          />
+                        )}
+                      </span>
+                    )}
+                  </th>
+                ))}
               </tr>
-            );
-          })}
-        </tbody>
-      </table>
+            ))}
+          </thead>
+          <tbody className={theme.tbody} {...getTableBodyProps()}>
+            {page.map((row, i) => {
+              prepareRow(row);
+              return (
+                <tr className={theme.tr} {...row.getRowProps()}>
+                  {row.cells.map((cell) => {
+                    return (
+                      <td className={theme.td} {...cell.getCellProps()}>
+                        {cell.render("Cell")}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
       {totalItems !== undefined && (
         <Pagination
           onChange={onPaginationChange}

diff --git a/src/components/Dropzone.tsx b/src/components/Dropzone.tsx
@@ -40,6 +40,7 @@ const Dropzone = (props: DropzoneProps) => {
       accept,
       maxFiles,
       disabled,
+      useFsAccessApi: false,
       multiple: maxFiles !== 1,
     });
 
@@ -57,12 +58,12 @@ const Dropzone = (props: DropzoneProps) => {
   return (
     <div
       className={clsx(
-        "font flex w-full items-center justify-center rounded-md border border-dashed border-gray-300  px-5 py-5 text-sm text-gray-500 shadow-sm hover:border-gray-400",
+        "font flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed border-gray-300 px-5 py-5 text-sm text-gray-500 shadow-sm hover:border-gray-500",
         className
       )}
       {...getRootProps()}
     >
-      <input type="hidden" {...getInputProps()} />
+      <input {...getInputProps()} />
       <div className="flex flex-col items-center gap-2">
         {(!fileRejections.length && children) ?? (
           <>

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -28,11 +28,7 @@ const Tooltip = (props: Props) => {
   return (
     <>
       {"children" in props
-        ? React.createElement(
-            as,
-            { type: "button", ref: setTriggerRef },
-            props.children
-          )
+        ? React.createElement(as, { ref: setTriggerRef }, props.children)
         : props.renderTrigger(setTriggerRef)}
       {typeof window !== "undefined" &&
         ReactDOM.createPortal(

diff --git a/src/components/map/BigGeoJsonLayer.tsx b/src/components/map/BigGeoJsonLayer.tsx
@@ -6,23 +6,25 @@ import { GeoJSONProps } from "react-leaflet";
 
 type BigGeoJsonLayerProps = {
   data: GeoJSONProps["data"];
+  style?: object | Function;
 };
 
 const BigGeoJsonLayer = (props: BigGeoJsonLayerProps) => {
   const context = useLeafletContext();
-  const { data } = props;
+  const { data, style } = props;
   useEffect(() => {
     const container = context.layerContainer || context.map;
     const layer = L.bigGeoJson(data, {
       maxZoom: 16,
       tolerance: 3,
       debug: 0,
+      style: style,
     });
     container.addLayer(layer);
     return () => {
       container.removeLayer(layer);
     };
-  }, [data, context]);
+  }, [data, context, style]);
 
   return null;
 };

diff --git a/src/components/map/GeoRasterLayer.tsx b/src/components/map/GeoRasterLayer.tsx
@@ -19,7 +19,7 @@ const useGeoraster = (path: string) => {
   const [georaster, setGeoraster] = React.useState<GeoRaster>();
 
   React.useEffect(() => {
-    parseGeoraster(path, undefined, true)
+    parseGeoraster(path, undefined, false)
       .then((res: GeoRaster) => {
         setGeoraster(res);
       })
@@ -33,18 +33,16 @@ const useGeoraster = (path: string) => {
 
 type Props = {
   path: string;
-  colors?: string[];
 } & Omit<GeoRasterLayerOptions, "georaster" | "georasters">;
 
 function GeoRasterLayer({
   path,
-  colors,
   ...options
 }: Props): React.ReactElement | null {
   const georaster = useGeoraster(path);
 
   return georaster ? (
-    <GeoRasterComponent {...options} debugLevel={0} georaster={georaster} />
+    <GeoRasterComponent {...options} georaster={georaster} />
   ) : null;
 }