SeedCompany · CarsonF · Oct 2, 2024 · Oct 2, 2024
@@ -1,7 +1,12 @@
 import { SvgIcon, SvgIconProps } from '@mui/material';
+import { forwardRef } from 'react';
 
-export const PeopleJoinedIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props} viewBox="0 0 40 40">
-    <path d="M16.02 27.7962c.968-.176 2.604-.944 4.196-1.872.92.996 2.8 2 3.8 1.888.1254-.1513.2353-.3148.328-.488.0943-.142.1734-.2935.236-.452-.4-.932-2.164-2.124-3.48-2.456-.028-1.832-.212-3.6-.56-4.516-.1865-.0562-.3822-.0752-.576-.056-.1674-.0155-.3362.0035-.496.056-.332.868-.516 2.516-.556 4.256-1.504.936-2.868 1.96-3.46 2.704.0481.1934.1337.3756.252.536.0772.1533.1847.2894.316.4zM12.848 16.9679l.068.768c0 .136.28.244.588.232.308-.012.496-.112.496-.236.0271-.5045.0859-1.0069.176-1.504.1263-.5102.3764-.9814.728-1.372.3877-.4337.8894-.7497 1.448-.912.2937-.0846.5985-.1237.904-.116h.212c.1024-.006.2041-.0207.304-.044.2029-.0471.3963-.1283.572-.24.366-.2313.6421-.5806.7825-.9901.1404-.4095.1367-.8548-.0105-1.2619-.071-.2101-.1779-.4064-.316-.58-.0692-.0849-.1455-.1639-.228-.236-.076-.068-.196-.148-.204-.16-.2679-.1983-.5005-.4404-.688-.71601-.3854-.56617-.5538-1.25225-.4745-1.93253.0794-.68028.4012-1.30919.9065-1.77147.516-.47109 1.1894-.73228 1.888-.73228.6987 0 1.3721.26119 1.888.73228.5162.45498.8468 1.0841.9287 1.76729.0819.6832-.0906 1.37262-.4847 1.93671-.187.27243-.4181.51171-.684.70801l-.088.092-.124.1c-.0806.0713-.1555.1489-.224.232-.1381.1698-.2463.3619-.32.568-.143.4085-.1416.8538.004 1.2614.1456.4077.4266.7531.796.9786.1749.1088.367.1873.568.232.0986.0232.199.0379.3.044h.204c.3057-.0068.6107.0337.904.12.559.1636 1.0607.481 1.448.916.3528.3929.6029.867.728 1.38.083.499.1351 1.0026.156 1.508 0 .136.272.236.576.228.272 0 .484-.108.496-.228l.068-.768V16.5239c.017-.1742.0197-.3494.008-.524-.0756-.7672-.3515-1.501-.8-2.128-.4134-.5578-.9469-1.0156-1.561-1.3396-.6141-.3241-1.2931-.506-1.987-.5324h-.048l.032-.024c.7234-.4798 1.305-1.1448 1.6842-1.9257.3792-.78084.5421-1.64909.4718-2.51431-.1048-1.24018-.6699-2.39626-1.5841-3.24085-.9142-.8446-2.1113-1.31659-3.3559-1.32315-1.0557-.0098-2.0864.32137-2.9388.94427-.8525.6229-1.4811 1.50427-1.7925 2.51307-.3114 1.0088-.2889 2.09116.0641 3.08617.353.995 1.0177 1.8495 1.8952 2.4365h.024c-.4924.0209-.9783.1194-1.44.292-.8467.3148-1.5824.8711-2.116 1.6-.4687.6304-.7602 1.3749-.844 2.156-.0213.1698-.0293.341-.024.512v.244l.02.212zm9.844-4.996v.024h-.024l.024-.024zm-5.392-.028h-.036s.032.004.04.004l-.004-.004zM35.0481 31.0399h-.048l.032-.024c.7262-.4786 1.3106-1.1436 1.6919-1.9253.3814-.7818.5458-1.6516.4761-2.5187-.1106-1.2358-.6781-2.386-1.5917-3.2257-.9136-.8396-2.1075-1.3082-3.3483-1.3143-1.0558-.0097-2.0865.3214-2.9389.9443-.8524.6229-1.4811 1.5043-1.7925 2.5131-.3114 1.0088-.2889 2.0911.0641 3.0862.353.995 1.0177 1.8495 1.8953 2.4364h.024c-.4924.021-.9784.1195-1.44.292-.8467.3148-1.5825.8712-2.116 1.6-.4577.6257-.742 1.3612-.824 2.132-.0214.1698-.0294.341-.024.512V35.9959l.068.804c0 .136.28.244.588.232.308-.012.5-.108.512-.232.0271-.5045.0858-1.0068.176-1.504.1263-.5101.3763-.9813.728-1.372.3865-.433.8868-.749 1.444-.912.2936-.0846.5985-.1237.904-.116h.212c.1024-.006.2041-.0207.304-.044.2028-.047.3962-.1282.572-.24.366-.2312.642-.5805.7824-.9901.1404-.4095.1367-.8547-.0104-1.2619-.0756-.2081-.1866-.4016-.328-.572-.0693-.0849-.1456-.1638-.228-.236-.076-.068-.196-.148-.204-.16-.2644-.1966-.4942-.4358-.68-.708-.3854-.5661-.5539-1.2522-.4746-1.9325.0794-.6803.4012-1.3092.9066-1.7715.5159-.471 1.1893-.7322 1.888-.7322.6986 0 1.372.2612 1.888.7322.5162.455.8468 1.0841.9286 1.7673.0819.6832-.0906 1.3727-.4846 1.9367-.187.2725-.4182.5118-.684.708l-.088.064-.124.1c-.0807.0714-.1556.1489-.224.232-.1382.1698-.2464.3619-.32.568-.1431.4086-.1416.8538.0039 1.2615.1456.4076.4266.753.7961.9785.1748.1089.3669.1873.568.232.0985.0233.1989.038.3.044h.204c.3057-.0067.6106.0338.904.12.5589.1637 1.0607.4811 1.448.916.3528.3929.6029.867.728 1.38.0844.5003.1378 1.0052.16 1.512 0 .136.272.236.576.228.304-.008.484-.108.496-.228l.068-.768v-.432c.0054-.1697-.0026-.3395-.024-.508-.0757-.7671-.3516-1.5009-.8-2.128-.4098-.5631-.9412-1.0268-1.5547-1.3564-.6136-.3296-1.2935-.5168-1.9893-.5476l.004-.02zm-5.468-.032h-.036v-.02c0-.02.032.016.036.02zm5.364.02v.024h-.032l.032-.024zM.591926 36.0239l.064.776c0 .136.28.244.588004.232.308-.012.5-.108.512-.232.02708-.5045.08586-1.0068.176-1.504.12631-.5101.37634-.9813.728-1.372.38767-.4336.88941-.7496 1.448-.912.29364-.0846.59851-.1237.904-.116h.212c.1024-.006.2041-.0207.304-.044.20287-.047.39629-.1282.572-.24.36599-.2312.64204-.5805.78243-.9901.14039-.4095.13671-.8547-.01043-1.2619-.07561-.2081-.18657-.4016-.328-.572-.06924-.0849-.14551-.1638-.228-.236-.076-.068-.196-.148-.204-.16-.2644-.1966-.49421-.4358-.68-.708-.3854-.5661-.55387-1.2522-.47452-1.9325.07934-.6803.40117-1.3092.90652-1.7715.51593-.471 1.18934-.7322 1.888-.7322.69865 0 1.37206.2612 1.888.7322.51617.455.84677 1.0841.92867 1.7673.0819.6832-.0906 1.3727-.4847 1.9367-.18697.2725-.41815.5118-.68397.708l-.088.064-.124.1c-.08066.0714-.15556.1489-.224.232-.13814.1698-.24635.3619-.32.568-.14301.4086-.14161.8538.00398 1.2615.14559.4076.42655.753.79602.9785.17487.1089.36692.1873.56797.232.0986.0233.199.038.3.044h.204c.3057-.0067.6107.0338.904.12.559.1637 1.0607.4811 1.448.916.3528.3929.6029.867.728 1.38.0831.5004.1352 1.0053.156 1.512 0 .136.272.236.576.228.304-.008.472-.108.496-.228l.068-.768v-.432c.0055-.1697-.0025-.3395-.024-.508-.0756-.7671-.3515-1.5009-.8-2.128-.4097-.5631-.9411-1.0268-1.5547-1.3564-.6135-.3296-1.2935-.5168-1.9893-.5476h-.048l.032-.024c.7234-.4798 1.305-1.1447 1.6842-1.9256.3792-.7809.5421-1.6491.4718-2.5144-.1046-1.2374-.6674-2.3912-1.5782-3.2354-.9108-.8442-2.10395-1.318-3.34577-1.3286-1.05573-.0097-2.08643.3214-2.93886.9443-.85244.6229-1.48109 1.5043-1.79249 2.5131-.3114 1.0088-.28893 2.0911.06408 3.0862.35301.995 1.01771 1.8495 1.89527 2.4364h.024c-.49238.021-.97837.1195-1.44.292-.8467.3148-1.58242.8712-2.116 1.6-.457685.6257-.741943 1.3612-.824004 2.132-.02136.1698-.029384.341-.024.512v.244l.004.232zm9.843974-4.992v.024h-.024l.024-.024zm-5.39197-.028h-.036s.028.004.036 0z" />
-  </SvgIcon>
+export const PeopleJoinedIcon = forwardRef<SVGSVGElement, SvgIconProps>(
+  function PeopleJoinedIcon(props, ref) {
+    return (
+      <SvgIcon {...props} ref={ref} viewBox="0 0 40 40">
+        <path d="M16.02 27.7962c.968-.176 2.604-.944 4.196-1.872.92.996 2.8 2 3.8 1.888.1254-.1513.2353-.3148.328-.488.0943-.142.1734-.2935.236-.452-.4-.932-2.164-2.124-3.48-2.456-.028-1.832-.212-3.6-.56-4.516-.1865-.0562-.3822-.0752-.576-.056-.1674-.0155-.3362.0035-.496.056-.332.868-.516 2.516-.556 4.256-1.504.936-2.868 1.96-3.46 2.704.0481.1934.1337.3756.252.536.0772.1533.1847.2894.316.4zM12.848 16.9679l.068.768c0 .136.28.244.588.232.308-.012.496-.112.496-.236.0271-.5045.0859-1.0069.176-1.504.1263-.5102.3764-.9814.728-1.372.3877-.4337.8894-.7497 1.448-.912.2937-.0846.5985-.1237.904-.116h.212c.1024-.006.2041-.0207.304-.044.2029-.0471.3963-.1283.572-.24.366-.2313.6421-.5806.7825-.9901.1404-.4095.1367-.8548-.0105-1.2619-.071-.2101-.1779-.4064-.316-.58-.0692-.0849-.1455-.1639-.228-.236-.076-.068-.196-.148-.204-.16-.2679-.1983-.5005-.4404-.688-.71601-.3854-.56617-.5538-1.25225-.4745-1.93253.0794-.68028.4012-1.30919.9065-1.77147.516-.47109 1.1894-.73228 1.888-.73228.6987 0 1.3721.26119 1.888.73228.5162.45498.8468 1.0841.9287 1.76729.0819.6832-.0906 1.37262-.4847 1.93671-.187.27243-.4181.51171-.684.70801l-.088.092-.124.1c-.0806.0713-.1555.1489-.224.232-.1381.1698-.2463.3619-.32.568-.143.4085-.1416.8538.004 1.2614.1456.4077.4266.7531.796.9786.1749.1088.367.1873.568.232.0986.0232.199.0379.3.044h.204c.3057-.0068.6107.0337.904.12.559.1636 1.0607.481 1.448.916.3528.3929.6029.867.728 1.38.083.499.1351 1.0026.156 1.508 0 .136.272.236.576.228.272 0 .484-.108.496-.228l.068-.768V16.5239c.017-.1742.0197-.3494.008-.524-.0756-.7672-.3515-1.501-.8-2.128-.4134-.5578-.9469-1.0156-1.561-1.3396-.6141-.3241-1.2931-.506-1.987-.5324h-.048l.032-.024c.7234-.4798 1.305-1.1448 1.6842-1.9257.3792-.78084.5421-1.64909.4718-2.51431-.1048-1.24018-.6699-2.39626-1.5841-3.24085-.9142-.8446-2.1113-1.31659-3.3559-1.32315-1.0557-.0098-2.0864.32137-2.9388.94427-.8525.6229-1.4811 1.50427-1.7925 2.51307-.3114 1.0088-.2889 2.09116.0641 3.08617.353.995 1.0177 1.8495 1.8952 2.4365h.024c-.4924.0209-.9783.1194-1.44.292-.8467.3148-1.5824.8711-2.116 1.6-.4687.6304-.7602 1.3749-.844 2.156-.0213.1698-.0293.341-.024.512v.244l.02.212zm9.844-4.996v.024h-.024l.024-.024zm-5.392-.028h-.036s.032.004.04.004l-.004-.004zM35.0481 31.0399h-.048l.032-.024c.7262-.4786 1.3106-1.1436 1.6919-1.9253.3814-.7818.5458-1.6516.4761-2.5187-.1106-1.2358-.6781-2.386-1.5917-3.2257-.9136-.8396-2.1075-1.3082-3.3483-1.3143-1.0558-.0097-2.0865.3214-2.9389.9443-.8524.6229-1.4811 1.5043-1.7925 2.5131-.3114 1.0088-.2889 2.0911.0641 3.0862.353.995 1.0177 1.8495 1.8953 2.4364h.024c-.4924.021-.9784.1195-1.44.292-.8467.3148-1.5825.8712-2.116 1.6-.4577.6257-.742 1.3612-.824 2.132-.0214.1698-.0294.341-.024.512V35.9959l.068.804c0 .136.28.244.588.232.308-.012.5-.108.512-.232.0271-.5045.0858-1.0068.176-1.504.1263-.5101.3763-.9813.728-1.372.3865-.433.8868-.749 1.444-.912.2936-.0846.5985-.1237.904-.116h.212c.1024-.006.2041-.0207.304-.044.2028-.047.3962-.1282.572-.24.366-.2312.642-.5805.7824-.9901.1404-.4095.1367-.8547-.0104-1.2619-.0756-.2081-.1866-.4016-.328-.572-.0693-.0849-.1456-.1638-.228-.236-.076-.068-.196-.148-.204-.16-.2644-.1966-.4942-.4358-.68-.708-.3854-.5661-.5539-1.2522-.4746-1.9325.0794-.6803.4012-1.3092.9066-1.7715.5159-.471 1.1893-.7322 1.888-.7322.6986 0 1.372.2612 1.888.7322.5162.455.8468 1.0841.9286 1.7673.0819.6832-.0906 1.3727-.4846 1.9367-.187.2725-.4182.5118-.684.708l-.088.064-.124.1c-.0807.0714-.1556.1489-.224.232-.1382.1698-.2464.3619-.32.568-.1431.4086-.1416.8538.0039 1.2615.1456.4076.4266.753.7961.9785.1748.1089.3669.1873.568.232.0985.0233.1989.038.3.044h.204c.3057-.0067.6106.0338.904.12.5589.1637 1.0607.4811 1.448.916.3528.3929.6029.867.728 1.38.0844.5003.1378 1.0052.16 1.512 0 .136.272.236.576.228.304-.008.484-.108.496-.228l.068-.768v-.432c.0054-.1697-.0026-.3395-.024-.508-.0757-.7671-.3516-1.5009-.8-2.128-.4098-.5631-.9412-1.0268-1.5547-1.3564-.6136-.3296-1.2935-.5168-1.9893-.5476l.004-.02zm-5.468-.032h-.036v-.02c0-.02.032.016.036.02zm5.364.02v.024h-.032l.032-.024zM.591926 36.0239l.064.776c0 .136.28.244.588004.232.308-.012.5-.108.512-.232.02708-.5045.08586-1.0068.176-1.504.12631-.5101.37634-.9813.728-1.372.38767-.4336.88941-.7496 1.448-.912.29364-.0846.59851-.1237.904-.116h.212c.1024-.006.2041-.0207.304-.044.20287-.047.39629-.1282.572-.24.36599-.2312.64204-.5805.78243-.9901.14039-.4095.13671-.8547-.01043-1.2619-.07561-.2081-.18657-.4016-.328-.572-.06924-.0849-.14551-.1638-.228-.236-.076-.068-.196-.148-.204-.16-.2644-.1966-.49421-.4358-.68-.708-.3854-.5661-.55387-1.2522-.47452-1.9325.07934-.6803.40117-1.3092.90652-1.7715.51593-.471 1.18934-.7322 1.888-.7322.69865 0 1.37206.2612 1.888.7322.51617.455.84677 1.0841.92867 1.7673.0819.6832-.0906 1.3727-.4847 1.9367-.18697.2725-.41815.5118-.68397.708l-.088.064-.124.1c-.08066.0714-.15556.1489-.224.232-.13814.1698-.24635.3619-.32.568-.14301.4086-.14161.8538.00398 1.2615.14559.4076.42655.753.79602.9785.17487.1089.36692.1873.56797.232.0986.0233.199.038.3.044h.204c.3057-.0067.6107.0338.904.12.559.1637 1.0607.4811 1.448.916.3528.3929.6029.867.728 1.38.0831.5004.1352 1.0053.156 1.512 0 .136.272.236.576.228.304-.008.472-.108.496-.228l.068-.768v-.432c.0055-.1697-.0025-.3395-.024-.508-.0756-.7671-.3515-1.5009-.8-2.128-.4097-.5631-.9411-1.0268-1.5547-1.3564-.6135-.3296-1.2935-.5168-1.9893-.5476h-.048l.032-.024c.7234-.4798 1.305-1.1447 1.6842-1.9256.3792-.7809.5421-1.6491.4718-2.5144-.1046-1.2374-.6674-2.3912-1.5782-3.2354-.9108-.8442-2.10395-1.318-3.34577-1.3286-1.05573-.0097-2.08643.3214-2.93886.9443-.85244.6229-1.48109 1.5043-1.79249 2.5131-.3114 1.0088-.28893 2.0911.06408 3.0862.35301.995 1.01771 1.8495 1.89527 2.4364h.024c-.49238.021-.97837.1195-1.44.292-.8467.3148-1.58242.8712-2.116 1.6-.457685.6257-.741943 1.3612-.824004 2.132-.02136.1698-.029384.341-.024.512v.244l.004.232zm9.843974-4.992v.024h-.024l.024-.024zm-5.39197-.028h-.036s.028.004.036 0z" />
+      </SvgIcon>
+    );
+  }
 );
