datastake-daf 0.6.263 → 0.6.265

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.263",
+	"version": "0.6.265",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -15,7 +15,7 @@
 		"buffer": "^6.0.3",
 		"countries-list": "^2.6.1",
 		"country-city-location": "^1.0.13",
-		"datastake-daf": "0.6.184",
+		"datastake-daf": "^0.6.263",
 		"dayjs": "^1.11.12",
 		"deepmerge": "^4.3.1",
 		"dot-object": "^2.1.5",

package/src/@daf/core/components/Dashboard/Map/helper.js

@@ -20,6 +20,7 @@ export function useMapHelper({
 	mapCenter,
 	allData,
 	renderTooltip,
+	renderTooltipTags,
 	onClickLink,
 	link,
 	tooltipAsText,
@@ -158,6 +159,7 @@ export function useMapHelper({
 								title: data.name,
 								subTitle: data.type,
 								items: renderTooltip({ ...data, totals }),
+								tags: renderTooltipTags(data),
 								link,
 								total: data.sources,
 								onClickLink: () => onClickLink(data),
@@ -194,6 +196,7 @@ export function useMapHelper({
 							{renderTooltipHtml({
 								title: data.name,
 								items: renderTooltip(data),
+								tags: renderTooltipTags(data),
 								link,
 								total: data.sources,
 								onClickLink: () => onClickLink(data),
@@ -230,6 +233,7 @@ export function useMapHelper({
 							data={data}
 							title={data.name}
 							renderTooltip={renderTooltip}
+							renderTooltipTags={renderTooltipTags}
 							link={link}
 							onClickLink={onClickLink}
 							activeStakeholder={activeStakeholder}
@@ -270,6 +274,7 @@ export function useMapHelper({
 								link,
 								onClickLink: () => onClickLink(data),
 								items: renderTooltip(data),
+								tags: renderTooltipTags(data),
 							})}
 						</>,
 					);
@@ -336,6 +341,7 @@ export function useMapHelper({
 								link,
 								onClickLink: () => onClickLink(data),
 								items: renderTooltip(data),
+								tags: renderTooltipTags(data),
 							})}
 						</>,
 					);
@@ -370,6 +376,7 @@ export function useMapHelper({
 		[
 			mapRef,
 			renderTooltip,
+			renderTooltipTags,
 			tooltipAsText,
 			onClickLink,
 			zoom,

package/src/@daf/core/components/Dashboard/Map/hook.js

@@ -18,6 +18,7 @@ export const useMap = ({
 	polygon,
 	app,
 	renderTooltip,
+	renderTooltipTags,
 	mapConfig,
 	tooltipAsText,
 	renderMarker,
@@ -136,6 +137,7 @@ export const useMap = ({
 		allData,
 		mapCenter,
 		renderTooltip,
+		renderTooltipTags,
 		onClickLink,
 		link,
 		tooltipAsText,

package/src/@daf/core/components/Dashboard/Map/index.jsx

@@ -92,180 +92,174 @@ import Filters from "../../Filters/FloatingFilters/index.js";
  */
 
 function Map({
-  isPdf = false,
-  data = [],
-  user = null,
-  app = "sbg",
-  polygon = null,
-  t = (s) => s,
-  onClickLink = () => {},
-  link,
-  siderTitle = "Mine Description",
-  renderTooltip = () => [],
-  mapConfig = {},
-  emptyDescriptionText = "No description provided",
-  tooltipAsText = false,
-  primaryLink = false,
-  renderSider = null,
-  renderMarker = null,
-  type = "default",
-  showSider = true,
-  filtersConfig,
-  onFilterChange = () => {},
-  isSatellite = false,
-  nameAsSiderTitle = false,
+	isPdf = false,
+	data = [],
+	user = null,
+	app = "sbg",
+	polygon = null,
+	t = (s) => s,
+	onClickLink = () => {},
+	link,
+	siderTitle = "Mine Description",
+	renderTooltip = () => [],
+	renderTooltipTags = () => {},
+	mapConfig = {},
+	emptyDescriptionText = "No description provided",
+	tooltipAsText = false,
+	primaryLink = false,
+	renderSider = null,
+	renderMarker = null,
+	type = "default",
+	showSider = true,
+	filtersConfig,
+	onFilterChange = () => {},
+	isSatellite = false,
+	nameAsSiderTitle = false,
 }) {
-  // Map data to include marker coordinates
-  const mappedData = useMemo(
-    () =>
-      data.map((d) => ({
-        ...d,
-        marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
-      })),
-    [data]
-  );
+	// Map data to include marker coordinates
+	const mappedData = useMemo(
+		() =>
+			data.map((d) => ({
+				...d,
+				marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
+			})),
+		[data],
+	);
 
-  // Use custom hook to configure map functionality
-  const { container, activeMarker, mapOptionsButtonsConfig } = useMap({
-    data: mappedData,
-    user,
-    polygon,
-    t,
-    app,
-    renderTooltip,
-    onClickLink,
-    link,
-    mapConfig,
-    tooltipAsText,
-    renderMarker,
-    type,
-    isSatellite,
-  });
+	// Use custom hook to configure map functionality
+	const { container, activeMarker, mapOptionsButtonsConfig } = useMap({
+		data: mappedData,
+		user,
+		polygon,
+		t,
+		app,
+		renderTooltip,
+    renderTooltipTags,
+		onClickLink,
+		link,
+		mapConfig,
+		tooltipAsText,
+		renderMarker,
+		type,
+		isSatellite,
+	});
 
-  return (
-    <ComponentWithFocus>
-      <Style
-        className={formatClassname([showSider && activeMarker && "with-sider"])}
-      >
-        {filtersConfig ? (
-          <Filters
-            t={t}
-            filtersConfig={filtersConfig}
-            onFilterChange={onFilterChange}
-          />
-        ) : null}
+	return (
+		<ComponentWithFocus>
+			<Style className={formatClassname([showSider && activeMarker && "with-sider"])}>
+				{filtersConfig ? (
+					<Filters t={t} filtersConfig={filtersConfig} onFilterChange={onFilterChange} />
+				) : null}
 
-        {/* Map container */}
-        <div
-          id="map"
-          className={tooltipAsText ? "tooltip-text" : "tooltip-daf"}
-          ref={container}
-        />
-        {/* Control buttons */}
-        {isPdf ? null : (
-          <div className="map-control-buttons">
-            {mapOptionsButtonsConfig.map((c, i) => (
-              <button onClick={c.handler} key={i.toString()}>
-                {c.icon}
-              </button>
-            ))}
-          </div>
-        )}
-        {/* Sidebar for active marker */}
-        {activeMarker && showSider ? (
-          <div className="sider">
-            <div className="sider-header flex">
-              <div className="flex flex-column justify-center">
-                <h2>
-                  {nameAsSiderTitle ? activeMarker.data.name : t(siderTitle)}
-                </h2>
-              </div>
-              <div className="flex flex-column justify-center">
-                <Button
-                  type={primaryLink ? "primary" : "default"}
-                  size="sm"
-                  onClick={() => onClickLink(activeMarker.data)}
-                >
-                  <CustomIcon
-                    name="ArrowUpRight"
-                    width={20}
-                    height={20}
-                    color={primaryLink ? "white" : "#6C737F"}
-                  />
-                </Button>
-              </div>
-            </div>
+				{/* Map container */}
+				<div
+					id="map"
+					className={tooltipAsText ? "tooltip-text" : "tooltip-daf"}
+					ref={container}
+				/>
+				{/* Control buttons */}
+				{isPdf ? null : (
+					<div className="map-control-buttons">
+						{mapOptionsButtonsConfig.map((c, i) => (
+							<button onClick={c.handler} key={i.toString()}>
+								{c.icon}
+							</button>
+						))}
+					</div>
+				)}
+				{/* Sidebar for active marker */}
+				{activeMarker && showSider ? (
+					<div className="sider">
+						<div className="sider-header flex">
+							<div className="flex flex-column justify-center">
+								<h2>{nameAsSiderTitle ? activeMarker.data.name : t(siderTitle)}</h2>
+							</div>
+							<div className="flex flex-column justify-center">
+								<Button
+									type={primaryLink ? "primary" : "default"}
+									size="sm"
+									onClick={() => onClickLink(activeMarker.data)}
+								>
+									<CustomIcon
+										name="ArrowUpRight"
+										width={20}
+										height={20}
+										color={primaryLink ? "white" : "#6C737F"}
+									/>
+								</Button>
+							</div>
+						</div>
 
-            {/* Render custom sider or default content */}
-            {typeof renderSider === "function" ? (
-              <div className="sider-body">{renderSider(activeMarker)}</div>
-            ) : (
-              <div className="sider-body">
-                {/* Documents Carousel */}
-                {activeMarker?.data?.documents?.length ? (
-                  <Carousel className="carousel">
-                    {activeMarker.data.documents.map((v, i) => (
-                      <div key={i}>
-                        <Image height={169} width="100%" src={v.url} />
-                      </div>
-                    ))}
-                  </Carousel>
-                ) : (
-                  <div className="placeholder flex justify-center">
-                    <div className="flex flex-column justify-center">
-                      <svg
-                        width="106"
-                        height="94"
-                        viewBox="0 0 106 94"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M88.0001 92.165H93.0519C97.9078 92.165 100.336 92.165 101.674 91.1525C102.84 90.2705 103.561 88.9224 103.649 87.463C103.749 85.7878 102.402 83.7676 99.7083 79.7274L84.6565 57.1496C82.4309 53.8111 81.318 52.1419 79.9154 51.5603C78.6892 51.0517 77.311 51.0517 76.0847 51.5603C74.6821 52.1419 73.5693 53.8111 71.3437 57.1496L67.6227 62.731M88.0001 92.165L49.5776 36.6659C47.3679 33.4741 46.2631 31.8782 44.883 31.3172C43.6757 30.8264 42.3245 30.8264 41.1172 31.3172C39.7371 31.8782 38.6323 33.4741 36.4225 36.6659L6.69109 79.6113C3.87596 83.6776 2.46839 85.7108 2.54853 87.4017C2.61832 88.8743 3.33442 90.241 4.50545 91.1366C5.8501 92.165 8.32294 92.165 13.2686 92.165H88.0001ZM98.0001 17.165C98.0001 25.4492 91.2843 32.165 83.0001 32.165C74.7158 32.165 68.0001 25.4492 68.0001 17.165C68.0001 8.88071 74.7158 2.16498 83.0001 2.16498C91.2843 2.16498 98.0001 8.88071 98.0001 17.165Z"
-                          stroke="#F3F4F6"
-                          strokeWidth="3.5"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                )}
+						{/* Render custom sider or default content */}
+						{typeof renderSider === "function" ? (
+							<div className="sider-body">{renderSider(activeMarker)}</div>
+						) : (
+							<div className="sider-body">
+								{/* Documents Carousel */}
+								{activeMarker?.data?.documents?.length ? (
+									<Carousel className="carousel">
+										{activeMarker.data.documents.map((v, i) => (
+											<div key={i}>
+												<Image height={169} width="100%" src={v.url} />
+											</div>
+										))}
+									</Carousel>
+								) : (
+									<div className="placeholder flex justify-center">
+										<div className="flex flex-column justify-center">
+											<svg
+												width="106"
+												height="94"
+												viewBox="0 0 106 94"
+												fill="none"
+												xmlns="http://www.w3.org/2000/svg"
+											>
+												<path
+													d="M88.0001 92.165H93.0519C97.9078 92.165 100.336 92.165 101.674 91.1525C102.84 90.2705 103.561 88.9224 103.649 87.463C103.749 85.7878 102.402 83.7676 99.7083 79.7274L84.6565 57.1496C82.4309 53.8111 81.318 52.1419 79.9154 51.5603C78.6892 51.0517 77.311 51.0517 76.0847 51.5603C74.6821 52.1419 73.5693 53.8111 71.3437 57.1496L67.6227 62.731M88.0001 92.165L49.5776 36.6659C47.3679 33.4741 46.2631 31.8782 44.883 31.3172C43.6757 30.8264 42.3245 30.8264 41.1172 31.3172C39.7371 31.8782 38.6323 33.4741 36.4225 36.6659L6.69109 79.6113C3.87596 83.6776 2.46839 85.7108 2.54853 87.4017C2.61832 88.8743 3.33442 90.241 4.50545 91.1366C5.8501 92.165 8.32294 92.165 13.2686 92.165H88.0001ZM98.0001 17.165C98.0001 25.4492 91.2843 32.165 83.0001 32.165C74.7158 32.165 68.0001 25.4492 68.0001 17.165C68.0001 8.88071 74.7158 2.16498 83.0001 2.16498C91.2843 2.16498 98.0001 8.88071 98.0001 17.165Z"
+													stroke="#F3F4F6"
+													strokeWidth="3.5"
+													strokeLinecap="round"
+													strokeLinejoin="round"
+												/>
+											</svg>
+										</div>
+									</div>
+								)}
 
-                <div className="p-cont">
-                  <p className="mt-4">
-                    {activeMarker?.data?.description || t(emptyDescriptionText)}
-                  </p>
-                </div>
-              </div>
-            )}
-          </div>
-        ) : null}
-      </Style>
-    </ComponentWithFocus>
-  );
+								<div className="p-cont">
+									<p className="mt-4">
+										{activeMarker?.data?.description || t(emptyDescriptionText)}
+									</p>
+								</div>
+							</div>
+						)}
+					</div>
+				) : null}
+			</Style>
+		</ComponentWithFocus>
+	);
 }
 
 Map.propTypes = {
-  data: PropTypes.object,
-  user: PropTypes.any,
-  app: PropTypes.string,
-  polygon: PropTypes.any,
-  t: PropTypes.func,
-  onClickLink: PropTypes.func,
-  siderTitle: PropTypes.string,
-  emptyDescriptionText: PropTypes.string,
-  isPdf: PropTypes.any,
-  mapConfig: PropTypes.any,
-  tooltipAsText: PropTypes.any,
-  primaryLink: PropTypes.any,
-  renderSider: PropTypes.any,
-  renderMarker: PropTypes.any,
-  type: PropTypes.any,
-  showSider: PropTypes.any,
-  filtersConfig: PropTypes.any,
-  onFilterChange: PropTypes.any,
-  nameAsSiderTitle: PropTypes.bool,
+	data: PropTypes.object,
+	user: PropTypes.any,
+	app: PropTypes.string,
+	polygon: PropTypes.any,
+	t: PropTypes.func,
+	onClickLink: PropTypes.func,
+	siderTitle: PropTypes.string,
+	emptyDescriptionText: PropTypes.string,
+	isPdf: PropTypes.any,
+	mapConfig: PropTypes.any,
+	tooltipAsText: PropTypes.any,
+	primaryLink: PropTypes.any,
+	renderSider: PropTypes.any,
+	renderMarker: PropTypes.any,
+	type: PropTypes.any,
+	showSider: PropTypes.any,
+	filtersConfig: PropTypes.any,
+	onFilterChange: PropTypes.any,
+	nameAsSiderTitle: PropTypes.bool,
 };
 
 export default Map;

package/src/@daf/core/components/Dashboard/Map/storyConfig3.js

@@ -111,4 +111,10 @@ export const storyConfig = {
 			},
 		];
 	},
+	renderTooltipTags: () => {
+		return {
+			label: "Species",
+			items: [{ label: "Label 1", color: "red" }, { label: "Label 6" }],
+		};
+	},
 };

package/src/@daf/core/components/EditForm/components/ajaxSelect.js

@@ -71,7 +71,7 @@ export function AjaxSelectMain({
 	const [isFetchWithThisFilter, setIsFetchWithThisFilter] = useState(false);
 	const url = getApiBaseUrl();
 
-	const queryOptionsApps = ["kota", "nashiriki", "straatos"];
+	const queryOptionsApps = ["kota", "nashiriki", "straatos" ];
 	const queryOptionsAppEndpoints = {
 		kota: `query/options`,
 		nashiriki: "query",