WIP launch view

Author: git-afsantos

src/assets/base.css

@@ -23,11 +23,25 @@
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
 
+  /* #00bd7e */
   --vt-c-text-green: hsla(160, 100%, 37%, 1);
   --vt-c-green-shadow: hsla(160, 100%, 37%, 0.2);
 
-  --vt-c-text-orange: hsla(50, 88%, 55%, 1);
-  --vt-c-orange-shadow: hsla(50, 88%, 55%, 0.35);
+  /* #ffd79a */
+  --vt-c-text-orange: hsla(36, 100%, 80%, 1);
+  --vt-c-orange-shadow: hsla(36, 100%, 80%, 0.2);
+
+  /* #f6f294 */
+  --vt-c-text-yellow: hsla(58, 84%, 77%, 1);
+  --vt-c-yellow-shadow: hsla(58, 84%, 77%, 0.2);
+
+  /* #dcadd6 */
+  --vt-c-text-violet: hsla(308, 40%, 77%, 1);
+  --vt-c-violet-shadow: hsla(308, 40%, 77%, 0.2);
+
+  /* #7fafe3 */
+  --vt-c-text-blue: hsla(211, 64%, 69%, 1);
+  --vt-c-blue-shadow: hsla(211, 64%, 69%, 0.2);
 }
 
 /* semantic color variables for this project */
@@ -48,6 +62,15 @@
   --color-orange: var(--vt-c-text-orange);
   --color-orange-hover: var(--vt-c-orange-shadow);
 
+  --color-yellow: var(--vt-c-text-yellow);
+  --color-yellow-hover: var(--vt-c-yellow-shadow);
+
+  --color-violet: var(--vt-c-text-violet);
+  --color-violet-hover: var(--vt-c-violet-shadow);
+
+  --color-blue: var(--vt-c-text-blue);
+  --color-blue-hover: var(--vt-c-blue-shadow);
+
   --section-gap: 160px;
 }
 

src/components/launch/DependencyGraph.vue

@@ -60,9 +60,9 @@ function onSelectNode(node: GraphNodeDatum | null): void {
 }
 
 function groupColors(group: string): string {
-  if (group === LaunchActionType.ARG) return 'limegreen'
-  if (group === LaunchActionType.NODE) return 'dodgerblue'
-  if (group === LaunchActionType.INCLUDE) return 'chocolate'
+  if (group === LaunchActionType.ARG) return '#f6f294'
+  if (group === LaunchActionType.NODE) return '#00bd7e'
+  if (group === LaunchActionType.INCLUDE) return '#7fafe3'
   return 'gray'
 }
 
@@ -71,6 +71,9 @@ function buildModelElement(): SVGElement {
   // const color = d3.scaleOrdinal(d3.schemeCategory10)
   const color = groupColors
 
+  const nodeStrokeColor = (d: GraphNodeDatum): string => color(d.group)
+  const nodeFillColor = (d: GraphNodeDatum): string => (d.dark ? 'var(--color-background)' : '#666')
+
   // The force simulation mutates links and nodes, so create a copy
   // so that re-evaluating this cell produces the same result.
   const links = props.model.links.map((d) => ({ ...d }))
@@ -118,13 +121,14 @@ function buildModelElement(): SVGElement {
     .attr('orient', 'auto')
     .append('path')
     .attr('d', 'M0,-3L6,0L0,3')
-    .style('stroke', '#999')
-    .style('fill', '#999')
+    .style('stroke', 'var(--color-text)')
+    .style('stroke-opacity', 0.6)
+    .style('fill', 'var(--color-text)')
 
   // Add a line for each link
   const link = svg
     .append('g')
-    .attr('stroke', '#999')
+    .attr('stroke', 'var(--color-text)')
     .attr('stroke-opacity', 0.6)
     .selectAll('line')
     .data(links)
@@ -135,14 +139,14 @@ function buildModelElement(): SVGElement {
   // Add a circle for each node
   const node = svg
     .append('g')
-    .attr('stroke-width', 1.5)
+    .attr('stroke-width', 2)
     .selectAll<SVGCircleElement, GraphNodeDatum>('circle')
     .data(nodes)
     .join('circle')
     .attr('r', (d) => (d.level || 0) * 5 + 10)
-    .attr('stroke', (d) => (d.dark ? '#999' : '#fff'))
+    .attr('stroke', nodeStrokeColor) // (d.dark ? '#333' : color(d.group))
     .attr('stroke-dasharray', (d) => (!d.condition ? '' : '2 1'))
-    .attr('fill', (d) => color(d.group))
+    .attr('fill', nodeFillColor)
 
   node.append('title').text((d) => d.name || d.id)
 
@@ -163,12 +167,10 @@ function buildModelElement(): SVGElement {
       if (k === i) {
         return
       }
-      d3.select<SVGCircleElement, GraphNodeDatum>(node.nodes()[k]).attr('fill', (d) =>
-        color(d.group),
-      )
+      d3.select<SVGCircleElement, GraphNodeDatum>(node.nodes()[k]).attr('fill', nodeFillColor(prev))
     }
     onSelectNode(datum)
-    d3.select(el).attr('fill', '#c9c9c9')
+    d3.select(el).attr('fill', nodeStrokeColor(datum))
   }
 
   node.on('click', (e /*, d*/) => {
@@ -185,9 +187,7 @@ function buildModelElement(): SVGElement {
     const prev = selectedNode.value
     if (prev != null) {
       const k = prev.index!
-      d3.select<SVGCircleElement, GraphNodeDatum>(node.nodes()[k]).attr('fill', (d) =>
-        color(d.group),
-      )
+      d3.select<SVGCircleElement, GraphNodeDatum>(node.nodes()[k]).attr('fill', nodeFillColor(prev))
       onSelectNode(null)
     }
   })

src/components/launch/LaunchActionList.vue

@@ -36,7 +36,7 @@ function onSelectAction(action: LaunchAction): void {
       }"
       @click="onSelectAction(action)"
     >
-      <span class="tag">{{ action.type }}</span>
+      <span class="tag" :class="`type-${action.type}`">{{ action.type.toUpperCase() }}</span>
       {{ action.name }}
       <span v-if="currentDependencies.has(action.id)">(dep)</span>
     </li>
@@ -54,10 +54,9 @@ function onSelectAction(action: LaunchAction): void {
   font-family: monospace;
   overflow: auto;
   white-space: nowrap;
-  line-height: 1.25;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
   margin: 0.5rem 0 0.5rem 0.5rem;
 }
 
@@ -83,8 +82,23 @@ function onSelectAction(action: LaunchAction): void {
 .launch-action-list > li > .tag {
   border-radius: 0.25em;
   border: 1px solid var(--color-text);
-  font-variant-caps: all-small-caps;
-  font-size: 1rem;
+  /* font-variant-caps: all-petite-caps;
+  font-size: 1rem;*/
   padding: 0 0.25em;
 }
+
+.launch-action-list > li > .tag.type-arg {
+  border: 1px solid var(--color-yellow);
+  color: var(--color-yellow);
+}
+
+.launch-action-list > li > .tag.type-node {
+  border: 1px solid var(--color-green);
+  color: var(--color-green);
+}
+
+.launch-action-list > li > .tag.type-include {
+  border: 1px solid var(--color-blue);
+  color: var(--color-blue);
+}
 </style>