datastake-daf 0.6.180 → 0.6.182

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.180",
+	"version": "0.6.182",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -8,6 +8,7 @@ import CustomIcon from "../../Icon/CustomIcon.jsx";
 import ComponentWithFocus from "../ComponentWithFocus/index.jsx";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 import Filters from "../../Filters/FloatingFilters/index.js";
+import { useResizeContext } from "../../../context/Resize/index.js";
 
 /**
  * Globe Component
@@ -129,6 +130,9 @@ function Globe({
 		[data],
 	);
 
+	// Get resize context for sidebar state
+	const { isCollapsed } = useResizeContext();
+
 	// Use custom hook to configure globe functionality
 	const { container, activeMarker, mapOptionsButtonsConfig, forceResize } = useGlobe({
 		data: mappedData,
@@ -171,9 +175,24 @@ function Globe({
 		}
 	}, [forceResize]);
 
+	// Force resize when sidebar state changes
+	useEffect(() => {
+		if (forceResize) {
+			// Trigger resize when sidebar collapses/expands
+			const timer = setTimeout(() => {
+				forceResize();
+			}, 100);
+
+			return () => clearTimeout(timer);
+		}
+	}, [isCollapsed, forceResize]);
+
 	return (
 		<ComponentWithFocus>
-			<Style className={formatClassname([showSider && activeMarker && "with-sider"])}>
+			<Style className={formatClassname([
+				showSider && activeMarker && "with-sider",
+				isCollapsed ? "sidebar-collapsed" : "sidebar-expanded"
+			])}>
 				{filtersConfig ? (
 					<Filters t={t} filtersConfig={filtersConfig} onFilterChange={onFilterChange} />
 				) : null}

package/src/@daf/core/components/Dashboard/Globe/style.js

@@ -7,6 +7,7 @@ const Style = styled.div`
   width: 100%;
   height: 472px;
   min-height: 300px;
+  flex: 1;
   
   @media (max-width: 768px) {
     height: 350px;
@@ -17,6 +18,13 @@ const Style = styled.div`
     height: 300px;
     min-height: 200px;
   }
+  
+  /* Responsive height adjustments for sidebar state changes */
+  @media (min-width: 769px) {
+    height: calc(100vh - 200px);
+    min-height: 400px;
+    max-height: 600px;
+  }
 
   .filter-cont {
     position: absolute; 
@@ -107,6 +115,9 @@ const Style = styled.div`
     flex: 1;
     background: rgb(0, 0, 0);
     z-index: 1;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
     
     /* Mapbox GL JS specific styles */
     .mapboxgl-ctrl-top-right {
@@ -376,6 +387,23 @@ const Style = styled.div`
       right: 300px;
     }
   }
+  
+  /* Responsive adjustments for different sidebar states */
+  &.sidebar-collapsed {
+    height: calc(100vh - 180px);
+    
+    @media (min-width: 769px) {
+      height: calc(100vh - 180px);
+    }
+  }
+  
+  &.sidebar-expanded {
+    height: calc(100vh - 200px);
+    
+    @media (min-width: 769px) {
+      height: calc(100vh - 200px);
+    }
+  }
 
   .sider {
     display: flex;

package/src/@daf/core/components/Dashboard/Tooltip.stories.js

@@ -1,48 +1,65 @@
-import { renderTooltip, renderTooltipJsx } from '../../../utils/tooltip';
-import ReactHtmlParser from 'react-html-parser';
-import ThemeLayout from '../ThemeLayout'
+import { renderTooltip, renderTooltipJsx } from "../../../utils/tooltip";
+import ReactHtmlParser from "react-html-parser";
+import ThemeLayout from "../ThemeLayout";
 
 const Widget = (props) => {
   return (
-    <div style={{ display: 'flex', gap: 20 }}>
-      <div style={{ borderRadius: 8, border: '1px solid var(--base-gray-40)', width: 250, padding: '0 8px' }}>
+    <div style={{ display: "flex", gap: 20 }}>
+      <div
+        style={{
+          borderRadius: 8,
+          border: "1px solid var(--base-gray-40)",
+          width: 250,
+          padding: "0 8px",
+        }}
+      >
         {renderTooltipJsx(props)}
       </div>
-      <div style={{ borderRadius: 8, border: '1px solid var(--base-gray-40)', width: 250, padding: '0 8px' }}>
+      <div
+        style={{
+          borderRadius: 8,
+          border: "1px solid var(--base-gray-40)",
+          width: 250,
+          padding: "0 8px",
+        }}
+      >
         {ReactHtmlParser(renderTooltip(props))}
       </div>
     </div>
   );
-}
+};
 
 export default {
-  title: 'Dashboard/Tooltip',
+  title: "Dashboard/Tooltip",
   component: Widget,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div style={{ margin: '3em' }}>
+      <div style={{ margin: "3em" }}>
         <ThemeLayout>
           <Story />
         </ThemeLayout>
       </div>
     ),
   ],
