Merge remote-tracking branch 'origin/master' into llm-tweak-abuse

Author: haraldschilly

src/packages/frontend/compute/cloud/hyperstack/image.tsx

@@ -14,11 +14,10 @@ export default function Image(props) {
         <div style={{ color: "#666", marginBottom: "5px" }}>
           Select compute server image. You will be able to use sudo with no
           password and can install anything into the Ubuntu 22.04 Linux image.
-          Click "advanced" for more options, which may be less tested or take
-          MUCH longer to start due to size.
+          Clicking "advanced" may show additional less tested or older options.
         </div>
       )}
-      <SelectImage {...props} gpu={true} arch={"x86_64"} maxDockerSizeGb={2} />
+      <SelectImage {...props} gpu={true} arch={"x86_64"} warnBigGb={4} />
       <div style={{ color: "#666", marginTop: "5px" }}>
         <ImageDescription configuration={props.configuration} />
         <ImageLinks

src/packages/frontend/compute/select-image.tsx

@@ -33,6 +33,8 @@ interface Props {
   // if specified, only show images with dockerSizeGb set and <= maxDockerSizeGb
   // Ignored if advanced is selected
   maxDockerSizeGb?: number;
+  // show a warning if dockerSizeGb is bigger than this:
+  warnBigGb?: number;
 }
 
 export default function SelectImage({
@@ -45,9 +47,13 @@ export default function SelectImage({
   googleImages,
   arch,
   maxDockerSizeGb,
+  warnBigGb,
 }: Props) {
   const [advanced, setAdvanced] = useState<boolean>(false);
   const [IMAGES, ImagesError] = useImages();
+  const [dockerSizeGb, setDockerSizeGb] = useState<number | undefined>(
+    undefined,
+  );
   const [value, setValue] = useState<string | undefined>(configuration.image);
   useEffect(() => {
     setValue(configuration.image);
@@ -103,6 +109,7 @@ export default function SelectImage({
           for (const option of options) {
             if (option.value == val) {
               x.tag = option.tag;
+              setDockerSizeGb(option.dockerSizeGb);
               break;
             }
           }
@@ -121,6 +128,21 @@ export default function SelectImage({
           configuration={configuration}
         />
       )}
+      {warnBigGb && (dockerSizeGb ?? 0) > warnBigGb && (
+        <Alert
+          style={{ margin: "15px 0" }}
+          showIcon
+          type="warning"
+          message="Large Image"
+          description={
+            <>
+              The compute server will take <b>several extra minutes</b> to start
+              the first time, because the {dockerSizeGb}GB Docker image must be
+              pulled and decompressed. Please be patient!
+            </>
+          }
+        />
+      )}
     </div>
   );
 }
@@ -151,6 +173,7 @@ function getOptions({
     value: string;
     search: string;
     label: JSX.Element;
+    dockerSizeGb?: number;
   }[] = [];
   for (const name in IMAGES) {
     const image = IMAGES[name];
@@ -217,7 +240,7 @@ function getOptions({
         }
       }
     }
-    if (advanced && dockerSizeGb) {
+    if (dockerSizeGb) {
       extra += ` - ${dockerSizeGb} GB`;
     }
 
@@ -227,6 +250,7 @@ function getOptions({
       priority,
       search: label?.toLowerCase() ?? "",
       tag,
+      dockerSizeGb,
       label: (
         <div style={{ fontSize: "12pt" }}>
           <div style={{ float: "right" }}>{versionLabel}</div>

src/packages/frontend/frame-editors/code-editor/actions.ts

@@ -258,8 +258,10 @@ export class Actions<
   // Init setting of value whenever syncstring changes -- only used in derived classes
   protected _init_syncstring_value(): void {
     this._syncstring.on("change", () => {
-      if (!this._syncstring) {
-        // edge case where actions closed but this event was still triggered.
+      if (!this._syncstring || this._syncstring.versions().length == 0) {
+        // edge case where actions closed but this event was still triggered, OR
+        // the syncstring changed, but has not actually loaded a version from
+        // disk yet, which happens with compute servers for a second.
         return;
       }
       this.setState({ value: this._syncstring.to_str() });