Implement chip for rendering variants

Also unify and reuse the same component for displaying combos and variants Change-Id: I357390f2be96189f79b0a1d3c5cb3589cb69dca1
google-marketing-solutions · May 2, 2024 · d408e4a · d408e4a
1 parent 32c3a6d
commit d408e4a
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 67 deletions.
diff --git a/ui/src/ui/src/app/api-calls/api-calls.mock.service.ts b/ui/src/ui/src/app/api-calls/api-calls.mock.service.ts
@@ -55,7 +55,7 @@ export class ApiCallsService implements ApiCalls {
               );
             } else if (url.endsWith('/combos.json')) {
               subscriber.next(
-                `data:application/json;base64,ewogICIxIjogewogICAgInRpdGxlIjogIkRpZSBXZWx0IGVudGRlY2tlbiBtaXQgTHVmdGhhbnNhIiwKICAgICJkZXNjcmlwdGlvbiI6ICJUaGlzIGNvbWJpbmF0aW9uIHN0YXJ0cyB3aXRoIGEgc3Ryb25nIHNjZW5lIHRoYXQgY2FwdHVyZXMgdGhlIHZpZXdlcidzIGF0dGVudGlvbiB3aXRoIG9mZi1zY3JlZW4gc3BlZWNoIGFuZCBhIHNlcmllcyBvZiBwZW9wbGUgYW5zd2VyaW5nIHZpZGVvIGNhbGxzLiBJdCB0aGVuIHRyYW5zaXRpb25zIHRvIGEgc2NlbmUgb2YgZnJpZW5kcyBoYXZpbmcgZGlubmVyIGluIGEgcmVzdGF1cmFudCwgd2hpY2ggaXMgdmlzdWFsbHkgYXBwZWFsaW5nIGFuZCByZWxhdGFibGUuIFRoZSBjb21iaW5hdGlvbiBhbHNvIGluY2x1ZGVzIHN0dW5uaW5nIGFlcmlhbCB2aWV3cyBvZiBhIHBpbmsgbGFrZSwgYSBjYW55b24sIGFuZCBDYXBwYWRvY2lhLCBUdXJrZXksIHdoaWNoIGFyZSBhbGwgdmlzdWFsbHkgYXBwZWFsaW5nIGFuZCBtZW1vcmFibGUuIFRoZSBjb21iaW5hdGlvbiBlbmRzIHdpdGggdGhlIGxhc3Qgc2NlbmUgb2YgdGhlIG9yaWdpbmFsIGFkLCB3aGljaCBpcyBhIGNvbW1lcmNpYWwgZm9yIEx1ZnRoYW5zYSBhaXJsaW5lcywgc2hvd2luZyB2YXJpb3VzIGRlc3RpbmF0aW9ucyBhbmQgcGVvcGxlIHVzaW5nIHRoZWlyIHNlcnZpY2VzLiBUaGlzIHNjZW5lIGluY2x1ZGVzIHRoZSBicmFuZCdzIG5hbWUsIGxvZ28sIHByb2R1Y3QsIHRhZ2xpbmUsIGFuZCBhIGNsZWFyIGNhbGwtdG8tYWN0aW9uLiIsCiAgICAic2NvcmUiOiAiNSIsCiAgICAicmVhc29uaW5nIjogIkE6IFRoZSBjb21iaW5hdGlvbiBzdGFydHMgd2l0aCBhIHN0cm9uZyBzY2VuZSB0aGF0IGNhcHR1cmVzIHRoZSB2aWV3ZXIncyBhdHRlbnRpb24gd2l0aCBvZmYtc2NyZWVuIHNwZWVjaCBhbmQgYSBzZXJpZXMgb2YgcGVvcGxlIGFuc3dlcmluZyB2aWRlbyBjYWxscy5cbkI6IFRoZSBjb21iaW5hdGlvbiBzaG93cyB0aGUgYnJhbmQncyBuYW1lLCBsb2dvLCBwcm9kdWN0LCB0YWdsaW5lLCBhbmQgYSBjbGVhciBjYWxsLXRvLWFjdGlvbiBpbiB0aGUgbGFzdCA1IHNlY29uZHMuXG5DOiBUaGUgY29tYmluYXRpb24gY29udGFpbnMgcGVvcGxlIGFuZCB2aXNpYmxlIGZhY2VzLCBpZGVhbGx5IGNsb3NlLXVwcywgd2l0aGluIHRoZSBmaXJzdCA1IHNlY29uZHMuXG5EOiBUaGUgY29tYmluYXRpb24gY29udGFpbnMgYSBjbGVhciBub3RhYmxlIG9uLXNjcmVlbiBjYWxsLXRvLWFjdGlvbiBpbiB0aGUgbGFzdCA1IHNlY29uZHMgdGhhdCBkcml2ZXMgdGhlIHRhcmdldCBhdWRpZW5jZSBvZiB0aGlzIGFkIHRvIGVuZ2FnZSB3aXRoIHRoZSBhc3NvY2lhdGVkIGJyYW5kIG9yIHByb2R1Y3QuIiwKICAgICJpZCI6ICIxIiwKICAgICJ2YXJpYW50cyI6IHsKICAgICAgImxhbmRzY2FwZSI6ICJnczovL3ZpZ2VuYWlyX3Rlc3RpbmcvdXBsb2Fkcy8xNzA2Nzk1NTk1OTcyL2NvbWJvcy9jb21ib18xX2wubXA0IiwKICAgICAgInNxdWFyZSI6ICJnczovL3ZpZ2VuYWlyX3Rlc3RpbmcvdXBsb2Fkcy8xNzA2Nzk1NTk1OTcyL2NvbWJvcy9jb21ib18xX3MubXA0IiwKICAgICAgInZlcnRpY2FsIjogImdzOi8vdmlnZW5haXJfdGVzdGluZy91cGxvYWRzLzE3MDY3OTU1OTU5NzIvY29tYm9zL2NvbWJvXzFfdi5tcDQiLAogICAgICAib3ZlcmxheSI6ICJnczovL3ZpZ2VuYWlyX3Rlc3RpbmcvdXBsb2Fkcy8xNzA2Nzk1NTk1OTcyL2NvbWJvcy9jb21ib18xX28ubXA0IgogICAgfQogIH0sCiAgIjIiOiB7CiAgICAidGl0bGUiOiAiTHVmdGhhbnNhOiBFaW5lIFdlbHQgdm9sbGVyIE1cdTAwZjZnbGljaGtlaXRlbiIsCiAgICAiZGVzY3JpcHRpb24iOiAiVGhpcyBjb21iaW5hdGlvbiBzdGFydHMgd2l0aCBhIHZpc3VhbGx5IGFwcGVhbGluZyBhbmQgcmVsYXRhYmxlIHNjZW5lIG9mIGZyaWVuZHMgaGF2aW5nIGRpbm5lciBpbiBhIHJlc3RhdXJhbnQuIEl0IHRoZW4gdHJhbnNpdGlvbnMgdG8gc3R1bm5pbmcgYWVyaWFsIHZpZXdzIG9mIGEgcGluayBsYWtlLCBhIGNhbnlvbiwgYW5kIENhcHBhZG9jaWEsIFR1cmtleSwgd2hpY2ggYXJlIGFsbCB2aXN1YWxseSBhcHBlYWxpbmcgYW5kIG1lbW9yYWJsZS4gVGhlIGNvbWJpbmF0aW9uIGFsc28gaW5jbHVkZXMgYSBzY2VuZSBvZiBhIHlvdW5nIGdpcmwgc3RhbmRpbmcgb24gYSBtb3VudGFpbnRvcCwgbG9va2luZyBvdXQgYXQgdGhlIHZpZXcsIHdoaWNoIGlzIGluc3BpcmluZyBhbmQgYXNwaXJhdGlvbmFsLiBUaGUgY29tYmluYXRpb24gZW5kcyB3aXRoIHRoZSBsYXN0IHNjZW5lIG9mIHRoZSBvcmlnaW5hbCBhZCwgd2hpY2ggaXMgYSBjb21tZXJjaWFsIGZvciBMdWZ0aGFuc2EgYWlybGluZXMsIHNob3dpbmcgdmFyaW91cyBkZXN0aW5hdGlvbnMgYW5kIHBlb3BsZSB1c2luZyB0aGVpciBzZXJ2aWNlcy4gVGhpcyBzY2VuZSBpbmNsdWRlcyB0aGUgYnJhbmQncyBuYW1lLCBsb2dvLCBwcm9kdWN0LCB0YWdsaW5lLCBhbmQgYSBjbGVhciBjYWxsLXRvLWFjdGlvbi4iLAogICAgInNjb3JlIjogIjUiLAogICAgInJlYXNvbmluZyI6ICJBOiBUaGUgY29tYmluYXRpb24gc3RhcnRzIHdpdGggYSB2aXN1YWxseSBhcHBlYWxpbmcgYW5kIHJlbGF0YWJsZSBzY2VuZSBvZiBmcmllbmRzIGhhdmluZyBkaW5uZXIgaW4gYSByZXN0YXVyYW50LlxuQjogVGhlIGNvbWJpbmF0aW9uIHNob3dzIHRoZSBicmFuZCdzIG5hbWUsIGxvZ28sIHByb2R1Y3QsIHRhZ2xpbmUsIGFuZCBhIGNsZWFyIGNhbGwtdG8tYWN0aW9uIGluIHRoZSBsYXN0IDUgc2Vjb25kcy5cbkM6IFRoZSBjb21iaW5hdGlvbiBjb250YWlucyBwZW9wbGUgYW5kIHZpc2libGUgZmFjZXMsIGlkZWFsbHkgY2xvc2UtdXBzLCB3aXRoaW4gdGhlIGZpcnN0IDUgc2Vjb25kcy5cbkQ6IFRoZSBjb21iaW5hdGlvbiBjb250YWlucyBhIGNsZWFyIG5vdGFibGUgb24tc2NyZWVuIGNhbGwtdG8tYWN0aW9uIGluIHRoZSBsYXN0IDUgc2Vjb25kcyB0aGF0IGRyaXZlcyB0aGUgdGFyZ2V0IGF1ZGllbmNlIG9mIHRoaXMgYWQgdG8gZW5nYWdlIHdpdGggdGhlIGFzc29jaWF0ZWQgYnJhbmQgb3IgcHJvZHVjdC4iLAogICAgImlkIjogIjIiLAogICAgInZhcmlhbnRzIjogewogICAgICAibGFuZHNjYXBlIjogImdzOi8vdmlnZW5haXJfdGVzdGluZy91cGxvYWRzLzE3MDY3OTU1OTU5NzIvY29tYm9zL2NvbWJvXzJfbC5tcDQiLAogICAgICAic3F1YXJlIjogImdzOi8vdmlnZW5haXJfdGVzdGluZy91cGxvYWRzLzE3MDY3OTU1OTU5NzIvY29tYm9zL2NvbWJvXzJfcy5tcDQiLAogICAgICAidmVydGljYWwiOiAiZ3M6Ly92aWdlbmFpcl90ZXN0aW5nL3VwbG9hZHMvMTcwNjc5NTU5NTk3Mi9jb21ib3MvY29tYm9fMl92Lm1wNCIsCiAgICAgICJvdmVybGF5IjogImdzOi8vdmlnZW5haXJfdGVzdGluZy91cGxvYWRzLzE3MDY3OTU1OTU5NzIvY29tYm9zL2NvbWJvXzJfby5tcDQiCiAgICB9CiAgfSwKICAiMyI6IHsKICAgICJ0aXRsZSI6ICJMdWZ0aGFuc2E6IERpZSBXZWx0IHdhcnRldCBhdWYgZGljaCIsCiAgICAiZGVzY3JpcHRpb24iOiAiVGhpcyBjb21iaW5hdGlvbiBzdGFydHMgd2l0aCBhIHN0cm9uZyBzY2VuZSB0aGF0IGNhcHR1cmVzIHRoZSB2aWV3ZXIncyBhdHRlbnRpb24gd2l0aCBvZmYtc2NyZWVuIHNwZWVjaCBhbmQgYSBzZXJpZXMgb2YgcGVvcGxlIGFuc3dlcmluZyB2aWRlbyBjYWxscy4gSXQgdGhlbiB0cmFuc2l0aW9ucyB0byBzdHVubmluZyBhZXJpYWwgdmlld3Mgb2YgYSBwaW5rIGxha2UsIGEgY2FueW9uLCBDYXBwYWRvY2lhLCBUdXJrZXksIGFuZCBhIHlvdW5nIGdpcmwgc3RhbmRpbmcgb24gYSBtb3VudGFpbnRvcCwgbG9va2luZyBvdXQgYXQgdGhlIHZpZXcuIFRoZXNlIHNjZW5lcyBhcmUgYWxsIHZpc3VhbGx5IGFwcGVhbGluZyBhbmQgbWVtb3JhYmxlLiBUaGUgY29tYmluYXRpb24gZW5kcyB3aXRoIHRoZSBsYXN0IHNjZW5lIG9mIHRoZSBvcmlnaW5hbCBhZCwgd2hpY2ggaXMgYSBjb21tZXJjaWFsIGZvciBMdWZ0aGFuc2EgYWlybGluZXMsIHNob3dpbmcgdmFyaW91cyBkZXN0aW5hdGlvbnMgYW5kIHBlb3BsZSB1c2luZyB0aGVpciBzZXJ2aWNlcy4gVGhpcyBzY2VuZSBpbmNsdWRlcyB0aGUgYnJhbmQncyBuYW1lLCBsb2dvLCBwcm9kdWN0LCB0YWdsaW5lLCBhbmQgYSBjbGVhciBjYWxsLXRvLWFjdGlvbi4iLAogICAgInNjb3JlIjogIjQiLAogICAgInJlYXNvbmluZyI6ICJBOiBUaGUgY29tYmluYXRpb24gc3RhcnRzIHdpdGggYSBzdHJvbmcgc2NlbmUgdGhhdCBjYXB0dXJlcyB0aGUgdmlld2VyJ3MgYXR0ZW50aW9uIHdpdGggb2ZmLXNjcmVlbiBzcGVlY2ggYW5kIGEgc2VyaWVzIG9mIHBlb3BsZSBhbnN3ZXJpbmcgdmlkZW8gY2FsbHMuXG5COiBUaGUgY29tYmluYXRpb24gc2hvd3MgdGhlIGJyYW5kJ3MgbmFtZSwgbG9nbywgcHJvZHVjdCwgdGFnbGluZSwgYW5kIGEgY2xlYXIgY2FsbC10by1hY3Rpb24gaW4gdGhlIGxhc3QgNSBzZWNvbmRzLlxuQzogVGhlIGNvbWJpbmF0aW9uIGNvbnRhaW5zIHBlb3BsZSBhbmQgdmlzaWJsZSBmYWNlcywgaWRlYWxseSBjbG9zZS11cHMsIHdpdGhpbiB0aGUgZmlyc3QgNSBzZWNvbmRzLlxuRDogVGhlIGNvbWJpbmF0aW9uIGNvbnRhaW5zIGEgY2xlYXIgbm90YWJsZSBvbi1zY3JlZW4gY2FsbC10by1hY3Rpb24gaW4gdGhlIGxhc3QgNSBzZWNvbmRzIHRoYXQgZHJpdmVzIHRoZSB0YXJnZXQgYXVkaWVuY2Ugb2YgdGhpcyBhZCB0byBlbmdhZ2Ugd2l0aCB0aGUgYXNzb2NpYXRlZCBicmFuZCBvciBwcm9kdWN0LiIsCiAgICAiaWQiOiAiMyIsCiAgICAidmFyaWFudHMiOiB7CiAgICAgICJsYW5kc2NhcGUiOiAiZ3M6Ly92aWdlbmFpcl90ZXN0aW5nL3VwbG9hZHMvMTcwNjc5NTU5NTk3Mi9jb21ib3MvY29tYm9fM19sLm1wNCIsCiAgICAgICJzcXVhcmUiOiAiZ3M6Ly92aWdlbmFpcl90ZXN0aW5nL3VwbG9hZHMvMTcwNjc5NTU5NTk3Mi9jb21ib3MvY29tYm9fM19zLm1wNCIsCiAgICAgICJ2ZXJ0aWNhbCI6ICJnczovL3ZpZ2VuYWlyX3Rlc3RpbmcvdXBsb2Fkcy8xNzA2Nzk1NTk1OTcyL2NvbWJvcy9jb21ib18zX3YubXA0IiwKICAgICAgIm92ZXJsYXkiOiAiZ3M6Ly92aWdlbmFpcl90ZXN0aW5nL3VwbG9hZHMvMTcwNjc5NTU5NTk3Mi9jb21ib3MvY29tYm9fM19vLm1wNCIKICAgIH0KICB9Cn0=`
+                `data:application/json;base64,ewogICIxIjogewogICAgInZhcmlhbnRfaWQiOiAxLAogICAgImF2X3NlZ21lbnRzIjogewogICAgICAiMiI6IHsKICAgICAgICAic3RhcnRfcyI6IDE3LjA0LAogICAgICAgICJhdl9zZWdtZW50X2lkIjogMiwKICAgICAgICAiZW5kX3MiOiAyNi40CiAgICAgIH0sCiAgICAgICIzIjogewogICAgICAgICJlbmRfcyI6IDI3LjI0LAogICAgICAgICJzdGFydF9zIjogMjYuNDQsCiAgICAgICAgImF2X3NlZ21lbnRfaWQiOiAzCiAgICAgIH0sCiAgICAgICI0IjogewogICAgICAgICJzdGFydF9zIjogMjcuMjgsCiAgICAgICAgImVuZF9zIjogMjkuMjQsCiAgICAgICAgImF2X3NlZ21lbnRfaWQiOiA0CiAgICAgIH0sCiAgICAgICI1IjogewogICAgICAgICJhdl9zZWdtZW50X2lkIjogNSwKICAgICAgICAiZW5kX3MiOiAzNi43NiwKICAgICAgICAic3RhcnRfcyI6IDI5LjI4CiAgICAgIH0sCiAgICAgICI2IjogewogICAgICAgICJhdl9zZWdtZW50X2lkIjogNiwKICAgICAgICAic3RhcnRfcyI6IDM2LjgsCiAgICAgICAgImVuZF9zIjogNDQuOTYKICAgICAgfQogICAgfSwKICAgICJzY29yZV9yZWFzb25pbmciOiAiKiBBOiBUaGUgY29tYmluYXRpb24gc3RhcnRzIHdpdGggdGhlIGNvdXBsZSdzIGRpbm5lciBzY2VuZSBhbmQgb2ZmLXNjcmVlbiBzcGVlY2ggd2l0aGluIHRoZSBmaXJzdCA1IHNlY29uZHMuXG4qIEI6IFRoZSBMdWZ0aGFuc2EgbG9nbyBpcyBkaXNwbGF5ZWQgaW4gdGhlIGxhc3Qgc2NlbmUuXG4qIEM6IFRoZSBjb21iaW5hdGlvbiBmZWF0dXJlcyBwZW9wbGUgYW5kIHZpc2libGUgZmFjZXMgaW4gdGhlIGRpbm5lciBzY2VuZS5cbiogRDogVGhlIHRhZ2xpbmUgXCJUaGVyZSdzIG1vcmUgdG8gbGlmZSB0aGFuIGp1c3QgbGl2aW5nXCIgY291bGQgYmUgY29uc2lkZXJlZCBhIGNhbGwtdG8tYWN0aW9uLCBidXQgaXQgaXMgbm90IGFzIGRpcmVjdCBhcyB0aGUgXCJTYXkgeWVzIHRvIHRoZSB3b3JsZFwiIHRhZ2xpbmUuIiwKICAgICJzY29yZSI6IDMsCiAgICAidGl0bGUiOiAiTHVmdGhhbnNhOiBFbnRkZWNrZSBkaWUgV2VsdCBuZXUiLAogICAgImRlc2NyaXB0aW9uIjogIlRoaXMgY29tYmluYXRpb24gZm9jdXNlcyBvbiB0aGUgdHJhdmVsIGRlc3RpbmF0aW9ucyBhbmQgYmVhdXRpZnVsIHNjZW5lcnksIHNob3djYXNpbmcgdGhlIHZhcmlldHkgb2YgZXhwZXJpZW5jZXMgdGhhdCBMdWZ0aGFuc2EgY2FuIG9mZmVyLiBUaGUgb2ZmLXNjcmVlbiBzcGVlY2ggaW4gdGhlIGRpbm5lciBzY2VuZSBwcm92aWRlcyBhIHRyYW5zaXRpb24gYmV0d2VlbiB0aGUgZGlmZmVyZW50IHNjZW5lcy4iLAogICAgInZhcmlhbnRzIjogewogICAgICAiaG9yaXpvbnRhbCI6ICJodHRwczovL3N0b3JhZ2UubXRscy5jbG91ZC5nb29nbGUuY29tL2dwcy1nZW5lcmF0aXZlLWFpLXZpZ2VuYWlyL0x1ZnRoYW5zYS5tcDQtLTE3MTI0MDMwNTUzMTctLWRuTndRR2R2YjJkc1pTNWpiMjA9LzE3MTQ2NTg0NTEwNzktY29tYm9zL2NvbWJvXzJfaC5tcDQiLAogICAgICAidmVydGljYWwiOiAiaHR0cHM6Ly9zdG9yYWdlLm10bHMuY2xvdWQuZ29vZ2xlLmNvbS9ncHMtZ2VuZXJhdGl2ZS1haS12aWdlbmFpci9MdWZ0aGFuc2EubXA0LS0xNzEyNDAzMDU1MzE3LS1kbk53UUdkdmIyZHNaUzVqYjIwPS8xNzE0NjU4NDUxMDc5LWNvbWJvcy9jb21ib18yX3YubXA0IiwKICAgICAgInNxdWFyZSI6ICJodHRwczovL3N0b3JhZ2UubXRscy5jbG91ZC5nb29nbGUuY29tL2dwcy1nZW5lcmF0aXZlLWFpLXZpZ2VuYWlyL0x1ZnRoYW5zYS5tcDQtLTE3MTI0MDMwNTUzMTctLWRuTndRR2R2YjJkc1pTNWpiMjA9LzE3MTQ2NTg0NTEwNzktY29tYm9zL2NvbWJvXzJfcy5tcDQiCiAgICB9CiAgfSwKICAiMCI6IHsKICAgICJ2YXJpYW50X2lkIjogMCwKICAgICJhdl9zZWdtZW50cyI6IHsKICAgICAgIjEiOiB7CiAgICAgICAgInN0YXJ0X3MiOiAwLAogICAgICAgICJhdl9zZWdtZW50X2lkIjogMSwKICAgICAgICAiZW5kX3MiOiAxNwogICAgICB9LAogICAgICAiMiI6IHsKICAgICAgICAiYXZfc2VnbWVudF9pZCI6IDIsCiAgICAgICAgInN0YXJ0X3MiOiAxNy4wNCwKICAgICAgICAiZW5kX3MiOiAyNi40CiAgICAgIH0sCiAgICAgICI0IjogewogICAgICAgICJzdGFydF9zIjogMjcuMjgsCiAgICAgICAgImF2X3NlZ21lbnRfaWQiOiA0LAogICAgICAgICJlbmRfcyI6IDI5LjI0CiAgICAgIH0sCiAgICAgICI2IjogewogICAgICAgICJzdGFydF9zIjogMzYuOCwKICAgICAgICAiZW5kX3MiOiA0NC45NiwKICAgICAgICAiYXZfc2VnbWVudF9pZCI6IDYKICAgICAgfQogICAgfSwKICAgICJzY29yZSI6IDQsCiAgICAic2NvcmVfcmVhc29uaW5nIjogIiogQTogVGhlIGNvbWJpbmF0aW9uIHN0YXJ0cyBzdHJvbmcgd2l0aCB0aGUgdmlkZW8gY2FsbHMgc2NlbmUgYW5kIG9mZi1zY3JlZW4gc3BlZWNoIHdpdGhpbiB0aGUgZmlyc3QgNSBzZWNvbmRzLlxuKiBCOiBUaGUgTHVmdGhhbnNhIGxvZ28gYW5kIHRhZ2xpbmUgYXJlIHByb21pbmVudGx5IGRpc3BsYXllZCBpbiB0aGUgbGFzdCBzY2VuZS5cbiogQzogVGhlIGNvbWJpbmF0aW9uIGZlYXR1cmVzIHBlb3BsZSBhbmQgdmlzaWJsZSBmYWNlcyBpbiB0aGUgdmlkZW8gY2FsbHMgYW5kIGRpbm5lciBzY2VuZXMuXG4qIEQ6IFRoZSBjYWxsLXRvLWFjdGlvbiBcIlNheSB5ZXMgdG8gdGhlIHdvcmxkXCIgZW5jb3VyYWdlcyB2aWV3ZXJzIHRvIGJvb2sgYSBmbGlnaHQgd2l0aCBMdWZ0aGFuc2EuIiwKICAgICJ0aXRsZSI6ICJMdWZ0aGFuc2E6IEVyd2VpdGVyZSBkZWluZW4gSG9yaXpvbnQiLAogICAgImRlc2NyaXB0aW9uIjogIlRoaXMgY29tYmluYXRpb24gc3RhcnRzIHdpdGggdGhlIHZpZGVvIGNhbGxzIHNjZW5lIGFuZCBvZmYtc2NyZWVuIHNwZWVjaCwgZm9sbG93ZWQgYnkgdGhlIGNvdXBsZSdzIGRpbm5lciBzY2VuZSBhbmQgdGhlIGZpbmFsIHNjZW5lIHdpdGggdGhlIFwiU2F5IHllcyB0byB0aGUgd29ybGRcIiB0YWdsaW5lLiBUaGlzIGNvbWJpbmF0aW9uIGlzIHNob3J0ZXIgdGhhbiB0aGUgZmlyc3Qgb25lIGJ1dCBzdGlsbCBlZmZlY3RpdmVseSBjb252ZXlzIHRoZSBicmFuZCdzIG1lc3NhZ2Ugb2YgZXhwbG9yaW5nIHRoZSB3b3JsZC4iLAogICAgInZhcmlhbnRzIjogewogICAgICAiaG9yaXpvbnRhbCI6ICJodHRwczovL3N0b3JhZ2UubXRscy5jbG91ZC5nb29nbGUuY29tL2dwcy1nZW5lcmF0aXZlLWFpLXZpZ2VuYWlyL0x1ZnRoYW5zYS5tcDQtLTE3MTI0MDMwNTUzMTctLWRuTndRR2R2YjJkc1pTNWpiMjA9LzE3MTQ2NTg0NTEwNzktY29tYm9zL2NvbWJvXzFfaC5tcDQiLAogICAgICAidmVydGljYWwiOiAiaHR0cHM6Ly9zdG9yYWdlLm10bHMuY2xvdWQuZ29vZ2xlLmNvbS9ncHMtZ2VuZXJhdGl2ZS1haS12aWdlbmFpci9MdWZ0aGFuc2EubXA0LS0xNzEyNDAzMDU1MzE3LS1kbk53UUdkdmIyZHNaUzVqYjIwPS8xNzE0NjU4NDUxMDc5LWNvbWJvcy9jb21ib18xX3YubXA0IiwKICAgICAgInNxdWFyZSI6ICJodHRwczovL3N0b3JhZ2UubXRscy5jbG91ZC5nb29nbGUuY29tL2dwcy1nZW5lcmF0aXZlLWFpLXZpZ2VuYWlyL0x1ZnRoYW5zYS5tcDQtLTE3MTI0MDMwNTUzMTctLWRuTndRR2R2YjJkc1pTNWpiMjA9LzE3MTQ2NTg0NTEwNzktY29tYm9zL2NvbWJvXzFfcy5tcDQiCiAgICB9CiAgfQp9`
               );
             } else if (url.endsWith('/data.json')) {
               subscriber.next(

diff --git a/ui/src/ui/src/app/api-calls/api-calls.service.interface.ts b/ui/src/ui/src/app/api-calls/api-calls.service.interface.ts
@@ -38,6 +38,7 @@ export interface GenerateVariantsResponse {
   score: number;
   reasoning: string;
   duration: string;
+  variants?: VariantFormats;
 }
 
 export interface PreviousRunsResponse {
@@ -65,6 +66,24 @@ export interface RenderQueueVariant {
   scenes: string;
 }
 
+export interface VariantFormats {
+  horizontal: string;
+  vertical: string;
+  square: string;
+}
+
+export interface RenderedVariant {
+  variant_id: number;
+  av_segments: Record<string, AvSegment>;
+  title: string;
+  description: string;
+  score: number;
+  reasoning: string;
+  variants: VariantFormats;
+  duration: string;
+  scenes: string;
+}
+
 export interface ApiCalls {
   uploadVideo(file: Blob, analyseAudio: boolean): Observable<string>;
   deleteGcsFolder(folder: string): void;

diff --git a/ui/src/ui/src/app/app.component.html b/ui/src/ui/src/app/app.component.html
@@ -120,7 +120,7 @@
       </mat-expansion-panel-header>
       <div class="row">
         <div style="margin-right: auto"></div>
-        <div>
+        <div style="padding-left: 440px">
           <mat-button-toggle-group
             #segmentModeToggle="matButtonToggleGroup"
             value="preview"
@@ -185,6 +185,17 @@
             <mat-icon matChipAvatar fontIcon="{{ segmentsStatus }}"></mat-icon>
             Analysing video segments
           </mat-chip>
+          <mat-chip
+            *ngIf="rendering"
+            disableRipple
+            [ngClass]="combinationStatus"
+          >
+            <mat-icon
+              matChipAvatar
+              fontIcon="{{ combinationStatus }}"
+            ></mat-icon>
+            Rendering video variants
+          </mat-chip>
         </mat-chip-set>
       </div>
       <ng-container *ngIf="variants">
@@ -193,28 +204,12 @@
           [(selectedIndex)]="selectedVariant"
           (selectedTabChange)="variantChanged()"
         >
-          @for (variant of variants; track variant.combo_id) {
-            <mat-tab label="{{ variant.title }} -- {{ variant.duration }}">
-              <div class="row" style="justify-content: start">
-                Scenes: {{ variant.scenes }}
-              </div>
-              <div class="row" style="justify-content: start">
-                {{ variant.description }}
-              </div>
-              <div
-                style="font-size: 2.5em"
-                [ngClass]="'score-' + variant.score"
-                class="row"
-              >
-                Score: {{ variant.score }}
-              </div>
-              <div
-                class="row"
-                style="white-space: pre-line; margin-top: 0px"
-                [innerHTML]="marked.parse(variant.reasoning)"
-              ></div>
-            </mat-tab>
-          }
+          <mat-tab
+            *ngFor="let variant of variants"
+            label="{{ variant.title }} -- {{ variant.duration }}"
+          >
+            <video-combo [combo]="variant" displayMode="variant"></video-combo>
+          </mat-tab>
         </mat-tab-group>
         <br />
         <div class="row">
@@ -273,7 +268,7 @@
             </span>
           </div>
         </div>
-        <div class="row" style="gap: 16px; margin-top: 12px">
+        <div class="row" style="gap: 16px">
           <mat-form-field style="flex: 1" subscriptSizing="dynamic">
             <mat-label>What should your video variants be about?</mat-label>
             <textarea
@@ -282,17 +277,8 @@
               placeholder="e.g. 'Discovering new experiences'"
             ></textarea>
           </mat-form-field>
-          <div style="display: flex; flex-direction: column; margin-top: 16px">
-            <button
-              type="button"
-              mat-raised-button
-              color="primary"
-              (click)="generateVariants()"
-              [disabled]="loading"
-            >
-              Generate variants
-            </button>
-            <div style="margin-top: 4px">
+          <div style="display: flex; flex-direction: column; margin-top: -12px">
+            <div>
               <mat-label>Target duration:</mat-label>
               <mat-slider
                 [max]="math.round(previewVideoElem.duration)"
@@ -304,9 +290,18 @@
                 <input matSliderThumb [(ngModel)]="duration" #slider />
               </mat-slider>
             </div>
+            <button
+              type="button"
+              mat-raised-button
+              color="primary"
+              (click)="generateVariants()"
+              [disabled]="loading"
+            >
+              Generate variants
+            </button>
           </div>
         </div>
-        <div class="row" style="margin-top: 0px">
+        <div class="row">
           <span class="notice-text"
             >Segments selected by the LLM might not follow prompt instructions,
             and the overall video variant might not follow the desired target
@@ -322,7 +317,10 @@
         <mat-panel-title>Magic combos</mat-panel-title>
       </mat-expansion-panel-header>
       <mat-tab-group>
-        <mat-tab *ngFor="let combo of combos" label="{{ combo.title }}">
+        <mat-tab
+          *ngFor="let combo of combos"
+          label="{{ combo.title }} -- {{ combo.duration }}"
+        >
           <video-combo [combo]="combo"></video-combo>
         </mat-tab>
       </mat-tab-group>
@@ -336,7 +334,7 @@
   >
     <div style="margin-bottom: auto">
       @for (variant of renderQueue; track variant; let i = $index) {
-        <div class="variant-row">
+        <div class="variant-row mat-elevation-z4">
           <div style="display: flex; flex-direction: column">
             <img
               class="variant-img"