-}
+};
 
 export const Primary = {
-  name: 'Action Widget',
+  name: "Action Widget",
   args: {
-    "title": "Triangulation",
-    "items": [
+    title: "Triangulation",
+    items: [
       {
-        "color": "#4683DE",
-        "label": "Single Source",
-        "value": "91%"
-      }
+        color: "#4683DE",
+        label: "Single Source",
+        value: "91%",
+      },
     ],
+    tags: {
+      label: "Species",
+      items: [{ label: "Label 1", color: "red" }, { label: "Label 6" }],
+    },
     total: 0,
-    "link": '/app',
+    link: "/app",
   },
-}
-
+};

package/src/@daf/core/components/Icon/configs/Ant.js

@@ -0,0 +1,14 @@
+const config = {
+	viewBox: "0 0 16 17",
+	children: (
+		<path
+			d="M10.2485 8.14595C10.2485 6.75528 9.30639 5.62792 8.14422 5.62792M10.2485 8.14595H13.7215L15.1998 10.0345M10.2485 8.14595C10.2485 9.13029 9.7765 9.98271 9.08855 10.3968M8.14422 10.664C8.48378 10.664 8.80456 10.5677 9.08855 10.3968M8.14422 10.664C7.80571 10.664 7.48588 10.5683 7.20256 10.3984M8.14422 10.664C6.98204 10.664 6.03992 11.7913 6.03992 13.182C6.03992 14.5727 6.98204 15.7 8.14422 15.7C9.30639 15.7 10.2485 14.5727 10.2485 13.182C10.2485 11.7913 9.30639 10.664 8.14422 10.664ZM6.03992 8.14595H2.36439L0.799805 10.0345M6.03992 8.14595C6.03992 7.67625 6.14739 7.23659 6.33451 6.86026M6.03992 8.14595C6.03992 9.13156 6.51315 9.98492 7.20256 10.3984M8.14422 5.62792C7.37457 5.62792 6.70142 6.12235 6.33451 6.86026M8.14422 5.62792C9.39754 5.62792 10.4136 4.65909 10.4136 3.46398C10.4136 2.26888 9.39754 1.30005 8.14422 1.30005C6.89089 1.30005 5.87487 2.26888 5.87487 3.46398C5.87487 4.65909 6.89089 5.62792 8.14422 5.62792ZM9.97173 6.89677L12.4278 6.36201L14.366 4.59513M6.33451 6.86026L3.87987 6.36201L1.89507 4.65415M9.08855 10.3968L11.6942 11.2001L13.7144 13.664M7.20256 10.3984L4.59422 11.2001L2.57402 13.664M6.54536 1.92956L5.91614 1.32956M9.73276 1.92956L10.362 1.32956"
+			stroke="currentColor"
+			strokeWidth="1.2"
+			strokeLinecap="round"
+		/>
+	),
+	tag: ["nature"],
+};
+
+export default config;

