chore(transformations): optimisation

public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx

@@ -62,7 +62,7 @@ export function LegacyEmptyTransformationsMessage({ onShowPicker }: { onShowPick
 export function NewEmptyTransformationsMessage(props: EmptyTransformationsProps) {
   const hasGoToQueries = props.onGoToQueries != null;
   const hasAddTransformation = props.onAddTransformation != null;
-  const isSqlApplicable = props.isSqlApplicable !== false; // Default to true if not provided
+  const isSqlApplicable = props.isSqlApplicable ?? true; // Default to true if not provided
 
   // Get transformations from registry
   const transformations = useMemo(() => {

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx

@@ -86,10 +86,9 @@ export function PanelDataTransformationsTabRendered({ model }: SceneComponentPro
   }, [transformsWrongType]);
 
   // Check if SQL expressions are applicable (all datasources must be backend datasources)
+  const queryRunner = model.getQueryRunner();
+  const { queries } = queryRunner.useState();
   const isSqlApplicable = useMemo(() => {
-    const queryRunner = model.getQueryRunner();
-    const queries = queryRunner.state.queries;
-
     if (!queries || queries.length === 0) {
       return true; // If no queries, SQL is theoretically applicable
     }
@@ -112,7 +111,7 @@ export function PanelDataTransformationsTabRendered({ model }: SceneComponentPro
     }
 
     return true;
-  }, [model]);
+  }, [queries]);
 
   const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
   const [confirmModalOpen, setConfirmModalOpen] = useState<boolean>(false);

public/app/features/dashboard/components/TransformationsEditor/SqlExpressionCard.tsx

@@ -23,10 +23,15 @@ export function SqlExpressionCard({
   disabledTooltip,
 }: SqlExpressionCardProps) {
   const styles = useStyles2(getSqlExpressionCardStyles);
-  const cardClasses = isDisabled ? cx(styles.card, styles.cardDisabled) : styles.card;
 
   return (
-    <Card className={cardClasses} data-testid={testId} onClick={onClick} noMargin>
+    <Card
+      // className={cardClasses}
+      className={cx(styles.card, { [styles.cardDisabled]: isDisabled })}
+      data-testid={testId}
+      onClick={onClick}
+      noMargin
+    >
       <Card.Heading className={styles.heading}>
         <div className={styles.titleRow}>
           <span>{name}</span>