render group view

packages/frontend/src/pages/rendering/instructions/Instructions.tsx

@@ -15,6 +15,7 @@ import { InstructionPill } from './shared/InstructionBubble';
 import type { InstructionPillProps } from './shared/InstructionBubble';
 import { TilingSpriteView } from './TilingSprite';
 import { CustomRenderView } from './CustomRender';
+import { RenderGroupView } from './RenderGroup';
 
 export type RenderingTextureDataState = Pick<
   TextureDataState,
@@ -204,6 +205,7 @@ const instructionViews = {
   graphics: GraphicsView,
   nineSliceSprite: NineSliceSpriteView,
   customRender: CustomRenderView,
+  'Render Group': RenderGroupView,
 };
 
 export const Instructions: React.FC = memo(() => {

packages/frontend/src/pages/rendering/instructions/RenderGroup.tsx

@@ -0,0 +1,28 @@
+import type React from 'react';
+import { memo } from 'react';
+import type { BaseInstruction } from './Instructions';
+import { InstructionSection } from './shared/InstructionSection';
+
+export const RenderGroupView: React.FC<BaseInstruction> = memo(({ drawTextures, type, action }) => {
+  return (
+    <div className="flex flex-col">
+      <div className="items-left flex w-full flex-col justify-between gap-4">
+        <div>
+          Render groups are used to group instructions together. They can be used to optimise your scene by reducing the
+          amount of instruction rebuilds that need to be done.
+          <br />
+          <br />
+          You can learn more about render groups{' '}
+          <a
+            href="https://pixijs.com/8.x/guides/advanced/render-groups"
+            className="text-primary underline"
+            target="_blank"
+          >
+            here
+          </a>
+        </div>
+        <InstructionSection type={type} action={action} drawTextures={drawTextures} />
+      </div>
+    </div>
+  );
+});

packages/frontend/src/pages/rendering/instructions/shared/InstructionBubble.tsx

@@ -22,13 +22,11 @@ export interface InstructionPillProps {
 export const InstructionPill: React.FC<InstructionPillProps> = memo(
   ({ onClick, selected, renderGroupColor, drawTextures, type, action, isDrawCall }) => {
     const border = selected ? 'bg-primary' : isDrawCall ? 'border-primary' : '';
-    const fill = selected ? '[&_svg]:fill-primary' : '';
     const text = selected ? 'text-white' : '';
     return (
       <div
         className={cn(
-          fill,
-          `hover:bg-secondary bg-border [&_svg]:hover:fill-secondary flex cursor-pointer flex-row items-center justify-center gap-1 rounded-sm border p-1`,
+          `hover:bg-secondary bg-border flex cursor-pointer flex-row items-center justify-center gap-1 rounded-sm border p-1`,
           'min-w-52',
           border,
         )}