@@ -1,7 +1,12 @@
 import { SvgIcon, SvgIconProps } from '@mui/material';
+import { forwardRef } from 'react';
 
-export const ProjectManagerIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props} viewBox="0 0 24 24">
-    <path d="M10.67 13.02c-.22-.01-.44-.02-.67-.02-2.42 0-4.68.67-6.61 1.82-.88.52-1.39 1.5-1.39 2.53V20h9.26c-.79-1.13-1.26-2.51-1.26-4 0-1.07.25-2.07.67-2.98ZM10 12c2.2091 0 4-1.7909 4-4 0-2.20914-1.7909-4-4-4-2.20914 0-4 1.79086-4 4 0 2.2091 1.79086 4 4 4ZM16.5023 21c-2.486-.0007-4.5013-2.0177-4.5023-4.5044.0003-1.0988.3959-2.102 1.0503-2.882.4137-.1922.8681-.2936 1.3378-.2936.5917 0 1.159.1606 1.6515.4608-.7219.682-1.1727 1.6486-1.1727 2.7208 0 2.0663 1.6745 3.7418 3.7398 3.7418.1448 0 .2871-.008.4274-.0241-.7229.4934-1.5942.78-2.5318.7807Zm-2.536-8.2196c.1402-.0161.2826-.0242.4274-.0242 2.0652 0 3.7398 1.6755 3.7398 3.7419 0 1.0722-.4505 2.0387-1.1727 2.7207.4928.3006 1.0597.4612 1.6515.4612.4697 0 .9244-.1014 1.3378-.2936.654-.7796 1.0496-1.7832 1.0499-2.882-.001-2.4867-2.0163-4.5034-4.5019-4.5044-.9377.001-1.8089.2876-2.5318.7804Z" />
-  </SvgIcon>
+export const ProjectManagerIcon = forwardRef<SVGSVGElement, SvgIconProps>(
+  function ProjectManagerIcon(props, ref) {
+    return (
+      <SvgIcon {...props} ref={ref} viewBox="0 0 24 24">
+        <path d="M10.67 13.02c-.22-.01-.44-.02-.67-.02-2.42 0-4.68.67-6.61 1.82-.88.52-1.39 1.5-1.39 2.53V20h9.26c-.79-1.13-1.26-2.51-1.26-4 0-1.07.25-2.07.67-2.98ZM10 12c2.2091 0 4-1.7909 4-4 0-2.20914-1.7909-4-4-4-2.20914 0-4 1.79086-4 4 0 2.2091 1.79086 4 4 4ZM16.5023 21c-2.486-.0007-4.5013-2.0177-4.5023-4.5044.0003-1.0988.3959-2.102 1.0503-2.882.4137-.1922.8681-.2936 1.3378-.2936.5917 0 1.159.1606 1.6515.4608-.7219.682-1.1727 1.6486-1.1727 2.7208 0 2.0663 1.6745 3.7418 3.7398 3.7418.1448 0 .2871-.008.4274-.0241-.7229.4934-1.5942.78-2.5318.7807Zm-2.536-8.2196c.1402-.0161.2826-.0242.4274-.0242 2.0652 0 3.7398 1.6755 3.7398 3.7419 0 1.0722-.4505 2.0387-1.1727 2.7207.4928.3006 1.0597.4612 1.6515.4612.4697 0 .9244-.1014 1.3378-.2936.654-.7796 1.0496-1.7832 1.0499-2.882-.001-2.4867-2.0163-4.5034-4.5019-4.5044-.9377.001-1.8089.2876-2.5318.7804Z" />
+      </SvgIcon>
+    );
+  }
 );