package/src/@daf/core/components/Icon/configs/Bird.js

@@ -0,0 +1,14 @@
+const config = {
+	viewBox: "0 0 18 14",
+	children: (
+		<path
+			d="M5.36528 11.3267C7.95724 11.3267 10.0584 9.22646 10.0584 6.63571V3.38419C10.0584 2.74417 10.3079 2.1624 10.7148 1.7308M10.7148 1.7308L1.37599 11.1688C1.31806 11.2273 1.35953 11.3267 1.4419 11.3267H10.2902C12.8248 11.3267 14.8796 9.27196 14.8796 6.73734V4.23407M10.7148 1.7308C11.1544 1.26462 11.7777 0.973633 12.469 0.973633C13.3676 0.973633 14.1514 1.46533 14.5659 2.19436M7.24613 11.2649L9.00769 13.0264M14.5659 2.19436C14.7656 2.54541 14.8796 2.95149 14.8796 3.38419V4.23407M14.5659 2.19436L16.6038 2.89122C16.6763 2.91599 16.6892 3.01296 16.6257 3.0558L14.8796 4.23407M7.75605 13.0264H10.2593M12.869 3.35153C12.869 3.57244 12.6899 3.75153 12.469 3.75153C12.2481 3.75153 12.069 3.57244 12.069 3.35153C12.069 3.13061 12.2481 2.95153 12.469 2.95153C12.6899 2.95153 12.869 3.13061 12.869 3.35153Z"
+			stroke="currentColor"
+			strokeWidth="1.2"
+			strokeLinecap="round"
+		/>
+	),
+	tag: ["nature"],
+};
+
+export default config;

package/src/@daf/core/components/Icon/configs/Fish.js

@@ -0,0 +1,14 @@
+const config = {
+	viewBox: "0 0 16 12",
+	children: (
+		<path
+			d="M3.56741 5.93035C4.57902 8.09831 6.58683 9.30582 8.87149 9.53885C11.4621 9.8031 13.8036 8.23893 15.1884 5.83299C15.2204 5.7773 15.2206 5.70857 15.1888 5.65277C14.0851 3.71962 12.2542 2.3725 10.0741 2.15012M3.56741 5.93035C5.0274 3.62225 7.47102 1.8846 10.0741 2.15012M3.56741 5.93035L1.64477 3.21433C1.5292 3.05108 1.2536 3.16468 1.2761 3.36342C1.36164 4.11879 1.36819 4.90109 1.28693 5.69774C1.20567 6.49439 1.04131 7.25926 0.805023 7.9818C0.742855 8.17191 0.98985 8.33882 1.13599 8.20226L3.56741 5.93035ZM10.0741 2.15012L7.75293 1.07025C7.2145 0.814429 6.59489 1.21061 6.48594 1.88036L6.31462 3.12355M6.41096 8.71041L6.36522 9.79811C6.33699 10.4693 6.85307 10.9789 7.42519 10.8514C7.43668 10.8488 7.44794 10.8449 7.45864 10.84L10.4089 9.4846M12.3922 5.16548C12.3896 5.36342 12.2481 5.52606 12.0763 5.52875C11.9044 5.53144 11.7673 5.37316 11.77 5.17523C11.7727 4.97729 11.9142 4.81465 12.086 4.81196C12.2578 4.80927 12.3949 4.96754 12.3922 5.16548Z"
+			stroke="currentColor"
+			strokeWidth
+		/>
+	),
+	tag: ["nature"],
+};
+
+
+export default config;

package/src/@daf/core/components/Icon/configs/Leaf.js

