@eeacms/volto-eea-map 0.1.9 → 0.1.12

package/CHANGELOG.md

@@ -4,8 +4,30 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.12](https://github.com/eea/volto-eea-map/compare/0.1.11...0.1.12)
+
+- cleanup [`53a2d89`](https://github.com/eea/volto-eea-map/commit/53a2d897675af2f75d8bd787ed07cdcfac69bdd0)
+- get criteria and map it as query on fresh layers [`51f8087`](https://github.com/eea/volto-eea-map/commit/51f80870764d65140ac0a6408c01c0b63476bbd2)
+
+#### [0.1.11](https://github.com/eea/volto-eea-map/compare/0.1.10...0.1.11)
+
+> 18 August 2022
+
+- Legend for each layer in object list [`#11`](https://github.com/eea/volto-eea-map/pull/11)
+- Legend for all layers [`2d9285e`](https://github.com/eea/volto-eea-map/commit/2d9285e12ea512b7a1f24300ad2f7b3072e334d5)
+
+#### [0.1.10](https://github.com/eea/volto-eea-map/compare/0.1.9...0.1.10)
+
+> 17 August 2022
+
+- EEA core metadata adaptation [`#10`](https://github.com/eea/volto-eea-map/pull/10)
+- EEA core metadata adaptation for map block to [`5fb5724`](https://github.com/eea/volto-eea-map/commit/5fb5724164e1e9b1ae5143f9bd565c28118be253)
+
 #### [0.1.9](https://github.com/eea/volto-eea-map/compare/0.1.8...0.1.9)
 
+> 12 August 2022
+
+- Query builder for map layers queries [`#9`](https://github.com/eea/volto-eea-map/pull/9)
 - pinpoint query builder [`6184b0e`](https://github.com/eea/volto-eea-map/commit/6184b0e1dcee48e7d34bf56bc1c878438d07f987)
 - build query widget [`7a9d74a`](https://github.com/eea/volto-eea-map/commit/7a9d74a6fdac32a8b424c5ca97edd42df436cbe2)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/EEAMap/Edit.jsx

@@ -1,14 +1,33 @@
 import React from 'react';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
 import { SidebarPortal } from '@plone/volto/components';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
 import { Schema } from './Schema';
 import View from './View';
+import { getContent } from '@plone/volto/actions';
+
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import './styles/map.css';
 
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
+  React.useEffect(() => {
+    if (
+      !data.data_query_params ||
+      props.data_query !== data.data_query_params
+    ) {
+      onChangeBlock(block, {
+        ...data,
+        data_query_params: props.data_query,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.data_query, block, data]);
 
   return (
     <div>
@@ -31,4 +50,15 @@ const Edit = (props) => {
   );
 };
 
-export default Edit;
+export default compose(
+  connect(
+    (state, props) => ({
+      data_query: state.content.data.data_query,
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(Edit);

package/src/components/Blocks/EEAMap/Schema.js

@@ -7,26 +7,21 @@ export const Schema = (props) => {
         title: 'Default',
         fields: [
           'map_data',
-          //...(use_visualization ? ['vis_url'] : ['map_data']),
           'description',
           'height',
           'show_legend',
           'show_download',
           'show_viewer',
+          'show_sources',
+          'data_query_params',
         ],
       },
     ],
     properties: {
-      // use_visualization: {
-      //   title: 'Use visualization',
-      //   description:
-      //     'This setting will enable importing the map data from a visualization. If is enabled, editing the map manually will not be possible',
-      //   type: 'boolean',
-      // },
-      // vis_url: {
-      //   widget: 'object_by_path',
-      //   title: 'Visualization',
-      // },
+      show_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+      },
       height: {
         title: 'Height',
         type: 'number',
@@ -52,6 +47,10 @@ export const Schema = (props) => {
         title: 'Show web viewer',
         type: 'boolean',
       },
+      data_query_params: {
+        title: 'Data query parameters',
+        widget: 'data_query_widget',
+      },
     },
     required: [],
   };

package/src/components/Blocks/EEAMap/View.jsx

@@ -1,13 +1,24 @@
 import React from 'react';
 
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
 import Webmap from './components/Webmap';
 import ExtraViews from './components/widgets/ExtraViews';
 import { PrivacyProtection } from '@eeacms/volto-embed';
+import { getContent } from '@plone/volto/actions';
 
 const View = (props) => {
-  const { data, id } = props || {};
+  const { data, id, path } = props || {};
   const { map_data = {}, height = '' } = data;
 
+  React.useEffect(() => {
+    if (path) {
+      props.getContent(path, null, id);
+    }
+    //    eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [path]);
+
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
@@ -18,4 +29,15 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default compose(
+  connect(
+    (state, props) => ({
+      data_query: state.content.subrequests?.[props.id]?.data?.data_query,
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(View);

package/src/components/Blocks/EEAMap/components/widgets/DataQueryWidget.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormFieldWrapper, Field } from '@plone/volto/components';
+
+const DataQueryWidget = (props) => {
+  const { value, onChange, id } = props;
+
+  const onChangeAlias = (fieldId, fieldValue) => {
+    let altValue = value;
+    value[fieldId] = { ...value[fieldId], alias: fieldValue };
+    onChange(id, altValue);
+  };
+
+  return (
+    <div>
+      <FormFieldWrapper {...props} noForInFieldLabel></FormFieldWrapper>
+      <div className="data-query-widget-field">
+        {value && value.length > 0 ? (
+          value.map((param, i) => (
+            <div key={i}>
+              <h5 style={{ fontWeight: 'bold' }}>{param.i}</h5>
+              <Field
+                id={i}
+                title="Alias"
+                type="string"
+                description="Data connector parameter alias for matchings. Default is {Key}"
+                onChange={onChangeAlias}
+                value={param?.alias}
+              />
+              <Field
+                id={param.i}
+                title="Values"
+                type="string"
+                description="Parameter value/s"
+                value={param.v.join(',')}
+              />
+            </div>
+          ))
+        ) : (
+          <p style={{ textAlign: 'center' }}>No parameters set</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DataQueryWidget;

package/src/components/Blocks/EEAMap/components/widgets/ExtraViews.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from 'semantic-ui-react';
-import { Icon } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
 
 import LegendWidget from './LegendWidget';
 import { serializeNodes } from 'volto-slate/editor/render';
@@ -15,46 +15,69 @@ const ExtraViews = ({ data }) => {
     show_legend,
     show_download,
     show_viewer,
+    show_sources,
+    data_provenance = {},
   } = data;
-
   return (
     <div className="extra-eea-map-content">
-      {map_data.layers?.map_layers[0] && (show_download || show_viewer) && (
-        <div
-          style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
-        >
-          {show_download && (
-            <a
-              target="_blank"
-              rel="noreferrer"
-              href={`${map_data.layers.map_layers[0].map_layer.map_service_url}?f=lyr&v=9.3`}
-            >
-              <Button size="tiny">
-                <Button.Content>
-                  <Icon name={downloadSVG} title="Download" size="25px" />
-                </Button.Content>
-              </Button>
-            </a>
-          )}
-          {show_viewer && (
-            <a
-              target="_blank"
-              rel="noreferrer"
-              href={
-                `https://www.arcgis.com/home/webmap/viewer.html?url=` +
-                `${map_data.layers.map_layers[0].map_layer.map_service_url}&source=sd`
-              }
-            >
-              <Button size="tiny">
-                <Button.Content>
-                  <Icon name={worldSVG} title="View map" size="25px" />
-                </Button.Content>
-              </Button>
-            </a>
+      {map_data &&
+        map_data.layers?.map_layers[0] &&
+        (show_download || show_viewer) && (
+          <div
+            style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
+          >
+            {show_download && (
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={`${map_data.layers.map_layers[0].map_layer.map_service_url}?f=lyr&v=9.3`}
+              >
+                <Button size="tiny">
+                  <Button.Content>
+                    <Icon name={downloadSVG} title="Download" size="25px" />
+                  </Button.Content>
+                </Button>
+              </a>
+            )}
+            {show_viewer && (
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={
+                  `https://www.arcgis.com/home/webmap/viewer.html?url=` +
+                  `${map_data.layers.map_layers[0].map_layer.map_service_url}&source=sd`
+                }
+              >
+                <Button size="tiny">
+                  <Button.Content>
+                    <Icon name={worldSVG} title="View map" size="25px" />
+                  </Button.Content>
+                </Button>
+              </a>
+            )}
+          </div>
+        )}
+      {show_legend && map_data && <LegendWidget data={map_data} />}
+      {show_sources && (
+        <>
+          {data_provenance &&
+          data_provenance.data &&
+          data_provenance.data.length > 0 ? (
+            <div>
+              <h3>Sources:</h3>
+              {data_provenance.data.map((data, i) => (
+                <div key={i}>
+                  <p className="map_source_title">{data.title}</p>
+                  <p className="map_source_description">{data.organisation}</p>
+                  <UniversalLink href={data.link}>{data.link} </UniversalLink>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p>Data provenance is not set for visualization used or page</p>
           )}
-        </div>
+        </>
       )}
-      {show_legend && <LegendWidget data={map_data} />}
       {description && serializeNodes(description)}
     </div>
   );

package/src/components/Blocks/EEAMap/components/widgets/LayerSelectWidget.jsx

@@ -3,10 +3,11 @@ import { Icon } from '@plone/volto/components';
 import { Input, Select, Button, Grid } from 'semantic-ui-react';
 import { QueryBuilder } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
-// import {
-//   bootstrapControlClassnames,
-//   bootstrapControlElements,
-// } from 'react-querybuilder/bootstrap';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { getContent } from '@plone/volto/actions';
 
 import checkSVG from '@plone/volto/icons/check.svg';
 import closeSVG from '@plone/volto/icons/clear.svg';
@@ -16,7 +17,7 @@ import resetSVG from '@plone/volto/icons/reset.svg';
 import { fetchArcgisData } from '../../utils';
 
 const LayerSelectWidget = (props) => {
-  const { onChange, id } = props;
+  const { onChange, id, data_query } = props;
 
   const value = React.useMemo(() => props.value || {}, [props.value]);
 
@@ -37,7 +38,6 @@ const LayerSelectWidget = (props) => {
   const [availableLayers, setAvailableLayers] = React.useState(
     available_layers,
   );
-  //const [layerQuery, setLayerQuery] = React.useState(query);
 
   const [builtQuery, setBuiltQuery] = React.useState(query);
 
@@ -68,6 +68,55 @@ const LayerSelectWidget = (props) => {
     }
   };
 
+  React.useEffect(() => {
+    props.getContent('', null, id);
+    //    eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (query && !builtQuery) {
+      setBuiltQuery(query);
+    }
+  }, [query, builtQuery]);
+
+  React.useEffect(() => {
+    //detect existing queries in block content. If it exists. Apply matching queries to layer on fresh layer load
+    if (
+      map_service_url &&
+      layer &&
+      !query &&
+      data_query &&
+      data_query.length > 0
+    ) {
+      let autoQuery = {
+        combinator: 'or',
+        rules: [],
+      };
+      data_query.forEach((param, i) => {
+        if (
+          fields &&
+          fields.length > 0 &&
+          fields.filter(
+            (field, j) => field.name === param.alias || field.name === param.i,
+          ).length > 0
+        ) {
+          autoQuery.rules = [
+            ...autoQuery.rules,
+            { field: param.alias || param.i, operator: '=', value: param.v[0] },
+          ];
+        }
+      });
+      if (autoQuery.rules.length > 0) {
+        onChange(id, {
+          ...value,
+          query: autoQuery,
+        });
+        setBuiltQuery(autoQuery);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map_service_url, layer, query, data_query, fields]);
+
   const handleLayerFetch = async (service_url, id) => {
     try {
       let fullLayer = await fetchArcgisData(`${service_url}/${id}`);
@@ -134,8 +183,6 @@ const LayerSelectWidget = (props) => {
             style={{ width: '100%' }}
             error={serviceUrlError}
             value={serviceUrl}
-            // action
-            // actionPosition="right"
           ></Input>
 
           <span style={{ fontSize: '12px', color: 'darkred' }}>
@@ -188,14 +235,6 @@ const LayerSelectWidget = (props) => {
             <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
               Query Layer
             </h5>
-            <Grid.Row stretched>
-              {/* <Input
-                type="text"
-                style={{ width: '100%' }}
-                onChange={(e, { value }) => setLayerQuery(value)}
-                value={layerQuery}
-              ></Input> */}
-            </Grid.Row>
             <Grid.Row>
               <QueryBuilder
                 fields={fields.map((fi, i) => {
@@ -204,8 +243,6 @@ const LayerSelectWidget = (props) => {
                 query={builtQuery}
                 onQueryChange={(q) => setBuiltQuery(q)}
                 enableDragAndDrop={false}
-                //controlElements={bootstrapControlElements}
-                //controlClassnames={bootstrapControlClassnames}
               />
             </Grid.Row>
             {builtQuery && (
@@ -245,4 +282,14 @@ const LayerSelectWidget = (props) => {
   );
 };
 
-export default LayerSelectWidget;
+export default compose(
+  connect(
+    (state, props) => ({
+      content: state.content.data,
+      data_query: state.content.data.data_query,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(LayerSelectWidget);

package/src/components/Blocks/EEAMap/components/widgets/LegendWidget.jsx

@@ -6,16 +6,33 @@ import { Icon } from '@plone/volto/components';
 import rightKeySVG from '@plone/volto/icons/right-key.svg';
 import downKeySVG from '@plone/volto/icons/down-key.svg';
 
-const LayerLegend = ({ data, name }) => {
+const LayerLegend = ({ data }) => {
   const [expand, setExpand] = React.useState(true);
+  const [legendRows, setLegendRows] = React.useState([]);
 
+  const { id, name } = data.layer || {};
+
+  const fetchLegend = async (url, activeLayerID) => {
+    let legendData = await fetchArcgisData(url);
+
+    const { layers = [] } = legendData;
+    const selectedLayer = layers.filter((l, i) => l.layerId === activeLayerID);
+    setLegendRows(selectedLayer[0].legend);
+  };
+
+  React.useEffect(() => {
+    if (data.map_service_url && id !== undefined) {
+      fetchLegend(`${data.map_service_url}/legend`, id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, data.map_service_url]);
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <h5
         role="presentation"
         onClick={() => setExpand(!expand)}
         style={{
-          marginTop: '10px',
+          marginTop: '15px',
           marginBottom: '5px',
           cursor: 'pointer',
           display: 'flex',
@@ -30,8 +47,8 @@ const LayerLegend = ({ data, name }) => {
       </h5>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         {expand &&
-          data.length > 0 &&
-          data.map((item, i) => {
+          legendRows.length > 0 &&
+          legendRows.map((item, i) => {
             return (
               <span key={i} style={{ display: 'flex', alignItems: 'center' }}>
                 <img
@@ -53,49 +70,25 @@ const LegendWidget = (props) => {
   const data = React.useMemo(() => props.data, [props.data]);
   const { layers = {} } = data;
   const { map_layers = [] } = layers;
-  const [legendLayers, setLegendLayers] = React.useState([]);
-
-  const activeLayer = map_layers.length > 0 ? map_layers[0]?.map_layer : '';
 
-  const fetchLegend = async (url) => {
-    let legendData = await fetchArcgisData(url);
-
-    //TODO: configure this for multiple layers
-    const { layers = [] } = legendData;
-    const selectedLayerLedend = layers.filter(
-      (l, i) => l.layerId === activeLayer.layer.id,
-    );
-    setLegendLayers(selectedLayerLedend);
-  };
-
-  React.useEffect(() => {
-    if (activeLayer) {
-      fetchLegend(`${activeLayer.map_service_url}/legend`);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, activeLayer.map_service_url]);
   return (
     <>
       <div style={{ margin: '10px 0' }}>
         <Grid>
           <Grid.Row>
             <Grid.Column>
-              <h3>Legend:</h3>
-              {!activeLayer && (
+              <h4>Legend:</h4>
+              {map_layers.length === 0 && (
                 <p>
                   No layer found for legend. Please add a map layer from editor.
                 </p>
               )}
-              {legendLayers.length > 0 &&
-                legendLayers.map((layer, i) => {
-                  return (
-                    <LayerLegend
-                      key={i}
-                      name={layer?.layerName}
-                      data={layer?.legend}
-                    />
-                  );
-                })}
+
+              {map_layers &&
+                map_layers.length > 0 &&
+                map_layers.map((l, i) => (
+                  <LayerLegend key={i} data={l.map_layer} />
+                ))}
             </Grid.Column>
           </Grid.Row>
         </Grid>

package/src/components/Blocks/EEAMap/components/widgets/MapEditorWidget.jsx

@@ -37,7 +37,6 @@ const MapEditorWidget = (props) => {
   };
 
   let schema = PanelsSchema({ data: dataForm });
-
   return (
     <FormFieldWrapper {...props}>
       <Modal

package/src/components/Blocks/EEAMap/components/widgets/ObjectTypesWidget.jsx

@@ -4,7 +4,15 @@ import { ObjectWidget } from '@plone/volto/components';
 import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
 
 export const ObjectTypesWidget = (props) => {
-  const { schemas, value = {}, onChange, errors = {}, id, device } = props;
+  const {
+    schemas,
+    value = {},
+    onChange,
+    errors = {},
+    id,
+    device,
+    block,
+  } = props;
   const objectId = id;
 
   const defaultActiveTab = 0;
@@ -30,6 +38,7 @@ export const ObjectTypesWidget = (props) => {
             <ObjectWidget
               schema={schema}
               id={id}
+              block={block}
               errors={errors}
               value={value[id] || {}}
               onChange={(schemaId, v) => {

package/src/components/Blocks/EEAMap/styles/map.css

@@ -103,6 +103,22 @@
   cursor: pointer;
 }
 
+.map_source_title {
+  margin-top: 15px !important;
+  margin-bottom: 5px !important;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.map_source_description {
+  margin: 5px 0 !important;
+  font-size: 14px;
+}
+
+.data-query-widget-field {
+  margin: 10px 0;
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;

package/src/components/Blocks/EmbedEEAMap/Edit.jsx

@@ -7,12 +7,12 @@ import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import './styles/map.css';
 
 const Edit = (props) => {
-  const { block, data, onChangeBlock, selected } = props;
+  const { block, data, onChangeBlock, selected, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
 
   return (
     <div>
-      <View data={data} />
+      <View data={data} id={id} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}

package/src/components/Blocks/EmbedEEAMap/Schema.js

@@ -12,6 +12,7 @@ export const Schema = (props) => {
           'show_legend',
           'show_download',
           'show_viewer',
+          'show_sources',
         ],
       },
     ],
@@ -28,6 +29,10 @@ export const Schema = (props) => {
         title: 'Description',
         widget: 'slate',
       },
+      show_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+      },
       show_legend: {
         title: 'Show legend',
         type: 'boolean',

package/src/components/Blocks/EmbedEEAMap/View.jsx

@@ -6,15 +6,18 @@ import { compose } from 'redux';
 import { PrivacyProtection } from '@eeacms/volto-embed';
 import Webmap from '../EEAMap/components/Webmap';
 import ExtraViews from '../EEAMap/components/widgets/ExtraViews';
-import { getVisualization } from '@eeacms/volto-eea-map/actions';
+import { getContent } from '@plone/volto/actions';
 
 const View = (props) => {
-  const { data, map_visualization } = props || {};
+  const { data, viz_content = {}, id } = props || {};
   const { height = '', vis_url = '' } = data;
 
+  const { map_visualization_data = '', data_provenance = {} } =
+    viz_content || {};
+
   React.useEffect(() => {
     if (vis_url) {
-      props.getVisualization(vis_url);
+      props.getContent(vis_url, null, id);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vis_url]);
@@ -22,13 +25,19 @@ const View = (props) => {
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
-        {map_visualization && (
+        {map_visualization_data && (
           <div>
-            <Webmap data={map_visualization.data} height={height} />
-            <ExtraViews data={{ ...data, map_data: map_visualization.data }} />
+            <Webmap data={map_visualization_data} height={height} />
+            <ExtraViews
+              data={{
+                ...data,
+                data_provenance,
+                map_data: map_visualization_data,
+              }}
+            />
           </div>
         )}
-        {!map_visualization && (
+        {!map_visualization_data && (
           <p>No map view to show. Set visualization in block configuration.</p>
         )}
       </PrivacyProtection>
@@ -39,10 +48,10 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
-      map_visualization: state.map_visualizations.data[props.data.vis_url],
+      viz_content: state.content.subrequests?.[props.id]?.data,
     }),
     {
-      getVisualization,
+      getContent,
     },
   ),
 )(View);

package/src/index.js

@@ -5,6 +5,7 @@ import {
   EmbedMapEdit,
 } from '@eeacms/volto-eea-map/components';
 import world from '@plone/volto/icons/world.svg';
+import DataQueryWidget from './components/Blocks/EEAMap/components/widgets/DataQueryWidget';
 import LayerSelectWidget from './components/Blocks/EEAMap/components/widgets/LayerSelectWidget';
 import MapEditorWidget from './components/Blocks/EEAMap/components/widgets/MapEditorWidget';
 import ObjectTypesWidget from './components/Blocks/EEAMap/components/widgets/ObjectTypesWidget';
@@ -89,6 +90,7 @@ export default (config) => {
   config.widgets.widget.map_edit_widget = MapEditorWidget;
   config.widgets.widget.map_layers_widget = LayerSelectWidget;
   config.widgets.widget.object_types_widget = ObjectTypesWidget;
+  config.widgets.widget.data_query_widget = DataQueryWidget;
 
   //map editor for the visualization(content-type)
   config.widgets.id.map_visualization_data = VisualizationEditorWidget;