@@ -1,6 +1,6 @@
 import { Grading, Translate } from '@mui/icons-material';
 import { SvgIconProps } from '@mui/material';
-import { ComponentType } from 'react';
+import { ComponentType, forwardRef } from 'react';
 import { Role } from '../api/schema.graphql';
 import { extendSx } from '../common';
 import { PeopleJoinedIcon } from './Icons';
@@ -19,30 +19,36 @@ interface RoleIconProps extends SvgIconProps {
   variantRole?: Role | null;
 }
 
-export const RoleIcon = ({ variantRole: role, sx, ...rest }: RoleIconProps) => {
-  if (!role) {
-    return null;
-  }
+export const RoleIcon = forwardRef<SVGSVGElement, RoleIconProps>(
+  function RoleIcon({ variantRole: role, sx, ...rest }, ref) {
+    if (!role) {
+      return null;
+    }
 
-  const Icon = variantToIconMapper[role];
+    const Icon = variantToIconMapper[role];
+    if (!Icon) {
+      return null;
+    }
 
-  return Icon ? (
-    <Icon
-      sx={[
-        (theme) => {
-          const color = theme.palette.roles[role]?.main;
-          return {
-            backgroundColor: color,
-            color: color ? theme.palette.getContrastText(color) : undefined,
-            marginRight: 1,
-            padding: 1,
-            fontSize: 48,
-            borderRadius: 2,
-          };
-        },
-        ...extendSx(sx),
-      ]}
-      {...rest}
-    />
-  ) : null;
-};
+    return (
+      <Icon
+        sx={[
+          (theme) => {
+            const color = theme.palette.roles[role]?.main;
+            return {
+              backgroundColor: color,
+              color: color ? theme.palette.getContrastText(color) : undefined,
+              marginRight: 1,
+              padding: 1,
+              fontSize: 48,
+              borderRadius: 2,
+            };
+          },
+          ...extendSx(sx),
+        ]}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
@@ -1,7 +1,10 @@
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, Tooltip } from '@mui/material';
 import { GridRenderCellParams as RenderCellParams } from '@mui/x-data-grid';
-import { VariantResponseFragment as VariantResponse } from '~/common/fragments';
+import { StyleProps } from '~/common';
+import {
+  VariantFragment as Variant,
+  VariantResponseFragment as VariantResponse,
+} from '~/common/fragments';
 import { RoleIcon as BaseRoleIcon } from '../../../components/RoleIcon';
 import { ProgressReportsDataGridRowFragment as ProgressReport } from './progressReportsDataGridRow.graphql';
 import { RichTextCell } from './RichTextCell';
@@ -11,12 +14,11 @@ type CellParams = RenderCellParams<ProgressReport, VariantResponse>;
 export const VariantResponseCell = ({ value, ...props }: CellParams) => {
   if (!value) return null;
 
-  const { variant } = value;
   const response = value.response.value!;
   return (
     <Box my={1}>
-      <RoleIcon
-        variantRole={variant.responsibleRole}
+      <VariantIcon
+        variant={value.variant}
         sx={{ fontSize: 36, float: 'left', mr: 1 }}
       />
       <RichTextCell value={response} {...props} />
@@ -36,14 +38,16 @@ export const VariantResponseIconCell = ({ value }: CellParams) => {
         justifyContent: 'center',
       }}
     >
-      <RoleIcon
-        variantRole={value.variant.responsibleRole}
-        sx={{ fontSize: 30 }}
-      />
+      <VariantIcon variant={value.variant} sx={{ fontSize: 30 }} />
     </Box>
   );
 };
 
-const RoleIcon = styled(BaseRoleIcon)({
-  margin: 0,
-});
+const VariantIcon = ({
+  variant,
+  ...props
+}: StyleProps & { variant: Variant }) => (
+  <Tooltip title={variant.label}>
+    <BaseRoleIcon variantRole={variant.responsibleRole} {...props} />
+  </Tooltip>
+);
@@ -43,25 +43,15 @@ fragment progressReportsDataGridRow on ProgressReport {
     items {
       id
       responses {
-        response {
-          value
-        }
-        variant {
-          responsibleRole
-        }
+        ...variantResponse
       }
     }
   }
   communityStories {
     items {
       id
       responses {
-        response {
-          value
-        }
-        variant {
-          responsibleRole
-        }
+        ...variantResponse
       }
     }
   }