fix: uses better colors for different container names (#2979)

assets/auto-imports.d.ts

@@ -395,7 +395,6 @@ declare module 'vue' {
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
     readonly config: UnwrapRef<typeof import('./stores/config')['default']>
-    readonly containerContext: UnwrapRef<typeof import('./composable/containerContext')['containerContext']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -473,7 +472,6 @@ declare module 'vue' {
     readonly persistentVisibleKeysForContainer: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeysForContainer']>
     readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly provideContainerContext: UnwrapRef<typeof import('./composable/containerContext')['provideContainerContext']>
     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly provideLoggingContext: UnwrapRef<typeof import('./composable/logContext')['provideLoggingContext']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
@@ -558,7 +556,6 @@ declare module 'vue' {
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
     readonly useContainerActions: UnwrapRef<typeof import('./composable/containerActions')['useContainerActions']>
-    readonly useContainerContext: UnwrapRef<typeof import('./composable/containerContext')['useContainerContext']>
     readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
     readonly useContainerStream: UnwrapRef<typeof import('./composable/eventStreams')['useContainerStream']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
@@ -756,7 +753,6 @@ declare module '@vue/runtime-core' {
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
     readonly config: UnwrapRef<typeof import('./stores/config')['default']>
-    readonly containerContext: UnwrapRef<typeof import('./composable/containerContext')['containerContext']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -834,7 +830,6 @@ declare module '@vue/runtime-core' {
     readonly persistentVisibleKeysForContainer: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeysForContainer']>
     readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly provideContainerContext: UnwrapRef<typeof import('./composable/containerContext')['provideContainerContext']>
     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly provideLoggingContext: UnwrapRef<typeof import('./composable/logContext')['provideLoggingContext']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
@@ -919,7 +914,6 @@ declare module '@vue/runtime-core' {
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
     readonly useContainerActions: UnwrapRef<typeof import('./composable/containerActions')['useContainerActions']>
-    readonly useContainerContext: UnwrapRef<typeof import('./composable/containerContext')['useContainerContext']>
     readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
     readonly useContainerStream: UnwrapRef<typeof import('./composable/eventStreams')['useContainerStream']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>

assets/components/ContainerViewer/ContainerLog.vue

@@ -48,7 +48,5 @@ const visibleKeys = persistentVisibleKeysForContainer(container);
 
 const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
 
-provideContainerContext(container); // TODO remove
-
 provideLoggingContext(toRef(() => [container.value]));
 </script>

assets/components/LogViewer/ContainerName.vue

@@ -12,26 +12,30 @@ const { id } = defineProps<{
   id: string;
 }>();
 
+const { containers } = useLoggingContext();
+
 const colors = [
-  "#FF0000",
+  "#4B0082",
+  "#FF00FF",
   "#FF7F00",
   "#FFFF00",
   "#00FF00",
   "#00FFFF",
+  "#FF0000",
   "#0000FF",
-  "#FF00FF",
   "#FF007F",
   "#32CD32",
   "#40E0D0",
+  "#E6E6FA",
   "#800080",
   "#FFD700",
   "#FF4040",
-  "#4B0082",
-  "#008080",
-  "#E6E6FA",
-];
+] as const;
 
-const color = computed(() => colors[Math.abs(hashCode(id)) % colors.length]);
+const color = computed(() => {
+  const index = containers.value.findIndex((container) => container.id === id);
+  return colors[index % colors.length];
+});
 </script>
 
 <style lang="postcss" scoped>

assets/composable/containerContext.ts

@@ -1,21 +0,0 @@
-import { Container } from "@/models/Container";
-
-type ContainerContext = {
-  container: Ref<Container>;
-};
-
-export const containerContext = Symbol("containerContext") as InjectionKey<ContainerContext>;
-
-export const provideContainerContext = (container: Ref<Container>) => {
-  provide(containerContext, {
-    container,
-  });
-};
-
-export const useContainerContext = () => {
-  const context = inject(containerContext);
-  if (!context) {
-    throw new Error("No container context provided");
-  }
-  return context;
-};