@@ -1,16 +1,16 @@
 const config = {
-    viewBox: "0 0 14 20",
-    children: (
-        <>
-            <path
-                d="M7.00001 7.20094V12.8152M0.902649 9.98574C0.902649 6.35375 3.13811 3.14767 6.54787 1.23316C6.82864 1.07551 7.17138 1.07551 7.45215 1.23316C10.8619 3.14767 13.0974 6.35375 13.0974 9.98574C13.0974 13.6247 10.8534 16.8361 7.43262 18.7493C7.1525 18.9059 6.81098 18.906 6.53092 18.7492C3.11304 16.836 0.902649 13.6246 0.902649 9.98574Z"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-            />
-
-        </>
-    ),
+	viewBox: "0 0 14 20",
+	children: (
+		<>
+			<path
+				d="M7.00001 7.20094V12.8152M0.902649 9.98574C0.902649 6.35375 3.13811 3.14767 6.54787 1.23316C6.82864 1.07551 7.17138 1.07551 7.45215 1.23316C10.8619 3.14767 13.0974 6.35375 13.0974 9.98574C13.0974 13.6247 10.8534 16.8361 7.43262 18.7493C7.1525 18.9059 6.81098 18.906 6.53092 18.7492C3.11304 16.836 0.902649 13.6246 0.902649 9.98574Z"
+				stroke="currentColor"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+			/>
+		</>
+	),
+	tag: ["nature"],
 };
 
-export default config;
+export default config;

package/src/@daf/core/components/Icon/configs/Tree.js

@@ -1,8 +1,15 @@
 const config = {
-  viewBox: '0 0 15 18',
-  children: (
-    <path d="M7 17.3332V13.9999M10.475 7.38319H3.52497C2.54164 7.38319 2.19998 6.72486 2.77498 5.92486L6.24999 1.0582C6.65832 0.474864 7.34167 0.474864 7.74167 1.0582L11.2167 5.92486C11.8 6.72486 11.4583 7.38319 10.475 7.38319ZM11.6583 13.9999H2.35C1.03334 13.9999 0.583334 13.1249 1.35833 12.0582L4.68333 7.3832H9.325L12.65 12.0582C13.425 13.1249 12.975 13.9999 11.6583 13.9999Z" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-  ),
-}
+	viewBox: "0 0 15 18",
+	children: (
+		<path
+			d="M7 17.3332V13.9999M10.475 7.38319H3.52497C2.54164 7.38319 2.19998 6.72486 2.77498 5.92486L6.24999 1.0582C6.65832 0.474864 7.34167 0.474864 7.74167 1.0582L11.2167 5.92486C11.8 6.72486 11.4583 7.38319 10.475 7.38319ZM11.6583 13.9999H2.35C1.03334 13.9999 0.583334 13.1249 1.35833 12.0582L4.68333 7.3832H9.325L12.65 12.0582C13.425 13.1249 12.975 13.9999 11.6583 13.9999Z"
+			stroke="currentColor"
+			strokeWidth="1.25"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	),
+	tag: ["nature"],
+};
 
-export default config;
+export default config;

package/src/@daf/core/components/Icon/configs/WaterDrop.js

@@ -0,0 +1,15 @@
+const config = {
+	viewBox: "0 0 13 16",
+	children: (
+		<path
+			d="M11.5 9.33325C11.5 12.2788 9.26142 14.6666 6.5 14.6666C3.73858 14.6666 1.5 12.2788 1.5 9.33325C1.5 8.62598 1.62907 7.95087 1.86345 7.33325C2.60518 5.3787 6.5 1.33325 6.5 1.33325C6.5 1.33325 10.3948 5.3787 11.1366 7.33325C11.3709 7.95087 11.5 8.62598 11.5 9.33325Z"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	),
+	tag: ["nature"],
+};
+
+export default config;

package/src/@daf/core/components/Icon/configs/index.js

@@ -196,6 +196,10 @@ import UpDownArrow from "./UpDownArrow";
 import Clear from "./Clear";
 import User from "./User";
 import Integration from "./Integration";
