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 f79f55f8636c9ce05f7a8508963d7d1ec2f6f59a..ea96e605f89509654749b76b2dd2d6acfb8ae869 100644
--- a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
@@ -627,13 +627,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
index fb74fe2cd51b3409448ab981bda18d2e8aec6aee..40295431b56503ddbf5df5b7b5777fd1b3b0d925 100644
--- a/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderLogicPillsPanel.tsx
+++ b/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderLogicPillsPanel.tsx
@@ -155,19 +155,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'}>
- {props.title && <h1 className="card-title mb-7">{props.title}</h1>}
- <div className="gap-1 flex">
+ <div className={props.className + ' card h-30rem w-20rem overflow-auto'}>
+ {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);
@@ -176,57 +192,61 @@ 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="overflow-x-hidden h-[75rem] w-full mt-1">
- <ul className="menu p-0 [&_li>*]:rounded-none w-full pb-10 h-full gap-1">
- {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="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);
- }}
- >
- {item.icon && (
- <div className="w-[1rem] rounded-sm justify-center flex">
- <Icon component={item.icon} size={20} />
- </div>
- )}
- <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>
+ <div className="mt-1">
+ <TooltipProvider delayDuration={50}>
+ <ul className="menu mx-4 [&_li>*]:rounded-none b-10 h-full gap-1 overflow-auto">
+ {AllLogicMapAvailable.map((item, index) => (
+ <Tooltip key={'QB_Options_' + index}>
+ <TooltipContent>{item.description}</TooltipContent>
+ <TooltipTrigger>
+ <li key={item.key + item.description} className="h-fit bg-white border-[1px] border-secondary-500 rounded-sm ">
+ <span
+ className="flex before:w-[5rem] before:text-center text-start "
+ onDragStart={(e) => onDragStart(e, item)}
+ draggable={true}
+ onClick={() => {
+ if (props.editNode) onEditNodeFromPopup(item);
+ else onNewNodeFromPopup(item);
+ }}
+ >
+ {item.icon && (
+ <div className="w-[1rem] rounded-sm justify-center flex">
+ <Icon component={item.icon} size={20} />
+ </div>
+ )}
+ <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>
);