datastake-daf 0.6.780 → 0.6.782
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/index.js +298 -351
- package/dist/pages/index.js +235 -2052
- package/dist/style/datastake/mapbox-gl.css +330 -0
- package/dist/utils/index.js +0 -13
- package/package.json +1 -1
- package/src/@daf/core/components/Dashboard/Map/ChainIcon/Markers/StakeholderMarker.js +76 -9
- package/src/@daf/core/components/Dashboard/Map/ChainIcon/index.js +8 -116
- package/src/@daf/core/components/Dashboard/Map/ChainIcon/utils.js +17 -73
- package/src/@daf/core/components/Dashboard/Map/helper.js +0 -1
- package/src/@daf/core/components/Dashboard/Map/hook.js +29 -64
- package/src/@daf/core/components/Dashboard/Map/style.js +5 -20
- package/src/@daf/hooks/useViewFormUrlParams.js +84 -0
- package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CycleOutcomes/index.jsx +1 -1
- package/src/@daf/pages/Summary/Activities/PlantingCycle/components/PlantingLocations/index.jsx +168 -163
- package/src/@daf/utils/object.js +1 -3
- package/src/pages.js +1 -4
- package/src/utils.js +1 -1
- package/src/@daf/pages/View/hooks/useCallToGetData.js +0 -73
- package/src/@daf/pages/View/hooks/usePrepareForm.js +0 -86
- package/src/@daf/pages/View/hooks/useSubmitSubject.js +0 -40
- package/src/@daf/pages/View/hooks/useViewActions.js +0 -83
- package/src/@daf/pages/View/hooks/useViewPermissions.js +0 -75
- package/src/@daf/pages/View/hooks/useViewUrlParams.js +0 -93
- package/src/@daf/pages/View/index.jsx +0 -286
package/dist/components/index.js
CHANGED
|
@@ -9546,24 +9546,29 @@ const processConditionalTableKeys = (tableKeys, item) => {
|
|
|
9546
9546
|
});
|
|
9547
9547
|
return processedKeys;
|
|
9548
9548
|
};
|
|
9549
|
-
const renderFieldData = (type, value, user, config
|
|
9549
|
+
const renderFieldData = function (type, value, user, config) {
|
|
9550
|
+
let getApiBaseUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : () => {};
|
|
9551
|
+
let getAppHeader = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : () => {};
|
|
9552
|
+
let app = arguments.length > 6 ? arguments[6] : undefined;
|
|
9553
|
+
let allValues = arguments.length > 7 ? arguments[7] : undefined;
|
|
9554
|
+
let formValues = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : {};
|
|
9550
9555
|
switch (type) {
|
|
9551
9556
|
case 'year':
|
|
9552
9557
|
return value !== '-' ? renderDateFormatted(value, 'YYYY', 'en') : '-';
|
|
9553
9558
|
case 'date':
|
|
9554
9559
|
{
|
|
9555
|
-
const language = user
|
|
9560
|
+
const language = user !== null && user !== void 0 && user.language && (user === null || user === void 0 ? void 0 : user.language) === 'sp' ? 'es' : user === null || user === void 0 ? void 0 : user.language;
|
|
9556
9561
|
return value !== '-' ? renderDateFormatted(value, 'DD MMM YYYY', language || 'en') : '-';
|
|
9557
9562
|
}
|
|
9558
9563
|
case 'select':
|
|
9559
9564
|
{
|
|
9560
|
-
const options = config
|
|
9565
|
+
const options = (config === null || config === void 0 ? void 0 : config.options) || [];
|
|
9561
9566
|
const option = findOptions(value, options);
|
|
9562
9567
|
return option;
|
|
9563
9568
|
}
|
|
9564
9569
|
case 'multiselect':
|
|
9565
9570
|
{
|
|
9566
|
-
const options = config
|
|
9571
|
+
const options = (config === null || config === void 0 ? void 0 : config.options) || [];
|
|
9567
9572
|
const _val = typeof value === 'string' ? value.split(',').map(v => v.trim()) : value;
|
|
9568
9573
|
const option = findOptions(_val, options);
|
|
9569
9574
|
return option.join(', ');
|
|
@@ -9578,7 +9583,7 @@ const renderFieldData = (type, value, user, config, getApiBaseUrl = () => {}, ge
|
|
|
9578
9583
|
formValues: formValues
|
|
9579
9584
|
});
|
|
9580
9585
|
case 'percentage':
|
|
9581
|
-
return value === '-' || value === null || value === undefined ? '-' :
|
|
9586
|
+
return value === '-' || value === null || value === undefined ? '-' : "".concat(value, " %");
|
|
9582
9587
|
case 'geolocation':
|
|
9583
9588
|
{
|
|
9584
9589
|
const val = JSON.parse(value) || {};
|
|
@@ -9592,7 +9597,7 @@ const renderFieldData = (type, value, user, config, getApiBaseUrl = () => {}, ge
|
|
|
9592
9597
|
case 'upload':
|
|
9593
9598
|
case 'videoUpload':
|
|
9594
9599
|
{
|
|
9595
|
-
const documentName = allValues
|
|
9600
|
+
const documentName = allValues === null || allValues === void 0 ? void 0 : allValues.map(item => item === null || item === void 0 ? void 0 : item.name).join(', ');
|
|
9596
9601
|
return documentName;
|
|
9597
9602
|
}
|
|
9598
9603
|
default:
|
|
@@ -9600,25 +9605,27 @@ const renderFieldData = (type, value, user, config, getApiBaseUrl = () => {}, ge
|
|
|
9600
9605
|
}
|
|
9601
9606
|
};
|
|
9602
9607
|
|
|
9603
|
-
const renderValue =
|
|
9604
|
-
|
|
9605
|
-
|
|
9606
|
-
|
|
9607
|
-
|
|
9608
|
-
|
|
9609
|
-
|
|
9610
|
-
|
|
9611
|
-
|
|
9612
|
-
|
|
9613
|
-
|
|
9614
|
-
|
|
9608
|
+
const renderValue = _ref => {
|
|
9609
|
+
let {
|
|
9610
|
+
value,
|
|
9611
|
+
hasChildren,
|
|
9612
|
+
config,
|
|
9613
|
+
user,
|
|
9614
|
+
getApiBaseUrl = () => {},
|
|
9615
|
+
getAppHeader = () => {},
|
|
9616
|
+
app,
|
|
9617
|
+
allData = {}
|
|
9618
|
+
} = _ref;
|
|
9619
|
+
if ((config === null || config === void 0 ? void 0 : config.type) === 'groupInputs') {
|
|
9620
|
+
if (!(config !== null && config !== void 0 && config.inputs)) return null;
|
|
9615
9621
|
const inputKeys = Object.keys(config.inputs).sort((a, b) => {
|
|
9616
|
-
|
|
9617
|
-
const
|
|
9622
|
+
var _config$inputs$a, _config$inputs$b;
|
|
9623
|
+
const positionA = ((_config$inputs$a = config.inputs[a]) === null || _config$inputs$a === void 0 ? void 0 : _config$inputs$a.position) || 0;
|
|
9624
|
+
const positionB = ((_config$inputs$b = config.inputs[b]) === null || _config$inputs$b === void 0 ? void 0 : _config$inputs$b.position) || 0;
|
|
9618
9625
|
return positionA - positionB;
|
|
9619
9626
|
});
|
|
9620
9627
|
const values = inputKeys.map(inputKey => {
|
|
9621
|
-
let inputValue = value
|
|
9628
|
+
let inputValue = value === null || value === void 0 ? void 0 : value[inputKey];
|
|
9622
9629
|
if (inputValue === null || inputValue === undefined || inputValue === '') {
|
|
9623
9630
|
return '';
|
|
9624
9631
|
} else if (typeof inputValue === 'object' && inputValue !== null) {
|
|
@@ -9659,8 +9666,8 @@ const renderValue = ({
|
|
|
9659
9666
|
} else {
|
|
9660
9667
|
displayValue = String(value);
|
|
9661
9668
|
}
|
|
9662
|
-
const fieldType = config
|
|
9663
|
-
let cssClass =
|
|
9669
|
+
const fieldType = (config === null || config === void 0 ? void 0 : config.type) || 'text';
|
|
9670
|
+
let cssClass = "tree-value ".concat(fieldType, "-type");
|
|
9664
9671
|
if (displayValue === '-') {
|
|
9665
9672
|
cssClass += ' empty';
|
|
9666
9673
|
}
|
|
@@ -9670,19 +9677,21 @@ const renderValue = ({
|
|
|
9670
9677
|
children: displayValue
|
|
9671
9678
|
});
|
|
9672
9679
|
};
|
|
9673
|
-
const determineHasChildren =
|
|
9674
|
-
|
|
9675
|
-
|
|
9676
|
-
|
|
9677
|
-
|
|
9680
|
+
const determineHasChildren = _ref2 => {
|
|
9681
|
+
var _config$meta;
|
|
9682
|
+
let {
|
|
9683
|
+
config,
|
|
9684
|
+
level
|
|
9685
|
+
} = _ref2;
|
|
9686
|
+
if ((config === null || config === void 0 ? void 0 : config.type) === 'groupInputs') {
|
|
9678
9687
|
return false;
|
|
9679
9688
|
}
|
|
9680
|
-
if (config
|
|
9689
|
+
if ((config === null || config === void 0 ? void 0 : config.type) === 'header' && config !== null && config !== void 0 && config.inputs && Object.keys(config.inputs).length > 0) {
|
|
9681
9690
|
return true;
|
|
9682
9691
|
}
|
|
9683
|
-
return config
|
|
9692
|
+
return (config === null || config === void 0 ? void 0 : config.inputs) || (config === null || config === void 0 ? void 0 : config.type) === 'group' || (config === null || config === void 0 ? void 0 : config.type) === 'dataLinkGroup' || (config === null || config === void 0 ? void 0 : config.type) === 'section' || (config === null || config === void 0 ? void 0 : config.type) === 'ajaxSubGroup' ||
|
|
9684
9693
|
// Add this line
|
|
9685
|
-
config
|
|
9694
|
+
(config === null || config === void 0 ? void 0 : config.type) === 'dataLink' && (config === null || config === void 0 || (_config$meta = config.meta) === null || _config$meta === void 0 ? void 0 : _config$meta.tableKeys) || level === 0 && config && typeof config === 'object' && Object.keys(config).some(key => key !== 'id' && key !== 'label' && key !== 'position' && key !== 'subTitle' && typeof config[key] === 'object' && config[key] !== null);
|
|
9686
9695
|
};
|
|
9687
9696
|
|
|
9688
9697
|
const sortByPosition = (items, getConfig) => {
|
|
@@ -9716,19 +9725,18 @@ const resolveDynamicLabel = (labelConfig, item, defaultLabel) => {
|
|
|
9716
9725
|
return labelConfig || defaultLabel;
|
|
9717
9726
|
};
|
|
9718
9727
|
|
|
9719
|
-
const handleSectionChildren =
|
|
9720
|
-
|
|
9721
|
-
|
|
9722
|
-
|
|
9723
|
-
|
|
9724
|
-
|
|
9725
|
-
|
|
9726
|
-
|
|
9727
|
-
|
|
9728
|
-
|
|
9729
|
-
|
|
9730
|
-
|
|
9731
|
-
} = _ref;
|
|
9728
|
+
const handleSectionChildren = ({
|
|
9729
|
+
config,
|
|
9730
|
+
allData,
|
|
9731
|
+
level,
|
|
9732
|
+
t,
|
|
9733
|
+
rootForm,
|
|
9734
|
+
user,
|
|
9735
|
+
getApiBaseUrl = () => {},
|
|
9736
|
+
getAppHeader = () => {},
|
|
9737
|
+
app,
|
|
9738
|
+
TreeNodeComponent
|
|
9739
|
+
}) => {
|
|
9732
9740
|
if (!(level === 0 && config && typeof config === 'object')) {
|
|
9733
9741
|
return null;
|
|
9734
9742
|
}
|
|
@@ -9742,14 +9750,14 @@ const handleSectionChildren = _ref => {
|
|
|
9742
9750
|
let fieldValue;
|
|
9743
9751
|
|
|
9744
9752
|
// Determine field value based on type
|
|
9745
|
-
if (fieldConfig.type === 'dataLinkGroup' && Array.isArray(allData
|
|
9753
|
+
if (fieldConfig.type === 'dataLinkGroup' && Array.isArray(allData?.[fieldKey])) {
|
|
9746
9754
|
fieldValue = allData[fieldKey];
|
|
9747
|
-
} else if (fieldConfig.type === 'dataLinkGroup' && allData
|
|
9755
|
+
} else if (fieldConfig.type === 'dataLinkGroup' && allData?.[fieldKey]) {
|
|
9748
9756
|
fieldValue = allData[fieldKey];
|
|
9749
9757
|
} else if (fieldConfig.type === 'group') {
|
|
9750
9758
|
fieldValue = {};
|
|
9751
9759
|
} else {
|
|
9752
|
-
fieldValue = allData
|
|
9760
|
+
fieldValue = allData?.[fieldKey];
|
|
9753
9761
|
}
|
|
9754
9762
|
return /*#__PURE__*/jsxRuntime.jsx(TreeNodeComponent, {
|
|
9755
9763
|
nodeKey: fieldKey,
|
|
@@ -9768,30 +9776,28 @@ const handleSectionChildren = _ref => {
|
|
|
9768
9776
|
});
|
|
9769
9777
|
};
|
|
9770
9778
|
|
|
9771
|
-
const handleArrayChildren =
|
|
9772
|
-
|
|
9773
|
-
|
|
9774
|
-
|
|
9775
|
-
|
|
9776
|
-
|
|
9777
|
-
|
|
9778
|
-
|
|
9779
|
-
|
|
9780
|
-
|
|
9781
|
-
|
|
9782
|
-
|
|
9783
|
-
|
|
9784
|
-
|
|
9785
|
-
} = _ref;
|
|
9779
|
+
const handleArrayChildren = ({
|
|
9780
|
+
value,
|
|
9781
|
+
config,
|
|
9782
|
+
label,
|
|
9783
|
+
level,
|
|
9784
|
+
t,
|
|
9785
|
+
rootForm,
|
|
9786
|
+
allData,
|
|
9787
|
+
user,
|
|
9788
|
+
getApiBaseUrl = () => {},
|
|
9789
|
+
getAppHeader = () => {},
|
|
9790
|
+
app,
|
|
9791
|
+
TreeNodeComponent
|
|
9792
|
+
}) => {
|
|
9786
9793
|
if (!Array.isArray(value)) {
|
|
9787
9794
|
return null;
|
|
9788
9795
|
}
|
|
9789
9796
|
return value.map((item, itemIndex) => /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
9790
9797
|
className: "array-item",
|
|
9791
9798
|
children: Object.keys(config.inputs).sort((a, b) => {
|
|
9792
|
-
|
|
9793
|
-
const
|
|
9794
|
-
const positionB = ((_config$inputs$b = config.inputs[b]) === null || _config$inputs$b === void 0 ? void 0 : _config$inputs$b.position) || 0;
|
|
9799
|
+
const positionA = config.inputs[a]?.position || 0;
|
|
9800
|
+
const positionB = config.inputs[b]?.position || 0;
|
|
9795
9801
|
return positionA - positionB;
|
|
9796
9802
|
}).map(subInputKey => {
|
|
9797
9803
|
const subInputConfig = config.inputs[subInputKey];
|
|
@@ -9809,9 +9815,9 @@ const handleArrayChildren = _ref => {
|
|
|
9809
9815
|
getApiBaseUrl: getApiBaseUrl,
|
|
9810
9816
|
getAppHeader: getAppHeader,
|
|
9811
9817
|
app: app
|
|
9812
|
-
},
|
|
9818
|
+
}, `${itemIndex}-${subInputKey}`);
|
|
9813
9819
|
})
|
|
9814
|
-
},
|
|
9820
|
+
}, `${itemIndex}`));
|
|
9815
9821
|
};
|
|
9816
9822
|
|
|
9817
9823
|
const noDafApps = ['tif', 'cukura']; //PACKAGE_CHANGE_LATER (remove sbg)
|
|
@@ -12459,8 +12465,6 @@ const Style$M = styled__default["default"].div`
|
|
|
12459
12465
|
width: 100%;
|
|
12460
12466
|
height: 472px;
|
|
12461
12467
|
|
|
12462
|
-
|
|
12463
|
-
|
|
12464
12468
|
.filter-cont {
|
|
12465
12469
|
position: absolute;
|
|
12466
12470
|
top: 24px;
|
|
@@ -12563,24 +12567,11 @@ const Style$M = styled__default["default"].div`
|
|
|
12563
12567
|
align-items: center;
|
|
12564
12568
|
}
|
|
12565
12569
|
|
|
12566
|
-
|
|
12567
|
-
|
|
12568
|
-
|
|
12569
|
-
|
|
12570
|
-
|
|
12571
|
-
|
|
12572
|
-
.animated-polyline {
|
|
12573
|
-
stroke-dasharray: 10 10;
|
|
12574
|
-
animation: dash-flow 1.5s linear infinite;
|
|
12575
|
-
stroke-linecap: round;
|
|
12576
|
-
}
|
|
12577
|
-
|
|
12578
|
-
@keyframes dash-flow {
|
|
12579
|
-
to {
|
|
12580
|
-
stroke-dashoffset: -20;
|
|
12581
|
-
}
|
|
12582
|
-
}
|
|
12583
|
-
|
|
12570
|
+
.marker-chain {
|
|
12571
|
+
display: flex;
|
|
12572
|
+
align-items: center;
|
|
12573
|
+
justify-content: center;
|
|
12574
|
+
}
|
|
12584
12575
|
|
|
12585
12576
|
}
|
|
12586
12577
|
|
|
@@ -13026,15 +13017,18 @@ const VILLAGE = "village";
|
|
|
13026
13017
|
const EXPORTER = "exporter";
|
|
13027
13018
|
const PROCESSOR = "mineralProcessor";
|
|
13028
13019
|
const DEPOT = "depot";
|
|
13029
|
-
const OPERATOR = "miningOperator";
|
|
13030
13020
|
const MAX_EXTRA_SMALL_ZOOM_THRESHOLD = 2;
|
|
13031
13021
|
const MAX_SMALL_ZOOM_THRESHOLD = 3;
|
|
13032
13022
|
const MAX_MEDIUM_ZOOM_THRESHOLD = 6;
|
|
13033
13023
|
const LOCATION_TYPES = [MINE_SITE, VILLAGE];
|
|
13034
|
-
const STAKEHOLDER_TYPES = [EXPORTER, PROCESSOR, DEPOT
|
|
13024
|
+
const STAKEHOLDER_TYPES = [EXPORTER, PROCESSOR, DEPOT];
|
|
13035
13025
|
const RADIUS_SMALL = 15;
|
|
13036
13026
|
const RADIUS_MEDIUM = 35;
|
|
13037
13027
|
const RADIUS_LARGE = 60;
|
|
13028
|
+
const RADIUS_CURVE_SMALL = 10;
|
|
13029
|
+
const RADIUS_CURVE_MEDIUM = 15;
|
|
13030
|
+
const RADIUS_CURVE_LARGE = 20;
|
|
13031
|
+
const TENSION = 0.2;
|
|
13038
13032
|
function isLocation(type) {
|
|
13039
13033
|
return LOCATION_TYPES.includes(type);
|
|
13040
13034
|
}
|
|
@@ -13091,6 +13085,7 @@ function getStakeholderPosition({
|
|
|
13091
13085
|
const isLarge = isLargeMarker(zoom);
|
|
13092
13086
|
let radius;
|
|
13093
13087
|
let center = {
|
|
13088
|
+
// NOT BEING USED FOR NOW AND MAYBE NEVER
|
|
13094
13089
|
left: 0,
|
|
13095
13090
|
top: 0
|
|
13096
13091
|
};
|
|
@@ -13114,25 +13109,6 @@ function getStakeholderPosition({
|
|
|
13114
13109
|
angleDeg
|
|
13115
13110
|
};
|
|
13116
13111
|
}
|
|
13117
|
-
function applyAnimationDirect(el, isShortLink) {
|
|
13118
|
-
if (!(el instanceof SVGElement) || isShortLink) return;
|
|
13119
|
-
el.style.strokeDasharray = "10, 10";
|
|
13120
|
-
el.style.strokeDashoffset = "0";
|
|
13121
|
-
el.style.animation = "dash-flow 1.2s linear infinite";
|
|
13122
|
-
el.classList.add('animated-polyline');
|
|
13123
|
-
}
|
|
13124
|
-
function removeAnimationFromElement(element) {
|
|
13125
|
-
if (!element) return;
|
|
13126
|
-
element.classList.remove('animated-polyline');
|
|
13127
|
-
element.style.animation = '';
|
|
13128
|
-
element.style.strokeDasharray = '';
|
|
13129
|
-
}
|
|
13130
|
-
function applyAnimationToPolyline(polyline, isShortLink) {
|
|
13131
|
-
const element = polyline.getElement();
|
|
13132
|
-
if (element) {
|
|
13133
|
-
applyAnimationDirect(element, isShortLink);
|
|
13134
|
-
}
|
|
13135
|
-
}
|
|
13136
13112
|
function createPolyline({
|
|
13137
13113
|
L,
|
|
13138
13114
|
startLatLng,
|
|
@@ -13142,48 +13118,110 @@ function createPolyline({
|
|
|
13142
13118
|
zoom,
|
|
13143
13119
|
listOfPolylines = [],
|
|
13144
13120
|
isFromStakeholder = false,
|
|
13145
|
-
isForceOpen = false
|
|
13146
|
-
stakeholderType = null,
|
|
13147
|
-
animated = false,
|
|
13148
|
-
mapRef
|
|
13121
|
+
isForceOpen = false
|
|
13149
13122
|
}) {
|
|
13150
|
-
const
|
|
13151
|
-
const
|
|
13152
|
-
const
|
|
13153
|
-
const lineCoordinates = [[startLatLng.lat, startLatLng.lng], [endLatLng.lat, endLatLng.lng]];
|
|
13154
|
-
const polylineStyle = {
|
|
13123
|
+
const width = isFromStakeholder && isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1.2;
|
|
13124
|
+
const coordinates = [[startLatLng.lat, startLatLng.lng], [endLatLng.lat, endLatLng.lng]];
|
|
13125
|
+
const style = {
|
|
13155
13126
|
color: "var(--base-gray-70)",
|
|
13156
|
-
weight:
|
|
13157
|
-
opacity:
|
|
13158
|
-
smoothFactor:
|
|
13127
|
+
weight: width,
|
|
13128
|
+
opacity: 0.5,
|
|
13129
|
+
smoothFactor: 1,
|
|
13159
13130
|
id,
|
|
13160
|
-
dashArray:
|
|
13161
|
-
renderer: L.svg()
|
|
13131
|
+
dashArray: !isSelected ? "5, 5" : "0, 0"
|
|
13162
13132
|
};
|
|
13163
|
-
const
|
|
13164
|
-
if (
|
|
13165
|
-
|
|
13166
|
-
|
|
13167
|
-
|
|
13168
|
-
|
|
13169
|
-
|
|
13170
|
-
applyAnimationToPolyline(existingPolyline, isShortLink);
|
|
13171
|
-
});
|
|
13172
|
-
applyAnimationToPolyline(existingPolyline, isShortLink);
|
|
13173
|
-
}
|
|
13174
|
-
return existingPolyline;
|
|
13175
|
-
}
|
|
13176
|
-
const newPolyline = L.polyline(lineCoordinates, polylineStyle);
|
|
13177
|
-
newPolyline.addTo(mapRef);
|
|
13178
|
-
listOfPolylines.push(newPolyline);
|
|
13179
|
-
if (shouldAnimate && isSelected) {
|
|
13180
|
-
newPolyline.once('add', () => {
|
|
13181
|
-
applyAnimationToPolyline(newPolyline, isShortLink);
|
|
13182
|
-
});
|
|
13183
|
-
applyAnimationToPolyline(newPolyline, isShortLink);
|
|
13133
|
+
const newPolyline = L.polyline(coordinates, style);
|
|
13134
|
+
if (listOfPolylines.find(p => p.options.id === id)) {
|
|
13135
|
+
const polylineToUpdateCoordinates = listOfPolylines.find(p => p.options.id === id);
|
|
13136
|
+
polylineToUpdateCoordinates.setLatLngs(coordinates);
|
|
13137
|
+
polylineToUpdateCoordinates.setStyle(style);
|
|
13138
|
+
} else {
|
|
13139
|
+
listOfPolylines.push(newPolyline);
|
|
13184
13140
|
}
|
|
13185
13141
|
return newPolyline;
|
|
13186
13142
|
}
|
|
13143
|
+
function createCurvePath({
|
|
13144
|
+
zoom,
|
|
13145
|
+
totalMarkers,
|
|
13146
|
+
markerIndex
|
|
13147
|
+
}) {
|
|
13148
|
+
const radius = getCurvePointRadius(zoom);
|
|
13149
|
+
const {
|
|
13150
|
+
x,
|
|
13151
|
+
y,
|
|
13152
|
+
angleDeg
|
|
13153
|
+
} = getAngleDeg(totalMarkers, markerIndex, radius);
|
|
13154
|
+
return {
|
|
13155
|
+
x,
|
|
13156
|
+
y,
|
|
13157
|
+
angleDeg
|
|
13158
|
+
};
|
|
13159
|
+
}
|
|
13160
|
+
function getCurvePointRadius(zoom) {
|
|
13161
|
+
const isSmall = isSmallMarker(zoom) || isExtraSmallMarker(zoom);
|
|
13162
|
+
const isMedium = isMediumMarker(zoom);
|
|
13163
|
+
if (isSmall) {
|
|
13164
|
+
return RADIUS_SMALL + RADIUS_CURVE_SMALL;
|
|
13165
|
+
} else if (isMedium) {
|
|
13166
|
+
return RADIUS_MEDIUM + RADIUS_CURVE_MEDIUM;
|
|
13167
|
+
} else {
|
|
13168
|
+
return RADIUS_LARGE + RADIUS_CURVE_LARGE;
|
|
13169
|
+
}
|
|
13170
|
+
}
|
|
13171
|
+
function buildSmoothCurve(layerPoints, mapRef) {
|
|
13172
|
+
const path = [];
|
|
13173
|
+
for (let i = 0; i < layerPoints.length - 1; i++) {
|
|
13174
|
+
const p0 = layerPoints[i];
|
|
13175
|
+
const p1 = layerPoints[i + 1];
|
|
13176
|
+
const pPrev = layerPoints[i - 1] || p0;
|
|
13177
|
+
const pNext = layerPoints[i + 2] || p1;
|
|
13178
|
+
const cp1 = L__namespace.point(p0.x + (p1.x - pPrev.x) * TENSION, p0.y + (p1.y - pPrev.y) * TENSION);
|
|
13179
|
+
const cp2 = L__namespace.point(p1.x - (pNext.x - p0.x) * TENSION, p1.y - (pNext.y - p0.y) * TENSION);
|
|
13180
|
+
if (i === 0) {
|
|
13181
|
+
path.push("M", [mapRef.layerPointToLatLng(p0).lat, mapRef.layerPointToLatLng(p0).lng]);
|
|
13182
|
+
}
|
|
13183
|
+
path.push("C", [mapRef.layerPointToLatLng(cp1).lat, mapRef.layerPointToLatLng(cp1).lng], [mapRef.layerPointToLatLng(cp2).lat, mapRef.layerPointToLatLng(cp2).lng], [mapRef.layerPointToLatLng(p1).lat, mapRef.layerPointToLatLng(p1).lng]);
|
|
13184
|
+
}
|
|
13185
|
+
return path;
|
|
13186
|
+
}
|
|
13187
|
+
function getSiblingCurveStrength(zoom) {
|
|
13188
|
+
if (isExtraSmallMarker(zoom)) return RADIUS_CURVE_SMALL / 2;
|
|
13189
|
+
if (isSmallMarker(zoom)) return RADIUS_CURVE_MEDIUM;
|
|
13190
|
+
if (isMediumMarker(zoom)) return RADIUS_CURVE_LARGE;
|
|
13191
|
+
return RADIUS_CURVE_LARGE;
|
|
13192
|
+
}
|
|
13193
|
+
function buildCurveWIthTwoSiblings({
|
|
13194
|
+
mapRef,
|
|
13195
|
+
startLatLng,
|
|
13196
|
+
endLatLng,
|
|
13197
|
+
zoom,
|
|
13198
|
+
isSelected,
|
|
13199
|
+
id
|
|
13200
|
+
}) {
|
|
13201
|
+
const fromPoint = mapRef.latLngToLayerPoint(startLatLng);
|
|
13202
|
+
const toPoint = mapRef.latLngToLayerPoint(endLatLng);
|
|
13203
|
+
const midX = (fromPoint.x + toPoint.x) / 2;
|
|
13204
|
+
const midY = (fromPoint.y + toPoint.y) / 2 + (isSmallMarker(zoom) ? RADIUS_CURVE_SMALL / 2 : 0);
|
|
13205
|
+
const dx = toPoint.x - fromPoint.x;
|
|
13206
|
+
const dy = toPoint.y - fromPoint.y;
|
|
13207
|
+
const normal = L__namespace.point(-dy, dx);
|
|
13208
|
+
const length = Math.sqrt(normal.x ** 2 + normal.y ** 2) || 1;
|
|
13209
|
+
const normalized = normal.multiplyBy(1 / length);
|
|
13210
|
+
const curveStrength = getSiblingCurveStrength(zoom);
|
|
13211
|
+
const controlPoint = L__namespace.point(midX, midY).add(normalized.multiplyBy(curveStrength));
|
|
13212
|
+
const latlngs = [startLatLng, mapRef.layerPointToLatLng(controlPoint), endLatLng];
|
|
13213
|
+
const layerPoints = latlngs.map(latlng => mapRef.latLngToLayerPoint(latlng));
|
|
13214
|
+
const path = buildSmoothCurve(layerPoints, mapRef);
|
|
13215
|
+
const curve = L__namespace.curve(path, {
|
|
13216
|
+
color: "var(--base-gray-70)",
|
|
13217
|
+
weight: isExtraSmallMarker(zoom) ? 0 : 1.2,
|
|
13218
|
+
opacity: 0.5,
|
|
13219
|
+
smoothFactor: 1,
|
|
13220
|
+
id,
|
|
13221
|
+
dashArray: !isSelected ? "5, 5" : "0, 0"
|
|
13222
|
+
});
|
|
13223
|
+
mapRef.addLayer(curve);
|
|
13224
|
+
}
|
|
13187
13225
|
|
|
13188
13226
|
const StakeholderMarker = styled__default["default"].div`
|
|
13189
13227
|
background-color: var(--blue-50);
|
|
@@ -13484,9 +13522,6 @@ function StakeholderIcon$1({
|
|
|
13484
13522
|
return null;
|
|
13485
13523
|
}, [parentId, allData]);
|
|
13486
13524
|
React.useEffect(() => {
|
|
13487
|
-
if (selectedMarkersId.length === 0 || !isSelected) {
|
|
13488
|
-
return;
|
|
13489
|
-
}
|
|
13490
13525
|
linkNodesData.map(node => {
|
|
13491
13526
|
const isConnectingToStakeholder = node.isStakeholder;
|
|
13492
13527
|
const id = `${data.datastakeId}-${node.stakeholderId || node.datastakeId}`;
|
|
@@ -13498,6 +13533,8 @@ function StakeholderIcon$1({
|
|
|
13498
13533
|
const stakeholderPoint = centerPoint.add(L__namespace.point(x, y));
|
|
13499
13534
|
const stakeholderLatLng = mapRef.layerPointToLatLng(stakeholderPoint);
|
|
13500
13535
|
let endLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
|
|
13536
|
+
const areNextToEachOther = targetMarkerIndex === index + 1 || targetMarkerIndex === index - 1 || index === 0 && targetMarkerIndex === node.totalStakeholders - 1 || targetMarkerIndex === 0 && index === node.totalStakeholders - 1;
|
|
13537
|
+
const areOnlyTwoSiblings = node.totalStakeholders === 2;
|
|
13501
13538
|
if (isExtraSmallMarker(zoom) && !isForceOpen) {
|
|
13502
13539
|
createPolyline({
|
|
13503
13540
|
L: L__namespace,
|
|
@@ -13507,8 +13544,7 @@ function StakeholderIcon$1({
|
|
|
13507
13544
|
zoom,
|
|
13508
13545
|
isSelected,
|
|
13509
13546
|
id,
|
|
13510
|
-
listOfPolylines: polylinesRef.current
|
|
13511
|
-
animated: true
|
|
13547
|
+
listOfPolylines: polylinesRef.current
|
|
13512
13548
|
});
|
|
13513
13549
|
return;
|
|
13514
13550
|
}
|
|
@@ -13526,8 +13562,61 @@ function StakeholderIcon$1({
|
|
|
13526
13562
|
const nodePoint = mapRef.latLngToLayerPoint(nodeLatLng);
|
|
13527
13563
|
const endPoint = L__namespace.point(x + nodePoint.x + center.left, y + nodePoint.y + center.top);
|
|
13528
13564
|
endLatLng = mapRef.layerPointToLatLng(endPoint);
|
|
13565
|
+
if (isSibling && (!areNextToEachOther || areOnlyTwoSiblings)) {
|
|
13566
|
+
if (areOnlyTwoSiblings) {
|
|
13567
|
+
buildCurveWIthTwoSiblings({
|
|
13568
|
+
mapRef,
|
|
13569
|
+
startLatLng: stakeholderLatLng,
|
|
13570
|
+
endLatLng,
|
|
13571
|
+
zoom,
|
|
13572
|
+
isSelected,
|
|
13573
|
+
id
|
|
13574
|
+
});
|
|
13575
|
+
return;
|
|
13576
|
+
}
|
|
13577
|
+
const total = node.totalStakeholders;
|
|
13578
|
+
let from = index;
|
|
13579
|
+
let to = targetMarkerIndex;
|
|
13580
|
+
let flip = false;
|
|
13581
|
+
const forwardDistance = (to - from + total) % total;
|
|
13582
|
+
const backwardDistance = (from - to + total) % total;
|
|
13583
|
+
if (backwardDistance < forwardDistance) {
|
|
13584
|
+
[from, to] = [to, from];
|
|
13585
|
+
flip = true;
|
|
13586
|
+
}
|
|
13587
|
+
const intermediateIndices = [];
|
|
13588
|
+
for (let i = 1; i < (to - from + total) % total; i++) {
|
|
13589
|
+
intermediateIndices.push((from + i) % total);
|
|
13590
|
+
}
|
|
13591
|
+
const indices = [from, ...intermediateIndices, to];
|
|
13592
|
+
const intermediatePoints = [];
|
|
13593
|
+
for (const i of indices) {
|
|
13594
|
+
const {
|
|
13595
|
+
x,
|
|
13596
|
+
y
|
|
13597
|
+
} = createCurvePath({
|
|
13598
|
+
zoom,
|
|
13599
|
+
totalMarkers: node.totalStakeholders,
|
|
13600
|
+
markerIndex: i
|
|
13601
|
+
});
|
|
13602
|
+
const point = centerPoint.add(L__namespace.point(x, y));
|
|
13603
|
+
const latlng = mapRef.layerPointToLatLng(point);
|
|
13604
|
+
intermediatePoints.push(latlng);
|
|
13605
|
+
}
|
|
13606
|
+
const latlngs = flip ? [endLatLng, ...intermediatePoints, stakeholderLatLng] : [stakeholderLatLng, ...intermediatePoints, endLatLng];
|
|
13607
|
+
const layerPoints = latlngs.map(latlng => mapRef.latLngToLayerPoint(latlng));
|
|
13608
|
+
const path = buildSmoothCurve(layerPoints, mapRef);
|
|
13609
|
+
const curve = L__namespace?.curve?.(path, {
|
|
13610
|
+
color: "var(--base-gray-70)",
|
|
13611
|
+
weight: isExtraSmallMarker(zoom) ? 0 : 1,
|
|
13612
|
+
opacity: isSelected ? 1 : 0.5,
|
|
13613
|
+
smoothFactor: 1,
|
|
13614
|
+
id
|
|
13615
|
+
});
|
|
13616
|
+
mapRef.addLayer(curve);
|
|
13617
|
+
return;
|
|
13618
|
+
}
|
|
13529
13619
|
}
|
|
13530
|
-
// Always use straight lines
|
|
13531
13620
|
createPolyline({
|
|
13532
13621
|
L: L__namespace,
|
|
13533
13622
|
mapRef,
|
|
@@ -13537,11 +13626,10 @@ function StakeholderIcon$1({
|
|
|
13537
13626
|
isFromStakeholder: false,
|
|
13538
13627
|
isSelected,
|
|
13539
13628
|
id,
|
|
13540
|
-
listOfPolylines: polylinesRef.current
|
|
13541
|
-
animated: true
|
|
13629
|
+
listOfPolylines: polylinesRef.current
|
|
13542
13630
|
});
|
|
13543
13631
|
});
|
|
13544
|
-
}, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen
|
|
13632
|
+
}, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen]);
|
|
13545
13633
|
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
13546
13634
|
children: /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
|
|
13547
13635
|
content: renderTooltipJsx({
|
|
@@ -13553,8 +13641,7 @@ function StakeholderIcon$1({
|
|
|
13553
13641
|
link,
|
|
13554
13642
|
onClickLink: () => {
|
|
13555
13643
|
onClickLink(data);
|
|
13556
|
-
}
|
|
13557
|
-
isNewTab: true
|
|
13644
|
+
}
|
|
13558
13645
|
}),
|
|
13559
13646
|
getPopupContainer: triggerNode => {
|
|
13560
13647
|
const mapElement = document.getElementById("map");
|
|
@@ -13609,8 +13696,6 @@ function LocationIcon({
|
|
|
13609
13696
|
const linkedNodesData = React.useMemo(() => {
|
|
13610
13697
|
const nodes = [];
|
|
13611
13698
|
const links = data.links || [];
|
|
13612
|
-
|
|
13613
|
-
// Add links from the location itself
|
|
13614
13699
|
links.forEach(link => {
|
|
13615
13700
|
allData.forEach(d => {
|
|
13616
13701
|
if (d.datastakeId === link) {
|
|
@@ -13630,45 +13715,8 @@ function LocationIcon({
|
|
|
13630
13715
|
}
|
|
13631
13716
|
});
|
|
13632
13717
|
});
|
|
13633
|
-
|
|
13634
|
-
// ADD: Also include links from this location's stakeholders
|
|
13635
|
-
const stakeholders = data.stakeholders || [];
|
|
13636
|
-
stakeholders.forEach(stakeholder => {
|
|
13637
|
-
const stakeholderLinks = stakeholder.links || [];
|
|
13638
|
-
stakeholderLinks.forEach(link => {
|
|
13639
|
-
allData.forEach(d => {
|
|
13640
|
-
// Check if it's a direct location link
|
|
13641
|
-
if (d.datastakeId === link) {
|
|
13642
|
-
// Avoid duplicates
|
|
13643
|
-
if (!nodes.find(n => n.datastakeId === link && !n.isStakeholder)) {
|
|
13644
|
-
nodes.push({
|
|
13645
|
-
...d,
|
|
13646
|
-
fromStakeholderId: stakeholder.datastakeId
|
|
13647
|
-
});
|
|
13648
|
-
}
|
|
13649
|
-
}
|
|
13650
|
-
// Check if it's a stakeholder link
|
|
13651
|
-
if (d.stakeholders && d.stakeholders.length > 0) {
|
|
13652
|
-
d.stakeholders.forEach(targetStakeholder => {
|
|
13653
|
-
if (targetStakeholder.datastakeId === link) {
|
|
13654
|
-
// Avoid duplicates
|
|
13655
|
-
if (!nodes.find(n => n.isStakeholder && n.datastakeId === d.datastakeId && n.stakeholdersIndex === d.stakeholders.indexOf(targetStakeholder))) {
|
|
13656
|
-
nodes.push({
|
|
13657
|
-
...d,
|
|
13658
|
-
isStakeholder: true,
|
|
13659
|
-
totalStakeholders: d.stakeholders.length,
|
|
13660
|
-
stakeholdersIndex: d.stakeholders.indexOf(targetStakeholder),
|
|
13661
|
-
fromStakeholderId: stakeholder.datastakeId
|
|
13662
|
-
});
|
|
13663
|
-
}
|
|
13664
|
-
}
|
|
13665
|
-
});
|
|
13666
|
-
}
|
|
13667
|
-
});
|
|
13668
|
-
});
|
|
13669
|
-
});
|
|
13670
13718
|
return nodes;
|
|
13671
|
-
}, [JSON.stringify(allData), JSON.stringify(data.links),
|
|
13719
|
+
}, [JSON.stringify(allData), JSON.stringify(data.links), zoom]);
|
|
13672
13720
|
const stakeholdersOfLocation = React.useMemo(() => {
|
|
13673
13721
|
return data?.stakeholders || [];
|
|
13674
13722
|
}, [data.stakeholders, zoom]);
|
|
@@ -13686,13 +13734,7 @@ function LocationIcon({
|
|
|
13686
13734
|
currentRoots.clear();
|
|
13687
13735
|
markersRef.current = [];
|
|
13688
13736
|
|
|
13689
|
-
//
|
|
13690
|
-
const shouldShowStakeholders = isSelected || stakeholdersOfLocation.some(stk => selectedMarkersId.includes(stk.datastakeId));
|
|
13691
|
-
if (!shouldShowStakeholders || selectedMarkersId.length === 0) {
|
|
13692
|
-
return;
|
|
13693
|
-
}
|
|
13694
|
-
|
|
13695
|
-
// Create new markers only when selected
|
|
13737
|
+
// Create new markers
|
|
13696
13738
|
stakeholdersOfLocation.forEach((stakeholder, index) => {
|
|
13697
13739
|
const markerId = `${stakeholder.datastakeId}`;
|
|
13698
13740
|
const {
|
|
@@ -13778,9 +13820,7 @@ function LocationIcon({
|
|
|
13778
13820
|
zoom,
|
|
13779
13821
|
isFromStakeholder: true,
|
|
13780
13822
|
isForceOpen,
|
|
13781
|
-
listOfPolylines: polylinesRef.current
|
|
13782
|
-
stakeholderType: stakeholder.type,
|
|
13783
|
-
animated: true
|
|
13823
|
+
listOfPolylines: polylinesRef.current
|
|
13784
13824
|
});
|
|
13785
13825
|
});
|
|
13786
13826
|
return () => {
|
|
@@ -13795,88 +13835,38 @@ function LocationIcon({
|
|
|
13795
13835
|
rootsMapRef.current.clear();
|
|
13796
13836
|
markersRef.current = [];
|
|
13797
13837
|
};
|
|
13798
|
-
}, [stakeholdersOfLocation, selectedMarkersId, activeMarker
|
|
13799
|
-
|
|
13800
|
-
|
|
13801
|
-
|
|
13802
|
-
|
|
13803
|
-
|
|
13804
|
-
|
|
13805
|
-
|
|
13806
|
-
|
|
13807
|
-
|
|
13808
|
-
|
|
13809
|
-
|
|
13810
|
-
}
|
|
13811
|
-
|
|
13812
|
-
// Filter linkedNodesData to only include nodes that are in the selected chain
|
|
13813
|
-
const relevantLinks = linkedNodesData.filter(node => {
|
|
13814
|
-
// Check if the target node (location) is in the selected markers
|
|
13815
|
-
const targetLocationInSelection = selectedMarkersId.includes(node.datastakeId);
|
|
13816
|
-
|
|
13817
|
-
// If connecting to a stakeholder, check if that stakeholder is selected
|
|
13818
|
-
if (node.isStakeholder) {
|
|
13819
|
-
const stakeholderInSelection = node.stakeholdersIndex !== undefined && selectedMarkersId.includes(node.datastakeId);
|
|
13820
|
-
return stakeholderInSelection;
|
|
13821
|
-
}
|
|
13822
|
-
return targetLocationInSelection;
|
|
13823
|
-
});
|
|
13824
|
-
relevantLinks.forEach(node => {
|
|
13825
|
-
const id = node.fromStakeholderId ? `${node.fromStakeholderId}-${node.datastakeId}` : `${data.datastakeId}-${node.datastakeId}`;
|
|
13826
|
-
const isConnectingToStakeholder = node.isStakeholder;
|
|
13827
|
-
|
|
13828
|
-
// If the link is from a stakeholder, start from the stakeholder position
|
|
13829
|
-
let startLatLng;
|
|
13830
|
-
if (node.fromStakeholderId) {
|
|
13831
|
-
// Find the stakeholder index in this location's stakeholders
|
|
13832
|
-
const stakeholderIndex = stakeholdersOfLocation.findIndex(s => s.datastakeId === node.fromStakeholderId);
|
|
13833
|
-
if (stakeholderIndex !== -1) {
|
|
13834
|
-
const {
|
|
13835
|
-
x,
|
|
13836
|
-
y
|
|
13837
|
-
} = getStakeholderPosition({
|
|
13838
|
-
zoom,
|
|
13839
|
-
totalMarkers: stakeholdersOfLocation.length,
|
|
13840
|
-
markerIndex: stakeholderIndex
|
|
13841
|
-
});
|
|
13842
|
-
const centerLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
|
|
13843
|
-
const centerPoint = mapRef.latLngToLayerPoint(centerLatLng);
|
|
13844
|
-
const stakeholderPoint = centerPoint.add(L__namespace.point(x, y));
|
|
13845
|
-
startLatLng = mapRef.layerPointToLatLng(stakeholderPoint);
|
|
13846
|
-
} else {
|
|
13847
|
-
startLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
|
|
13848
|
-
}
|
|
13849
|
-
} else {
|
|
13850
|
-
startLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
|
|
13851
|
-
}
|
|
13852
|
-
let endLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
|
|
13853
|
-
const isConnectingToStakeholderSelected = selectedMarkersId.includes(node.datastakeId);
|
|
13854
|
-
if (isConnectingToStakeholder && !isExtraSmallMarker(zoom)) {
|
|
13855
|
-
const {
|
|
13856
|
-
x,
|
|
13857
|
-
y
|
|
13858
|
-
} = getStakeholderPosition({
|
|
13859
|
-
zoom,
|
|
13860
|
-
totalMarkers: node.totalStakeholders,
|
|
13861
|
-
markerIndex: node.stakeholdersIndex
|
|
13862
|
-
});
|
|
13863
|
-
const nodeLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
|
|
13864
|
-
const nodePoint = mapRef.latLngToLayerPoint(nodeLatLng);
|
|
13865
|
-
const endPoint = L__namespace.point(x + nodePoint.x, y + nodePoint.y);
|
|
13866
|
-
endLatLng = mapRef.layerPointToLatLng(endPoint);
|
|
13867
|
-
}
|
|
13868
|
-
createPolyline({
|
|
13869
|
-
L: L__namespace,
|
|
13870
|
-
mapRef,
|
|
13871
|
-
startLatLng,
|
|
13872
|
-
endLatLng,
|
|
13873
|
-
isSelected: isConnectingToStakeholderSelected,
|
|
13874
|
-
id,
|
|
13838
|
+
}, [stakeholdersOfLocation, selectedMarkersId, activeMarker]);
|
|
13839
|
+
linkedNodesData.map(node => {
|
|
13840
|
+
const id = `${data.datastakeId}-${node.datastakeId}`;
|
|
13841
|
+
const isConnectingToStakeholder = node.isStakeholder;
|
|
13842
|
+
const centerLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
|
|
13843
|
+
let endLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
|
|
13844
|
+
const isConnectingToStakeholderSelected = selectedMarkersId.includes(node.datastakeId);
|
|
13845
|
+
if (isConnectingToStakeholder && !isExtraSmallMarker(zoom)) {
|
|
13846
|
+
const {
|
|
13847
|
+
x,
|
|
13848
|
+
y
|
|
13849
|
+
} = getStakeholderPosition({
|
|
13875
13850
|
zoom,
|
|
13876
|
-
|
|
13877
|
-
|
|
13851
|
+
totalMarkers: node.totalStakeholders,
|
|
13852
|
+
markerIndex: node.stakeholdersIndex
|
|
13853
|
+
});
|
|
13854
|
+
const nodeLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
|
|
13855
|
+
const nodePoint = mapRef.latLngToLayerPoint(nodeLatLng);
|
|
13856
|
+
const endPoint = L__namespace.point(x + nodePoint.x, y + nodePoint.y);
|
|
13857
|
+
endLatLng = mapRef.layerPointToLatLng(endPoint);
|
|
13858
|
+
}
|
|
13859
|
+
createPolyline({
|
|
13860
|
+
L: L__namespace,
|
|
13861
|
+
mapRef,
|
|
13862
|
+
startLatLng: centerLatLng,
|
|
13863
|
+
endLatLng,
|
|
13864
|
+
isSelected: isConnectingToStakeholderSelected,
|
|
13865
|
+
id,
|
|
13866
|
+
zoom,
|
|
13867
|
+
listOfPolylines: polylinesRef.current
|
|
13878
13868
|
});
|
|
13879
|
-
}
|
|
13869
|
+
});
|
|
13880
13870
|
return /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
|
|
13881
13871
|
content: renderTooltipJsx({
|
|
13882
13872
|
title: data.name,
|
|
@@ -14392,8 +14382,7 @@ function useMapHelper$1({
|
|
|
14392
14382
|
link: link,
|
|
14393
14383
|
onClickLink: onClickLink,
|
|
14394
14384
|
activeStakeholder: activeStakeholder,
|
|
14395
|
-
setActiveStakeholder: setActiveStakeholder
|
|
14396
|
-
mapRef: mapRef
|
|
14385
|
+
setActiveStakeholder: setActiveStakeholder
|
|
14397
14386
|
}));
|
|
14398
14387
|
roots.current.push(root);
|
|
14399
14388
|
} else if (type === "location") {
|
|
@@ -14598,8 +14587,7 @@ const useMap$1 = ({
|
|
|
14598
14587
|
MAP_TOKEN
|
|
14599
14588
|
} = useMapConfig({
|
|
14600
14589
|
app,
|
|
14601
|
-
isSatellite
|
|
14602
|
-
mapRef: container
|
|
14590
|
+
isSatellite
|
|
14603
14591
|
});
|
|
14604
14592
|
const [initialMarkerSetIsDone, setInitialMarkerSetIsDone] = React.useState(false);
|
|
14605
14593
|
const [mapCenter, setMapCenter] = React.useState([0, 0]);
|
|
@@ -14616,8 +14604,6 @@ const useMap$1 = ({
|
|
|
14616
14604
|
const graph = new Map();
|
|
14617
14605
|
const stakeToLoc = new Map();
|
|
14618
14606
|
const nodeTypes = new Map();
|
|
14619
|
-
|
|
14620
|
-
// Build the graph
|
|
14621
14607
|
for (const loc of data) {
|
|
14622
14608
|
const locId = loc.datastakeId;
|
|
14623
14609
|
nodeTypes.set(locId, loc.type);
|
|
@@ -14642,45 +14628,26 @@ const useMap$1 = ({
|
|
|
14642
14628
|
}
|
|
14643
14629
|
}
|
|
14644
14630
|
const highlightTable = {};
|
|
14645
|
-
|
|
14646
|
-
// Perform BFS/DFS to find all connected nodes in the entire chain
|
|
14647
14631
|
for (const [node] of graph) {
|
|
14648
14632
|
const highlighted = new Set();
|
|
14649
|
-
|
|
14650
|
-
const
|
|
14651
|
-
|
|
14652
|
-
const
|
|
14653
|
-
highlighted.add(
|
|
14654
|
-
|
|
14655
|
-
|
|
14656
|
-
const
|
|
14657
|
-
if (
|
|
14658
|
-
const
|
|
14659
|
-
if (
|
|
14660
|
-
highlighted.add(parentLoc);
|
|
14661
|
-
visited.add(parentLoc);
|
|
14662
|
-
queue.push(parentLoc);
|
|
14663
|
-
}
|
|
14664
|
-
}
|
|
14665
|
-
|
|
14666
|
-
// Traverse all neighbors
|
|
14667
|
-
for (const neighbor of graph.get(current) || []) {
|
|
14668
|
-
if (!visited.has(neighbor)) {
|
|
14669
|
-
visited.add(neighbor);
|
|
14670
|
-
queue.push(neighbor);
|
|
14633
|
+
highlighted.add(node);
|
|
14634
|
+
const nodeIsStakeholder = !isLocation(nodeTypes.get(node));
|
|
14635
|
+
if (nodeIsStakeholder && stakeToLoc.has(node)) {
|
|
14636
|
+
const parentLoc = stakeToLoc.get(node);
|
|
14637
|
+
highlighted.add(parentLoc);
|
|
14638
|
+
}
|
|
14639
|
+
for (const neighbor of graph.get(node) || []) {
|
|
14640
|
+
const neighborIsStakeholder = !isLocation(nodeTypes.get(neighbor));
|
|
14641
|
+
if (neighborIsStakeholder && stakeToLoc.has(neighbor)) {
|
|
14642
|
+
const neighborParent = stakeToLoc.get(neighbor);
|
|
14643
|
+
if (isLocation(nodeTypes.get(node)) && neighborParent === node || nodeIsStakeholder && stakeToLoc.get(node) === neighborParent) {
|
|
14671
14644
|
highlighted.add(neighbor);
|
|
14672
|
-
|
|
14673
|
-
|
|
14674
|
-
|
|
14675
|
-
if (neighborIsStakeholder && stakeToLoc.has(neighbor)) {
|
|
14676
|
-
const neighborParent = stakeToLoc.get(neighbor);
|
|
14677
|
-
if (!visited.has(neighborParent)) {
|
|
14678
|
-
highlighted.add(neighborParent);
|
|
14679
|
-
visited.add(neighborParent);
|
|
14680
|
-
queue.push(neighborParent);
|
|
14681
|
-
}
|
|
14682
|
-
}
|
|
14645
|
+
} else {
|
|
14646
|
+
highlighted.add(neighbor);
|
|
14647
|
+
highlighted.add(neighborParent);
|
|
14683
14648
|
}
|
|
14649
|
+
} else {
|
|
14650
|
+
highlighted.add(neighbor);
|
|
14684
14651
|
}
|
|
14685
14652
|
}
|
|
14686
14653
|
highlightTable[node] = [...highlighted];
|
|
@@ -14718,20 +14685,10 @@ const useMap$1 = ({
|
|
|
14718
14685
|
function handleSelectMarker(clickedMarker) {
|
|
14719
14686
|
setSelectedMarkersId(prev => {
|
|
14720
14687
|
if (prev.includes(clickedMarker.datastakeId)) {
|
|
14721
|
-
// Deselecting - clear polylines
|
|
14722
14688
|
openPopupIdRef.current = null;
|
|
14723
14689
|
setMarkerWithPopup(null);
|
|
14724
14690
|
return [];
|
|
14725
14691
|
} else {
|
|
14726
|
-
// CLEAR OLD POLYLINES BEFORE SELECTING NEW MARKER
|
|
14727
|
-
if (polylinesRef.current.length > 0) {
|
|
14728
|
-
polylinesRef.current.forEach(polyline => {
|
|
14729
|
-
if (mapRef.hasLayer(polyline)) {
|
|
14730
|
-
mapRef.removeLayer(polyline);
|
|
14731
|
-
}
|
|
14732
|
-
});
|
|
14733
|
-
polylinesRef.current = [];
|
|
14734
|
-
}
|
|
14735
14692
|
setMarkerWithPopup(isStakeholder(clickedMarker.type) ? clickedMarker : null);
|
|
14736
14693
|
const newSelectedMarkersId = highlightTable[clickedMarker.datastakeId];
|
|
14737
14694
|
openPopupIdRef.current = clickedMarker.datastakeId;
|
|
@@ -14755,29 +14712,19 @@ const useMap$1 = ({
|
|
|
14755
14712
|
});
|
|
14756
14713
|
}
|
|
14757
14714
|
}
|
|
14758
|
-
if (type === "chain" && selectedMarkersId.length === 0) {
|
|
14759
|
-
if (polylinesRef.current.length) {
|
|
14760
|
-
polylinesRef.current.forEach(polyline => {
|
|
14761
|
-
if (mapRef.hasLayer(polyline)) {
|
|
14762
|
-
mapRef.removeLayer(polyline);
|
|
14763
|
-
}
|
|
14764
|
-
});
|
|
14765
|
-
polylinesRef.current = [];
|
|
14766
|
-
}
|
|
14767
|
-
}
|
|
14768
14715
|
clearMapMarkers();
|
|
14769
14716
|
if (data) {
|
|
14770
|
-
|
|
14717
|
+
// Filters out locations that are not connected to any stakeholders
|
|
14718
|
+
const excludedType = ['village', 'town', 'area', 'territory'];
|
|
14719
|
+
const filteredData = data?.filter(obj => !excludedType.includes(obj?.type) && (obj?.stakeholders?.length > 0 || data.some(other => other.datastakeId !== obj.datastakeId && (other.stakeholders || []).some(stk => (stk.links || []).includes(obj.datastakeId)))));
|
|
14771
14720
|
const maxTotal = Math.max(...(data || []).map(d => d.total));
|
|
14772
14721
|
const dataToRender = type === "chain" ? filteredData : data;
|
|
14773
14722
|
dataToRender.forEach((d, i) => {
|
|
14774
14723
|
addIconToMapInitialy([d?.marker?.lat, d?.marker?.lng], "location", d.category || "mineSite", d, maxTotal, i);
|
|
14775
14724
|
});
|
|
14776
|
-
|
|
14777
|
-
|
|
14778
|
-
|
|
14779
|
-
});
|
|
14780
|
-
}
|
|
14725
|
+
polylinesRef.current.forEach(polyline => {
|
|
14726
|
+
mapRef.addLayer(polyline);
|
|
14727
|
+
});
|
|
14781
14728
|
mapRef.invalidateSize();
|
|
14782
14729
|
mapRef.fire("moveend");
|
|
14783
14730
|
}
|