disableLogX flag in local settings

packages/components/src/components/SquiggleViewer/ItemSettingsMenu.tsx

@@ -87,6 +87,7 @@ const ItemSettingsModal: React.FC<Props & { close: () => void }> = ({
           register={register}
           withShowEditorSetting={false}
           withFunctionSettings={withFunctionSettings}
+          disableLogXSetting={disableLogX}
         />
       </Modal.Body>
     </Modal>

packages/components/src/components/ViewSettings.tsx

@@ -33,10 +33,12 @@ type FormFields = yup.InferType<typeof viewSettingsSchema>;
 export const ViewSettings: React.FC<{
   withShowEditorSetting?: boolean;
   withFunctionSettings?: boolean;
+  disableLogXSetting?: boolean;
   register: UseFormRegister<FormFields>;
 }> = ({
   withShowEditorSetting = true,
   withFunctionSettings = true,
+  disableLogXSetting,
   register,
 }) => {
   return (
@@ -66,6 +68,12 @@ export const ViewSettings: React.FC<{
               register={register}
               name="logX"
               label="Show x scale logarithmically"
+              disabled={disableLogXSetting}
+              tooltip={
+                disableLogXSetting
+                  ? "Your distribution has mass lower than or equal to 0. Log only works on strictly positive values."
+                  : undefined
+              }
             />
             <Checkbox
               register={register}

packages/components/src/components/ui/Checkbox.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React from "react";
 import { Path, UseFormRegister } from "react-hook-form";
 
@@ -5,20 +6,32 @@ export function Checkbox<T>({
   name,
   label,
   register,
+  disabled,
+  tooltip,
 }: {
   name: Path<T>;
   label: string;
   register: UseFormRegister<T>;
+  disabled?: boolean;
+  tooltip?: string;
 }) {
   return (
-    <label className="flex items-center">
+    <label className="flex items-center" title={tooltip}>
       <input
         type="checkbox"
+        disabled={disabled}
         {...register(name)}
         className="form-checkbox focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
       />
       {/* Clicking on the div makes the checkbox lose focus while mouse button is pressed, leading to annoying blinking; I couldn't figure out how to fix this. */}
-      <div className="ml-3 text-sm font-medium text-gray-700">{label}</div>
+      <div
+        className={clsx(
+          "ml-3 text-sm font-medium",
+          disabled ? "text-gray-400" : "text-gray-700"
+        )}
+      >
+        {label}
+      </div>
     </label>
   );
 }