+import Ant from "./Ant";
+import Bird from "./Bird";
+import Fish from "./Fish";
+import WaterDrop from "./WaterDrop";
 
 const config = {
 	Right,
@@ -396,6 +400,10 @@ const config = {
 	UpDownArrow,
 	Clear,
 	Integration,
+	Ant,
+	Bird,
+	Fish,
+	WaterDrop,
 };
 
 export default config;

package/src/@daf/core/components/Table/MoreTags/index.jsx

@@ -1,114 +1,137 @@
-import PropTypes from "prop-types"
-import { Typography, Tag, Tooltip } from "antd"
-import { useEffect, useRef, useState } from "react"
+import PropTypes from "prop-types";
+import { Typography, Tag, Tooltip } from "antd";
+import { useEffect, useRef, useState } from "react";
 
-const { Text } = Typography
+const { Text } = Typography;
 
 export default function MoreTags({
-  values = [],
-  maxWidthCont = 120,
-  maxTextCont = 100,
-  diff = 30,
+	values = [],
+	maxWidthCont = 120,
+	maxTextCont = 100,
+	diff = 30,
 }) {
-  const ref = useRef();
-  const [width, setWidth] = useState(0);
-  const [indexToReturn, setIndexToReturn] = useState(0);
+	const ref = useRef();
+	const [width, setWidth] = useState(0);
+	const [indexToReturn, setIndexToReturn] = useState(0);
 
-  const _maxWidthCont = values.length <= 1 ? maxWidthCont : maxWidthCont - 20;
-  const _maxWidthTxt = values.length <= 1 ? maxTextCont : 80;
+	const _maxWidthCont = values.length <= 1 ? maxWidthCont : maxWidthCont - 20;
+	const _maxWidthTxt = values.length <= 1 ? maxTextCont : 80;
 
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      setWidth(entries[0].contentRect.width);
-    })
+	useEffect(() => {
+		const resizeObserver = new ResizeObserver((entries) => {
+			setWidth(entries[0].contentRect.width);
+		});
 
-    resizeObserver.observe(ref.current);
-    return () => resizeObserver.disconnect();
-  }, []);
+		resizeObserver.observe(ref.current);
+		return () => resizeObserver.disconnect();
+	}, []);
 
-  const _calculate = () => {
-    const tabs = ref.current.querySelectorAll('.check-tabs');
-    let filled = 0;
-    let indexToReturn;
+	const _calculate = () => {
+		const tabs = ref.current.querySelectorAll(".check-tabs");
+		let filled = 0;
+		let indexToReturn;
 
-    if (values.length === 1) {
-      setIndexToReturn(1);
-      return;
-    }
+		if (values.length === 1) {
+			setIndexToReturn(1);
+			return;
+		}
 
-    tabs.forEach((t, i) => {
-      if (typeof indexToReturn === 'number') {
-        return;
-      }
+		tabs.forEach((t, i) => {
+			if (typeof indexToReturn === "number") {
+				return;
+			}
 
-      filled = filled + t.clientWidth + 25;
+			filled = filled + t.clientWidth + 25;
 
-      const dif = width - filled;
+			const dif = width - filled;
 
-      if (dif < diff) {
-        indexToReturn = dif < 0 ? i - 1 : i;
-        setIndexToReturn(indexToReturn);
-        return;
-      }
-    });
-    setIndexToReturn(typeof indexToReturn === 'number' ? indexToReturn : (tabs.length - 1));
-  };
+			if (dif < diff) {
+				indexToReturn = dif < 0 ? i - 1 : i;
+				setIndexToReturn(indexToReturn);
+				return;
+			}
+		});
+		setIndexToReturn(typeof indexToReturn === "number" ? indexToReturn : tabs.length - 1);
+	};
 
-  const hasMore = (values.length && indexToReturn !== values.length - 1);
-  const toShow = hasMore ? values.slice(0, indexToReturn + 1) : values;
-  const other = hasMore ? values.slice(indexToReturn + 1, values.length + 1) : [];
+	const hasMore = values.length && indexToReturn !== values.length - 1;
+	const toShow = hasMore ? values.slice(0, indexToReturn + 1) : values;
+	const other = hasMore ? values.slice(indexToReturn + 1, values.length + 1) : [];
 
