diff --git a/libs/shared/lib/querybuilder/model/logic/numberFilters.tsx b/libs/shared/lib/querybuilder/model/logic/numberFilters.tsx
index 3f1ba9d851027a07b1182c42b4ba1087f62df174..904882cd4c347b20b6e7d89580f5241f716425dc 100644
--- a/libs/shared/lib/querybuilder/model/logic/numberFilters.tsx
+++ b/libs/shared/lib/querybuilder/model/logic/numberFilters.tsx
@@ -18,7 +18,7 @@ export const MathFilters: Record<NumberFilterTypes, GeneralDescription<NumberFil
inputs: [{ name: '1', type: 'float', default: 0 }],
output: { name: '==', type: 'float' },
logic: ['==', '@i', '@1'],
- icon: '=',
+ icon: 'icon-[ic--baseline-equals]',
},
[NumberFilterTypes.NOT_EQUAL]: {
key: 'numberFilterNotEqual',
@@ -30,7 +30,7 @@ export const MathFilters: Record<NumberFilterTypes, GeneralDescription<NumberFil
inputs: [{ name: '1', type: 'float', default: 0 }],
output: { name: '!=', type: 'float' },
logic: ['!=', '@i', '@1'],
- icon: '≠',
+ icon: 'icon-[ic--baseline-not-equal]',
},
[NumberFilterTypes.LESS_THAN]: {
key: 'numberFilterLessThan',
@@ -42,7 +42,7 @@ export const MathFilters: Record<NumberFilterTypes, GeneralDescription<NumberFil
inputs: [{ name: '1', type: 'float', default: 0 }],
output: { name: '<', type: 'float' },
logic: ['<', '@i', '@1'],
- icon: '<',
+ icon: 'icon-[ic--baseline-less-than]',
},
[NumberFilterTypes.LESS_THAN_EQUAL]: {
key: 'numberFilterLessThanOrEqual',
@@ -54,7 +54,7 @@ export const MathFilters: Record<NumberFilterTypes, GeneralDescription<NumberFil
inputs: [{ name: '1', type: 'float', default: 0 }],
output: { name: '<=', type: 'float' },
logic: ['<=', '@i', '@1'],
- icon: '≤',
+ icon: 'icon-[ic--baseline-less-than-equal]',
},
[NumberFilterTypes.GREATER_THAN]: {
key: 'numberFilterGreaterThan',
@@ -66,7 +66,7 @@ export const MathFilters: Record<NumberFilterTypes, GeneralDescription<NumberFil
inputs: [{ name: '1', type: 'float', default: 0 }],
output: { name: '>', type: 'float' },
logic: ['>', '@i', '@1'],
- icon: '>',
+ icon: 'icon-[ic--baseline-greater-than]',
},
[NumberFilterTypes.GREATER_THAN_EQUAL]: {
key: 'numberFilterGreaterThanOrEqual',
@@ -78,7 +78,7 @@ export const MathFilters: Record<NumberFilterTypes, GeneralDescription<NumberFil
inputs: [{ name: '1', type: 'float', default: 0 }],
output: { name: '>=', type: 'float' },
logic: ['>=', '@i', '@1'],
- icon: '≥',
+ icon: 'icon-[ic--baseline-greater-than-equal]',
},
};
diff --git a/libs/shared/lib/querybuilder/model/logic/numberFunctions.tsx b/libs/shared/lib/querybuilder/model/logic/numberFunctions.tsx
index 65f70fd7d360521edbe81ddd384912161e330c24..1e173ff31cda2ad7a66abbff15a423a398ad2e2a 100644
--- a/libs/shared/lib/querybuilder/model/logic/numberFunctions.tsx
+++ b/libs/shared/lib/querybuilder/model/logic/numberFunctions.tsx
@@ -18,7 +18,7 @@ export const NumberFunctions: Record<NumberFunctionTypes, GeneralDescription<Num
inputs: [{ name: '1', type: 'float', default: 0 }],
output: { name: '+', type: 'float' },
logic: ['+', '@i', '@1'],
- icon: '+',
+ icon: 'icon-[ic--baseline-plus]',
},
[NumberFunctionTypes.SUBTRACT]: {
key: 'numberFunctionSubtract',
@@ -30,7 +30,7 @@ export const NumberFunctions: Record<NumberFunctionTypes, GeneralDescription<Num
inputs: [{ name: '1', type: 'float', default: 0 }],
output: { name: '-', type: 'float' },
logic: ['-', '@i', '@1'],
- icon: '-',
+ icon: 'icon-[ic--baseline-minus]',
},
[NumberFunctionTypes.MULTIPLY]: {
key: 'numberFunctionMultiply',
@@ -42,7 +42,7 @@ export const NumberFunctions: Record<NumberFunctionTypes, GeneralDescription<Num
inputs: [{ name: '1', type: 'float', default: 0 }],
output: { name: '*', type: 'float' },
logic: ['*', '@i', '@1'],
- icon: '×',
+ icon: 'icon-[ic--baseline-clear]',
},
[NumberFunctionTypes.DIVIDE]: {
key: 'numberFunctionDivide',
@@ -54,7 +54,7 @@ export const NumberFunctions: Record<NumberFunctionTypes, GeneralDescription<Num
inputs: [{ name: '1', type: 'float', default: 0 }],
output: { name: '/', type: 'float' },
logic: ['/', '@i', '@1'],
- icon: '÷',
+ icon: 'icon-[ic--baseline-divide]',
},
};
diff --git a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
index b392032c70a0418ebee83768310b09ccdf366bec..ec05da457a2eeda6fde3a5d99f85d60ca73677ec 100644
--- a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
@@ -36,9 +36,9 @@ import { ConnectionDragLine, ConnectionLine, QueryEntityPill, QueryRelationPill
import { QueryLogicPill } from '../pills/customFlowPills/logicpill/QueryLogicPill';
import { dragPillStarted, movePillTo } from '../pills/dragging/dragPill';
import styles from './querybuilder.module.scss';
-import { QueryBuilderLogicPillsPanel } from './querysidepanel/queryBuilderLogicPillsPanel';
-import { QueryBuilderRelatedNodesPanel } from './querysidepanel/queryBuilderRelatedNodesPanel';
-import { QueryMLDialog } from './querysidepanel/queryMLDialog';
+import { QueryBuilderLogicPillsPanel } from './querysidepanel/QueryBuilderLogicPillsPanel';
+import { QueryBuilderRelatedNodesPanel } from './querysidepanel/QueryBuilderRelatedNodesPanel';
+import { QueryMLDialog } from './querysidepanel/QueryMLDialog';
import { ConnectingNodeDataI } from './utils/connectorDrop';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
import { resultSetFocus } from '../../data-access/store/interactionSlice';
@@ -622,7 +622,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
if (!ret) setToggleSettings(undefined);
}}
>
- <DialogContent className="w-fit">
+ <DialogContent className="w-fit rounded-none">
<QueryBuilderLogicPillsPanel
onClick={(v) => {
connectingNodeId.current = null;
@@ -630,13 +630,12 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
setToggleSettings(undefined);
}}
reactFlowWrapper={reactFlowWrapper.current}
- title="Logic Pills usable by the node"
- className="min-h-[75vh] max-h-[75vh]"
+ title="Available Logic Pills"
+ className="max-h-[75vh] min-h-[45vh]"
onDrag={() => {}}
connection={connectingNodeId?.current}
editNode={editLogicNode.current}
/>
- <DialogClose>Cancel</DialogClose>
</DialogContent>
</Dialog>
<Dialog
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderLogicPillsPanel.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel/QueryBuilderLogicPillsPanel.tsx
similarity index 65%
rename from libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderLogicPillsPanel.tsx
rename to libs/shared/lib/querybuilder/panel/querysidepanel/QueryBuilderLogicPillsPanel.tsx
index 3b389e4c6695ca500b12fa141d11029120fcea47..13cf045ec1d5bcfcf1a53fb19dad460f419df7d3 100644
--- a/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderLogicPillsPanel.tsx
+++ b/libs/shared/lib/querybuilder/panel/querysidepanel/QueryBuilderLogicPillsPanel.tsx
@@ -154,19 +154,35 @@ export const QueryBuilderLogicPillsPanel = (props: {
props.onClick(value);
};
+ const AllLogicMapAvailable = Object.values(AllLogicMap)
+ .filter((item) => !filterType || item.key.toLowerCase().includes(filterType))
+ .filter((item) => selectedOp === -1 || item.key.toLowerCase().includes(dataOps?.[selectedOp].title))
+ .filter((item) => selectedType === -1 || item.key.toLowerCase().includes(dataTypes?.[selectedType].title));
+
+ const dataOpsPresent: { [key: string]: boolean } = {};
+
+ dataOps.forEach((dataOp) => {
+ const hasMatch = AllLogicMapAvailable.some((item) => {
+ return item.key.toLowerCase().includes(dataOp.title.toLowerCase());
+ });
+
+ dataOpsPresent[dataOp.title] = hasMatch;
+ });
+
return (
- <div className={props.className + ' card w-fit'}>
- {props.title && <h1 className="card-title mb-7">{props.title}</h1>}
- <div className="gap-1 flex w-fit">
+ <div className={props.className + ' card'}>
+ {props.title && <h1 className="card-title mb-2 mx-auto">{props.title}</h1>}
+ <div className="gap-1 flex justify-center">
<TooltipProvider delayDuration={50}>
{dataOps.map((item, index) => (
- <Tooltip key={item.title}>
+ <Tooltip key={'QB_Type_' + item.title}>
<TooltipContent>{item.description}</TooltipContent>
<TooltipTrigger>
<Button
iconComponent={item.icon}
size="sm"
variant={selectedOp === index ? 'solid' : 'outline'}
+ disabled={!dataOpsPresent[item.title]}
onClick={(e) => {
e.preventDefault();
index === selectedOp ? setSelectedOp(-1) : setSelectedOp(index);
@@ -175,52 +191,57 @@ export const QueryBuilderLogicPillsPanel = (props: {
</TooltipTrigger>
</Tooltip>
))}
+ {dataTypes.map((item, index) => (
+ <Tooltip key={'QB_Type_' + item.title}>
+ <TooltipContent>{item.description}</TooltipContent>
+ <TooltipTrigger>
+ <Button
+ iconComponent={item.icon}
+ size="sm"
+ variant={selectedType === index ? 'solid' : 'outline'}
+ onClick={(e) => {
+ e.preventDefault();
+ index === selectedType ? setSelectedType(-1) : setSelectedType(index);
+ }}
+ ></Button>
+ </TooltipTrigger>
+ </Tooltip>
+ ))}
</TooltipProvider>
- <div className="w-2" />
- {dataTypes.map((item, index) => (
- <div key={item.title} data-tip={item.description} className="tooltip tooltip-top m-0 p-0">
- <Button
- iconComponent={item.icon}
- size="sm"
- variant={selectedType === index ? 'solid' : 'outline'}
- onClick={(e) => {
- e.preventDefault();
- index === selectedType ? setSelectedType(-1) : setSelectedType(index);
- }}
- ></Button>
- </div>
- ))}
</div>
<div className="mt-1 overflow-x-hidden h-[80vh]">
- <ul className="pb-10 gap-1 flex flex-col w-full h-full">
- {Object.values(AllLogicMap)
- .filter((item) => !filterType || item.key.toLowerCase().includes(filterType))
- .filter((item) => selectedOp === -1 || item.key.toLowerCase().includes(dataOps?.[selectedOp].title))
- .filter((item) => selectedType === -1 || item.key.toLowerCase().includes(dataTypes?.[selectedType].title))
- .map((item, index) => (
- <li key={item.key + item.description} className="px-3 py-2 h-fit bg-white border-[1px] border-secondary-500 rounded-sm">
- <span
- data-tip={item.description}
- className="flex before:w-[10rem] before:text-center tooltip tooltip-bottom text-start "
- onDragStart={(e) => onDragStart(e, item)}
- draggable={true}
- onClick={() => {
- if (props.editNode) onEditNodeFromPopup(item);
- else onNewNodeFromPopup(item);
- }}
- >
- <span className="w-full">{item.name}</span>
- <span className="flex scale-75">
- {item.key.toLowerCase().includes('filter') && <Icon component="icon-[ic--baseline-filter-alt]" size={20} />}
- {item.key.toLowerCase().includes('function') && <Icon component="icon-[ic--baseline-functions]" size={20} />}
- {item.key.toLowerCase().includes('aggregation') && <Icon component="icon-[ic--baseline-grid-on]" size={20} />}
- {item.key.toLowerCase().includes('number') && <Icon component="icon-[ic--baseline-numbers]" size={20} />}
- {item.key.toLowerCase().includes('string') && <Icon component="icon-[ic--baseline-abc]" size={20} />}
- </span>
- </span>
- </li>
+ <TooltipProvider delayDuration={50}>
+ <ul className="pb-10 gap-1 flex flex-col w-full h-full">
+ {AllLogicMapAvailable.map((item, index) => (
+ <Tooltip key={'QB_Options_' + index}>
+ <TooltipContent>{item.description}</TooltipContent>
+ <TooltipTrigger>
+ <li key={item.key + item.description} className="px-3 py-2 h-fit bg-white border-[1px] border-secondary-500 min-w-72">
+ <span
+ className="flex gap-1"
+ onDragStart={(e) => onDragStart(e, item)}
+ draggable={true}
+ onClick={() => {
+ if (props.editNode) onEditNodeFromPopup(item);
+ else onNewNodeFromPopup(item);
+ }}
+ >
+ {item.icon && <Icon component={item.icon} size={24} />}
+ <span className="w-full">{item.name}</span>
+ <span className="flex scale-75">
+ {item.key.toLowerCase().includes('filter') && <Icon component="icon-[ic--baseline-filter-alt]" size={20} />}
+ {item.key.toLowerCase().includes('function') && <Icon component="icon-[ic--baseline-functions]" size={20} />}
+ {item.key.toLowerCase().includes('aggregation') && <Icon component="icon-[ic--baseline-grid-on]" size={20} />}
+ {item.key.toLowerCase().includes('number') && <Icon component="icon-[ic--baseline-numbers]" size={20} />}
+ {item.key.toLowerCase().includes('string') && <Icon component="icon-[ic--baseline-abc]" size={20} />}
+ </span>
+ </span>
+ </li>
+ </TooltipTrigger>
+ </Tooltip>
))}
- </ul>
+ </ul>
+ </TooltipProvider>
</div>
</div>
);
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderRelatedNodesPanel.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel/QueryBuilderRelatedNodesPanel.tsx
similarity index 100%
rename from libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderRelatedNodesPanel.tsx
rename to libs/shared/lib/querybuilder/panel/querysidepanel/QueryBuilderRelatedNodesPanel.tsx
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel/QueryMLDialog.tsx
similarity index 100%
rename from libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
rename to libs/shared/lib/querybuilder/panel/querysidepanel/QueryMLDialog.tsx