Make compression configurable and disable it by default

assets/runner_cell/src/App.js

@@ -208,9 +208,11 @@ function HelpBox({ fields }) {
         nodes. Note that process state and application configuration are not
         automatically carried to remote nodes.
       </p>
-      <p>
-        Once a pool is started, you can execute code on a separate machine as
-        follows:
+      <div>
+        <p>
+          Once a pool is started, you can execute code on a separate machine as
+          follows:
+        </p>
         <pre className="mt-2 p-4 bg-[#282c34] rounded-lg whitespace-pre-wrap">
           <code className="text-[#c8ccd4]">
             <span className="text-[#56b6c2]">FLAME</span>
@@ -223,7 +225,7 @@ function HelpBox({ fields }) {
             <span className="text-[#c678dd]">end</span>)
           </code>
         </pre>
-      </p>
+      </div>
     </div>
   );
 }

assets/runner_cell/src/Pool.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { SelectField, TextField } from "./form_elements";
+import { Switch, TextField } from "./form_elements";
 
 const Pool = ({ fields, handleChange, handleBlur }) => (
   <div className="flex flex-wrap gap-2 p-4">
@@ -39,6 +39,21 @@ const Pool = ({ fields, handleChange, handleBlur }) => (
         required
       />
     </div>
+    <Switch
+      label="Compress"
+      name="compress"
+      checked={fields.compress}
+      onChange={handleChange}
+      help={
+        "FLAME automatically transfers\n" +
+        "packages between machines. By\n" +
+        "default, compression is disabled\n" +
+        "as it may be expensive, but you\n" +
+        "may want to enable compression\n" +
+        "if you plan to spawn dozens of\n" +
+        "machines or more."
+      }
+    />
   </div>
 );
 

assets/runner_cell/src/form_elements.js

@@ -1,5 +1,9 @@
 import React from "react";
-import { RiCloseLine, RiArrowDownSLine } from "@remixicon/react";
+import {
+  RiCloseLine,
+  RiArrowDownSLine,
+  RiQuestionLine,
+} from "@remixicon/react";
 import classNames from "classnames";
 
 export function SelectField({
@@ -58,7 +62,7 @@ export function MultiSelectField({
   ...props
 }) {
   const availableOptions = options.filter(
-    (option) => !value.includes(option.value)
+    (option) => !value.includes(option.value),
   );
 
   function labelForValue(value) {
@@ -79,7 +83,7 @@ export function MultiSelectField({
 
   function handleDelete(subvalue) {
     const newValue = value.filter(
-      (otherSubvalue) => otherSubvalue !== subvalue
+      (otherSubvalue) => otherSubvalue !== subvalue,
     );
     onChange && onChange(newValue);
   }
@@ -190,3 +194,31 @@ export function TextField({
     </div>
   );
 }
+
+export function Switch({ label = null, checked, help = null, ...props }) {
+  return (
+    <div className="flex flex-col">
+      {label && (
+        <span className="color-gray-800 mb-0.5 block text-sm font-medium flex items-center gap-1">
+          {label}
+          {help && (
+            <span class="cursor-pointer tooltip right" data-tooltip={help}>
+              <RiQuestionLine size={14} />
+            </span>
+          )}
+        </span>
+      )}
+      <div className="grow flex items-center">
+        <label className="relative inline-block h-7 w-14 select-none">
+          <input
+            type="checkbox"
+            className="peer absolute block h-7 w-7 cursor-pointer appearance-none rounded-full border-[5px] border-gray-100 bg-gray-400 outline-none transition-all duration-300 checked:translate-x-full checked:transform checked:border-blue-600 checked:bg-white"
+            checked={checked}
+            {...props}
+          />
+          <div className="block h-full w-full cursor-pointer rounded-full bg-gray-100 transition-all duration-300 peer-checked:bg-blue-600" />
+        </label>
+      </div>
+    </div>
+  );
+}

assets/runner_cell/src/main.css

@@ -1,3 +1,71 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.tooltip {
+  position: relative;
+  display: flex;
+  --distance: 4px;
+  --arrow-size: 5px;
+  --show-delay: 0.5s;
+}
+
+.tooltip:before {
+  position: absolute;
+  content: attr(data-tooltip);
+  white-space: pre;
+  text-align: center;
+  display: block;
+  z-index: 100;
+  background-color: #1c273c;
+  color: #f0f5f9;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+  padding: 3px 12px;
+  visibility: hidden;
+  transition-property: visibility;
+  transition-duration: 0s;
+  transition-delay: 0s;
+}
+
+/* Tooltip arrow */
+.tooltip:after {
+  content: "";
+  position: absolute;
+  display: block;
+  z-index: 100;
+  /* For the arrow we use the triangle trick: https://css-tricks.com/snippets/css/css-triangle/ */
+  border-width: var(--arrow-size);
+  border-style: solid;
+  border-color: #1c273c;
+  visibility: hidden;
+  transition-property: visibility;
+  transition-duration: 0s;
+  transition-delay: 0s;
+}
+
+.tooltip:hover:before {
+  visibility: visible;
+  transition-delay: var(--show-delay);
+}
+
+.tooltip:hover:after {
+  visibility: visible;
+  transition-delay: var(--show-delay);
+}
+
+.tooltip.right:before {
+  top: 50%;
+  left: 100%;
+  transform: translate(calc(var(--arrow-size) - 1px + var(--distance)), -50%);
+}
+
+.tooltip.right:after {
+  top: 50%;
+  left: 100%;
+  transform: translate(var(--distance), -50%);
+  border-left: none;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}

lib/kino_flame/runner_cell.ex

@@ -29,6 +29,7 @@ defmodule KinoFLAME.RunnerCell do
       "backend" => backend,
       "min" => attrs["min"] || 0,
       "max" => attrs["max"] || 1,
+      "compress" => Map.get(attrs, "compress", false),
       "max_concurrency" => attrs["max_concurrency"] || 10,
       "fly_cpus" => attrs["fly_cpus"] || 1,
       "fly_cpu_kind" => attrs["fly_cpu_kind"] || "shared",
@@ -152,7 +153,8 @@ defmodule KinoFLAME.RunnerCell do
   @impl true
   def to_attrs(%{assigns: %{fields: fields, k8s_pod_template: k8s_pod_template}}) do
     fields = Map.put(fields, "k8s_pod_template", k8s_pod_template)
-    shared_keys = ["backend", "name", "min", "max", "max_concurrency"]
+
+    shared_keys = ["backend", "name", "min", "max", "max_concurrency", "compress"]
 
     backend_keys =
       case fields["backend"] do
@@ -166,17 +168,17 @@ defmodule KinoFLAME.RunnerCell do
     Map.take(fields, shared_keys ++ backend_keys)
   end
 
-  @required_keys_pool ["name", "min", "max", "max_concurrency"]
   @impl true
   def to_source(attrs) do
+    shared_required_keys = ["name", "min", "max", "max_concurrency", "compress"]
+
     required_keys =
       case attrs["backend"] do
         "fly" ->
-          @required_keys_pool ++
-            ["fly_cpu_kind", "fly_cpus", "fly_memory_gb"]
+          shared_required_keys ++ ["fly_cpu_kind", "fly_cpus", "fly_memory_gb"]
 
         "k8s" ->
-          @required_keys_pool
+          shared_required_keys
       end
 
     if all_fields_filled?(attrs, required_keys) do
@@ -252,7 +254,11 @@ defmodule KinoFLAME.RunnerCell do
       Kino.start_child(
         {FLAME.Pool,
          name: unquote(String.to_atom(attrs["name"])),
-         code_sync: [start_apps: true, sync_beams: Kino.beam_paths()],
+         code_sync: [
+           start_apps: true,
+           sync_beams: Kino.beam_paths(),
+           compress: unquote(attrs["compress"])
+         ],
          min: unquote(attrs["min"]),
          max: unquote(attrs["max"]),
          max_concurrency: unquote(attrs["max_concurrency"]),

test/kino_flame/runner_cell_test.exs

@@ -19,7 +19,7 @@ defmodule KinoFLAME.RunnerCellTest do
                Kino.start_child(
                  {FLAME.Pool,
                   name: :runner,
-                  code_sync: [start_apps: true, sync_beams: Kino.beam_paths()],
+                  code_sync: [start_apps: true, sync_beams: Kino.beam_paths(), compress: false],
                   min: 0,
                   max: 1,
                   max_concurrency: 10,
@@ -64,7 +64,7 @@ defmodule KinoFLAME.RunnerCellTest do
                Kino.start_child(
                  {FLAME.Pool,
                   name: :runner,
-                  code_sync: [start_apps: true, sync_beams: Kino.beam_paths()],
+                  code_sync: [start_apps: true, sync_beams: Kino.beam_paths(), compress: false],
                   min: 0,
                   max: 1,
                   max_concurrency: 10,
@@ -85,6 +85,7 @@ defmodule KinoFLAME.RunnerCellTest do
         "min" => 2,
         "max" => 3,
         "max_concurrency" => 15,
+        "compress" => true,
         "fly_cpu_kind" => "performance",
         "fly_cpus" => 2,
         "fly_memory_gb" => 2,
@@ -100,7 +101,7 @@ defmodule KinoFLAME.RunnerCellTest do
                Kino.start_child(
                  {FLAME.Pool,
                   name: :my_runner,
-                  code_sync: [start_apps: true, sync_beams: Kino.beam_paths()],
+                  code_sync: [start_apps: true, sync_beams: Kino.beam_paths(), compress: true],
                   min: 2,
                   max: 3,
                   max_concurrency: 15,
@@ -130,6 +131,7 @@ defmodule KinoFLAME.RunnerCellTest do
         "min" => 2,
         "max" => 3,
         "max_concurrency" => 15,
+        "compress" => true,
         "k8s_pod_template" => "some_template"
       }
 
@@ -146,7 +148,7 @@ defmodule KinoFLAME.RunnerCellTest do
                Kino.start_child(
                  {FLAME.Pool,
                   name: :my_runner,
-                  code_sync: [start_apps: true, sync_beams: Kino.beam_paths()],
+                  code_sync: [start_apps: true, sync_beams: Kino.beam_paths(), compress: true],
                   min: 2,
                   max: 3,
                   max_concurrency: 15,