-  useEffect(() => {
-    _calculate();
-  }, [width, values]);
+	useEffect(() => {
+		_calculate();
+	}, [width, values]);
 
-  return (
-    <div className="daf-more-tags">
-      <div className="list">
-        {toShow.map((ac, i) => typeof ac.renderTag === 'function' ? ac.renderTag() : (
-          <Tag
-            key={`${typeof ac === 'object' ? ac.value : ac}-${i}`}
-            style={{ maxWidth: _maxWidthCont }}
-            color={ac.color}
-          >
-            <Text
-              ellipsis={{ tooltip: typeof ac === 'object' ? ac.label : ac }}
-              style={{ maxWidth: _maxWidthTxt }}
-            >
-              {typeof ac === 'object' ? ac.label : ac}
-            </Text>
-          </Tag>
-        ))}
-        {other.length ? (
-          <Tooltip title={other.map((ac) => typeof ac === 'object' ? ac.label : ac).join(', ')}>
-            <Tag>+{other.length}</Tag>
-          </Tooltip>
-        ) : null}
-      </div>
-      <div className="list hidden" ref={ref}>
-        {values.map((ac, i) => typeof ac.renderTag === 'function' ? ac.renderTag("check-tabs") : (
-          <Tag
-            color={ac.color}
-            key={`${ac}-${i}`}
-            className="check-tabs"
-            style={{ maxWidth: _maxWidthCont }}
-          >
-            <Text
-              ellipsis={{ tooltip: typeof ac === 'object' ? ac.label : ac }}
-              style={{ maxWidth: _maxWidthTxt }}
-            >
-              {typeof ac === 'object' ? ac.label : ac}
-            </Text>
-          </Tag>
-        ))}
-      </div>
-    </div>
-  )
+	return (
+		<div className="daf-more-tags">
+			<div className="list">
+				{toShow.map((ac, i) =>
+					typeof ac.renderTag === "function" ? (
+						ac.renderTag()
+					) : (
+						<Tag
+							key={`${typeof ac === "object" ? ac.value : ac}-${i}`}
+							style={{
+								maxWidth: _maxWidthCont,
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap",
+							}}
+							color={ac.color}
+						>
+							<Tooltip title={typeof ac === "object" ? ac.label : ac}>
+								<span
+									style={{
+										maxWidth: _maxWidthTxt,
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap",
+									}}
+								>
+									{typeof ac === "object" ? ac.label : ac}
+								</span>
+							</Tooltip>
+						</Tag>
+					),
+				)}
+				{other.length ? (
+					<Tooltip
+						title={other
+							.map((ac) => (typeof ac === "object" ? ac.label : ac))
+							.join(", ")}
+					>
+						<Tag>+{other.length}</Tag>
+					</Tooltip>
+				) : null}
+			</div>
+			<div className="list hidden" ref={ref}>
+				{values.map((ac, i) =>
+					typeof ac.renderTag === "function" ? (
+						ac.renderTag("check-tabs")
+					) : (
+						<Tag
+							color={ac.color}
+							key={`${ac}-${i}`}
+							className="check-tabs"
+							style={{ maxWidth: _maxWidthCont }}
+						>
+							<Text
+								ellipsis={{ tooltip: typeof ac === "object" ? ac.label : ac }}
+								style={{ maxWidth: _maxWidthTxt }}
+							>
+								{typeof ac === "object" ? ac.label : ac}
+							</Text>
+						</Tag>
+					),
+				)}
+			</div>
+		</div>
+	);
 }
 
 MoreTags.propTypes = {
-  values: PropTypes.array,
-  maxWidthCont: PropTypes.number,
-  maxTextCont: PropTypes.number,
-  diff: PropTypes.number,
-}
+	values: PropTypes.array,
+	maxWidthCont: PropTypes.number,
+	maxTextCont: PropTypes.number,
+	diff: PropTypes.number,
+};