+
+
+
+
+
+
+
-
+
+
diff --git a/src/app-pages/explorer/explorer.scss b/src/app-pages/explorer/explorer.scss
index 464c8a24..5400f5ae 100644
--- a/src/app-pages/explorer/explorer.scss
+++ b/src/app-pages/explorer/explorer.scss
@@ -1,3 +1,5 @@
+@import '../../css/variables';
+
.explorer-container {
height: calc(100vh - 158px);
border: 1px solid lightgray;
@@ -5,4 +7,40 @@
&.with-banner {
height: calc(100vh - 190px);
}
-}
\ No newline at end of file
+}
+
+.active-item {
+ font-weight: 500;
+}
+
+.inactive-item {
+ color: #9a9a9a;
+}
+
+.legend-icon {
+ &.active {
+ stroke: $success-color;
+ stroke-width: 3;
+ fill: white;
+ }
+ &.inactive {
+ stroke: $inactive-color;
+ stroke-width: 3;
+ fill: white;
+ }
+ &.abandoned {
+ stroke: $inactive-color;
+ stroke-width: 3;
+ fill: white;
+ }
+ &.destroyed {
+ stroke: $inactive-color;
+ stroke-width: 3;
+ fill: white;
+ }
+ &.lost {
+ stroke: $warning-color;
+ stroke-width: 3;
+ fill: white;
+ }
+}
diff --git a/src/app-pages/explorer/map-legend.jsx b/src/app-pages/explorer/map-legend.jsx
index d23c9c55..9756896b 100644
--- a/src/app-pages/explorer/map-legend.jsx
+++ b/src/app-pages/explorer/map-legend.jsx
@@ -1,51 +1,150 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import { connect } from 'redux-bundler-react';
+import { Icon } from '@iconify/react';
+import { VisibilityOffOutlined, VisibilityOutlined } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
import Card from '../../app-components/card';
+import { classArray } from '../../common/helpers/utils';
+
+const STATUS_ORDER = ['Active', 'Lost', 'Inactive', 'Abandoned', 'Destroyed'];
+
+const getLegendItemClasses = (allItems = [], currentItem) => {
+ const isEmpty = allItems.length === 0;
+ const contains = allItems.includes(currentItem);
+
+ const classes = classArray([
+ 'mb-2',
+ 'ml-1',
+ 'pointer',
+ !isEmpty && !contains ? 'inactive-item' : 'active-item',
+ ]);
+
+ return classes;
+};
+
+const displayInstrumentTypes = (legendTypes = [], currentTypes = [], onClick = () => {}) => (
+ currentTypes?.map(type => {
+ const { id, value, description: icon } = type;
+
+ return (
+
onClick(type)}>
+ {icon && }
+ {value}
+
+ )
+ })
+);
export default connect(
'selectDomainsItemsByGroup',
- ({ domainsItemsByGroup: domains }) => {
- const [statuses, setStatuses] = useState([]);
+ 'selectInstrumentsItems',
+ ({
+ domainsItemsByGroup: domains,
+ instrumentsItems: instruments,
+ legendFilters = {},
+ setLegendFilters = () => {},
+ }) => {
+ const [isVisible, setIsVisible] = useState(true);
+ const { status = [], instrument_type = [] } = domains || {};
+ const { status: legendStatus = [], type: legendType = [] } = legendFilters || {};
+
+ const statuses = status.map(s => {
+ const title = s.value[0].toUpperCase() + s.value.substr(1).toLowerCase();
- useEffect(() => {
- const { status } = domains;
- const statusOrder = ['Active', 'Lost', 'Inactive', 'Abandoned', 'Destroyed'];
+ return {
+ title,
+ value: s.value,
+ order: STATUS_ORDER.indexOf(title),
+ };
+ }).sort((a, b) => (a.order > b.order ? 1 : -1));
- if (domains && status) {
- const newStatuses = status.map(s => {
- const title = s.value[0].toUpperCase() + s.value.substr(1).toLowerCase();
+ const currentTypes = instrument_type.filter(type => instruments.some(i => i.type_id === type.id));
- return {
- title,
- value: s.value,
- order: statusOrder.indexOf(title),
+ const toggleVisibleInstruments = (key, item, maxLength) => {
+ if (key === 'status') {
+ const { value } = item;
+
+ setLegendFilters(prev => {
+ const found = prev['status'].findIndex(el => el === value);
+
+ if (found >= 0) {
+ const clone = [...prev['status']];
+ clone.splice(found, 1);
+ return {
+ ...prev,
+ status: clone.length === maxLength - 1 ? [value] : clone,
+ };
+ } else {
+ return {
+ ...prev,
+ status: [...prev['status'], value],
+ };
};
});
+ } else if (key === 'type') {
+ const { id } = item;
- newStatuses.sort((a, b) => (a.order > b.order ? 1 : -1));
- setStatuses(newStatuses);
+ setLegendFilters(prev => {
+ const found = prev['type'].findIndex(el => el === id);
+ if (found >= 0) {
+ const clone = [...prev['type']];
+ clone.splice(found, 1);
+ return {
+ ...prev,
+ type: clone.length === maxLength - 1 ? [id] : clone,
+ };
+ } else {
+ return {
+ ...prev,
+ type: [...prev['type'], id],
+ };
+ }
+ });
+ } else {
+ // eslint-disable-next-line no-console
+ console.log('Invalid Type. Skipping Execution of `toggleVisibleInstruments()`');
}
- }, [domains, setStatuses]);
+ };
return (
-
+
- Instrument Status
- {statuses.map(x => (
-
-
- {x.title}
-
- ))}
+
+ Map Legend
+ setIsVisible(prev => !prev)}
+ title={isVisible ? 'Hide Legend' : 'Show Legend'}
+ >
+ {isVisible ? : }
+
+
+ {isVisible && (
+ <>
+
+ {statuses?.map(s => (
+ toggleVisibleInstruments('status', s, statuses.length)}>
+
+ {s.title}
+
+ ))}
+ {!!currentTypes?.length && (
+ <>
+
+ {displayInstrumentTypes(legendType, currentTypes, (i) => toggleVisibleInstruments('type', i, currentTypes.length))}
+
+ )}
+
+ )}
diff --git a/src/app-pages/explorer/map-tools.jsx b/src/app-pages/explorer/map-tools.jsx
index 4bc9029a..b63f0cab 100644
--- a/src/app-pages/explorer/map-tools.jsx
+++ b/src/app-pages/explorer/map-tools.jsx
@@ -8,7 +8,12 @@ import Button from '../../app-components/button';
export default connect(
'doExploreMapInteractionsReset',
'doExploreMapInteractionsSelectMode',
- ({ doExploreMapInteractionsReset, doExploreMapInteractionsSelectMode }) => {
+ 'selectExploreMapInteractionsVersion',
+ ({
+ doExploreMapInteractionsReset,
+ doExploreMapInteractionsSelectMode,
+ exploreMapInteractionsVersion,
+ }) => {
const [selectMode, setSelectMode] = useState(false);
useEffect(() => {
@@ -23,10 +28,11 @@ export default connect(
selectMode,
doExploreMapInteractionsReset,
doExploreMapInteractionsSelectMode,
+ exploreMapInteractionsVersion,
]);
return (
-
+