@teselagen/ove 0.8.3 → 0.8.5

package/index.es.js

@@ -54,8 +54,8 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 var _C, _D, _G, _J, _K, _R;
-import { Icon, Classes, Button, Intent, MenuItem, Keys, Tag, Popover, Tooltip, Spinner, Checkbox, Switch, Position, FormGroup, InputGroup, TextArea, EditableText, NumericInput, RadioGroup, Menu, Toaster, MenuDivider, ContextMenu, KeyCombo, useHotkeys, Callout, Dialog, Card, Tabs, Tab, Colors, HTMLSelect, AnchorButton, Slider as Slider$1, ButtonGroup, Label, ResizeSensor, FocusStyleManager } from "@blueprintjs/core";
-import * as React from "react";
+import { Icon, Classes, Button, Intent, MenuItem, Keys, Tag, Popover, Tooltip, Spinner, Checkbox, Switch, Position, FormGroup, InputGroup, TextArea, EditableText, NumericInput, RadioGroup, Menu, Toaster, MenuDivider, KeyCombo, ContextMenu, useHotkeys, Callout, Dialog, Card, Tabs, Tab, Colors, HTMLSelect, AnchorButton, Slider as Slider$1, ButtonGroup, Label, ResizeSensor, FocusStyleManager } from "@blueprintjs/core";
+import * as React$1 from "react";
 import React__default, { useState, useEffect, forwardRef as forwardRef$2, useImperativeHandle, Fragment, useMemo as useMemo$1, useRef, useReducer, useCallback as useCallback$1, createElement, Component, useLayoutEffect as useLayoutEffect$1, createContext as createContext$1, memo, useContext, isValidElement, PureComponent } from "react";
 import { formValueSelector, initialize, change, Field, reduxForm, SubmissionError, destroy as destroy$1, touch, FormName, reducer as reducer$4, getFormValues, FieldArray } from "redux-form";
 import ReactDOM, { unstable_batchedUpdates, createPortal, flushSync, render as render$2, findDOMNode, unmountComponentAtNode } from "react-dom";
@@ -12650,6 +12650,64 @@ const rectSortingStrategy = /* @__PURE__ */ __name((_ref) => {
     scaleY: newRect.height / oldRect.height
   };
 }, "rectSortingStrategy");
+const defaultScale$1 = {
+  scaleX: 1,
+  scaleY: 1
+};
+const verticalListSortingStrategy = /* @__PURE__ */ __name((_ref) => {
+  var _rects$activeIndex;
+  let {
+    activeIndex,
+    activeNodeRect: fallbackActiveRect,
+    index: index2,
+    rects,
+    overIndex
+  } = _ref;
+  const activeNodeRect = (_rects$activeIndex = rects[activeIndex]) != null ? _rects$activeIndex : fallbackActiveRect;
+  if (!activeNodeRect) {
+    return null;
+  }
+  if (index2 === activeIndex) {
+    const overIndexRect = rects[overIndex];
+    if (!overIndexRect) {
+      return null;
+    }
+    return __spreadValues({
+      x: 0,
+      y: activeIndex < overIndex ? overIndexRect.top + overIndexRect.height - (activeNodeRect.top + activeNodeRect.height) : overIndexRect.top - activeNodeRect.top
+    }, defaultScale$1);
+  }
+  const itemGap = getItemGap$1(rects, index2, activeIndex);
+  if (index2 > activeIndex && index2 <= overIndex) {
+    return __spreadValues({
+      x: 0,
+      y: -activeNodeRect.height - itemGap
+    }, defaultScale$1);
+  }
+  if (index2 < activeIndex && index2 >= overIndex) {
+    return __spreadValues({
+      x: 0,
+      y: activeNodeRect.height + itemGap
+    }, defaultScale$1);
+  }
+  return __spreadValues({
+    x: 0,
+    y: 0
+  }, defaultScale$1);
+}, "verticalListSortingStrategy");
+function getItemGap$1(clientRects, index2, activeIndex) {
+  const currentRect = clientRects[index2];
+  const previousRect = clientRects[index2 - 1];
+  const nextRect = clientRects[index2 + 1];
+  if (!currentRect) {
+    return 0;
+  }
+  if (activeIndex < index2) {
+    return previousRect ? currentRect.top - (previousRect.top + previousRect.height) : nextRect ? nextRect.top - (currentRect.top + currentRect.height) : 0;
+  }
+  return nextRect ? nextRect.top - (currentRect.top + currentRect.height) : previousRect ? currentRect.top - (previousRect.top + previousRect.height) : 0;
+}
+__name(getItemGap$1, "getItemGap$1");
 const ID_PREFIX = "Sortable";
 const Context = /* @__PURE__ */ React__default.createContext({
   activeIndex: -1,
@@ -16620,6 +16678,7 @@ const ThComponent2 = /* @__PURE__ */ __name((_c) => {
     className,
     children,
     style: style2,
+    path: path2,
     columnindex
   } = _d, rest = __objRest(_d, [
     "toggleSort",
@@ -16627,16 +16686,30 @@ const ThComponent2 = /* @__PURE__ */ __name((_c) => {
     "className",
     "children",
     "style",
+    "path",
     "columnindex"
   ]);
-  const index2 = columnindex != null ? columnindex : -1;
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-    id: `${index2}`,
-    disabled: immovable === "true"
+  const index2 = columnindex ? path2 : -1;
+  const disabled = !path2 || immovable === "true" || immovable === true;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging: _isDragging
+  } = useSortable({
+    id: path2,
+    disabled
   });
+  const isDragging2 = _isDragging && !disabled;
+  if (transform) {
+    transform.scaleX = 1;
+  }
   const sortStyles = {
     transform: CSS.Transform.toString(transform),
-    transition
+    transition,
+    zIndex: isDragging2 ? 999 : void 0
   };
   return /* @__PURE__ */ React__default.createElement(
     "div",
@@ -16644,11 +16717,12 @@ const ThComponent2 = /* @__PURE__ */ __name((_c) => {
       style: __spreadValues(__spreadValues({}, sortStyles), style2),
       ref: setNodeRef
     }, attributes), listeners), {
-      className: classNames("rt-th", className),
+      className: classNames("rt-th", className, { "th-dragging": isDragging2 }),
       onClick: /* @__PURE__ */ __name((e) => toggleSort && toggleSort(e), "onClick"),
       role: "columnheader",
       tabIndex: "-1",
       columnindex,
+      path: path2,
       index: index2
     }), rest),
     children
@@ -19560,36 +19634,49 @@ function tableQueryParamsToHasuraClauses({
     const uniqueFieldsByPath = {};
     const searchTerms = searchTerm.split(",");
     schema2.fields.forEach((field) => {
-      const { type: type2, path: path2, searchDisabled, isHidden } = field;
-      if (uniqueFieldsByPath[path2]) return;
-      uniqueFieldsByPath[path2] = true;
-      if (searchDisabled || field.filterDisabled || type2 === "color" || isHidden)
-        return;
-      searchTerms.forEach((term) => {
-        const filterValue = term.trim();
-        if (type2 === "string" || type2 === "lookup") {
-          const o2 = set$2({}, path2, { _ilike: `%${filterValue}%` });
-          searchTermFilters.push(o2);
-        } else if (type2 === "boolean") {
-          let regex;
-          try {
-            regex = new RegExp("^" + filterValue, "ig");
-          } catch (error) {
-          }
-          if (regex) {
-            if ("true".replace(regex, "") !== "true") {
-              const o2 = set$2({}, path2, { _eq: true });
-              searchTermFilters.push(o2);
-            } else if ("false".replace(regex, "") !== "false") {
-              const o2 = set$2({}, path2, { _eq: false });
-              searchTermFilters.push(o2);
+      const {
+        type: type2,
+        path: path2,
+        additionalSearchPaths = [],
+        searchDisabled,
+        isHidden
+      } = field;
+      const allPaths = [path2, ...additionalSearchPaths];
+      allPaths.forEach((path22) => {
+        addSearchTermFilters(path22);
+      });
+      function addSearchTermFilters(path22) {
+        if (uniqueFieldsByPath[path22]) return;
+        uniqueFieldsByPath[path22] = true;
+        if (searchDisabled || field.filterDisabled || type2 === "color" || isHidden || !path22)
+          return;
+        searchTerms.forEach((term) => {
+          const filterValue = term.trim();
+          if (type2 === "string" || type2 === "lookup") {
+            const o2 = set$2({}, path22, { _ilike: `%${filterValue}%` });
+            searchTermFilters.push(o2);
+          } else if (type2 === "boolean") {
+            let regex;
+            try {
+              regex = new RegExp("^" + filterValue, "ig");
+            } catch (error) {
+            }
+            if (regex) {
+              if ("true".replace(regex, "") !== "true") {
+                const o2 = set$2({}, path22, { _eq: true });
+                searchTermFilters.push(o2);
+              } else if ("false".replace(regex, "") !== "false") {
+                const o2 = set$2({}, path22, { _eq: false });
+                searchTermFilters.push(o2);
+              }
             }
+          } else if ((type2 === "number" || type2 === "integer") && !isNaN(filterValue)) {
+            const o2 = set$2({}, path22, { _eq: parseFloat(filterValue) });
+            searchTermFilters.push(o2);
           }
-        } else if ((type2 === "number" || type2 === "integer") && !isNaN(filterValue)) {
-          const o2 = set$2({}, path2, { _eq: parseFloat(filterValue) });
-          searchTermFilters.push(o2);
-        }
-      });
+        });
+      }
+      __name(addSearchTermFilters, "addSearchTermFilters");
     });
     if (searchTermFilters.length > 0) {
       if (Object.keys(where).length > 0) {
@@ -19600,10 +19687,16 @@ function tableQueryParamsToHasuraClauses({
     }
   }
   if (filters && filters.length > 0) {
-    const filterClauses = filters.map((filter2) => {
+    const filterClauses = flatMap(filters, (filter2) => {
       let { selectedFilter, filterOn, filterValue } = filter2;
       const fieldSchema = ccFields[filterOn] || {};
-      const { path: path2, reference: reference2, type: type2, customColumnFilter } = fieldSchema;
+      const {
+        path: path2,
+        additionalSearchPaths = [],
+        reference: reference2,
+        type: type2,
+        customColumnFilter
+      } = fieldSchema;
       if (customColumnFilter) {
         return customColumnFilter(filterValue);
       }
@@ -19626,117 +19719,128 @@ function tableQueryParamsToHasuraClauses({
       }
       if (reference2) {
         filterOn = reference2.sourceField;
+        return addColumnFilters(filterOn);
       } else {
-        filterOn = path2 || filterOn;
+        if (path2) {
+          const allPaths = [path2, ...additionalSearchPaths];
+          return allPaths.map((p2) => addColumnFilters(p2));
+        } else {
+          return addColumnFilters(filterOn);
+        }
       }
-      switch (selectedFilter) {
-        case "none":
-          return {};
-        case "startsWith":
-          return { [filterOn]: { _ilike: `${filterValue}%` } };
-        case "endsWith":
-          return { [filterOn]: { _ilike: `%${filterValue}` } };
-        case "contains":
-          return { [filterOn]: { _ilike: `%${filterValue}%` } };
-        case "notContains":
-          return { [filterOn]: { _nilike: `%${filterValue}%` } };
-        case "isExactly":
-          return { [filterOn]: { _eq: filterValue } };
-        case "isEmpty":
-          if (filterOn.includes(".")) {
+      function addColumnFilters(filterOn2) {
+        switch (selectedFilter) {
+          case "none":
+            return {};
+          case "startsWith":
+            return { [filterOn2]: { _ilike: `${filterValue}%` } };
+          case "endsWith":
+            return { [filterOn2]: { _ilike: `%${filterValue}` } };
+          case "contains":
+            return { [filterOn2]: { _ilike: `%${filterValue}%` } };
+          case "notContains":
+            return { [filterOn2]: { _nilike: `%${filterValue}%` } };
+          case "isExactly":
+            return { [filterOn2]: { _eq: filterValue } };
+          case "isEmpty":
+            if (filterOn2.includes(".")) {
+              return {
+                _not: {
+                  [filterOn2.split(".")[0]]: {}
+                }
+              };
+            }
             return {
-              _not: {
-                [filterOn.split(".")[0]]: {}
-              }
+              _or: [
+                { [filterOn2]: { _eq: "" } },
+                { [filterOn2]: { _is_null: true } }
+              ]
             };
-          }
-          return {
-            _or: [
-              { [filterOn]: { _eq: "" } },
-              { [filterOn]: { _is_null: true } }
-            ]
-          };
-        case "notEmpty":
-          return {
-            _and: [
-              { [filterOn]: { _neq: "" } },
-              { [filterOn]: { _is_null: false } }
-            ]
-          };
-        case "inList":
-          return { [filterOn]: { _in: filterValue } };
-        case "notInList":
-          return { [filterOn]: { _nin: filterValue } };
-        case "true":
-          return { [filterOn]: { _eq: true } };
-        case "false":
-          return { [filterOn]: { _eq: false } };
-        case "dateIs":
-          return { [filterOn]: { _eq: filterValue } };
-        case "notBetween":
-          return {
-            _or: [
-              {
-                [filterOn]: {
-                  _lt: new Date(arrayFilterValue[0])
-                }
-              },
-              {
-                [filterOn]: {
-                  _gt: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+          case "notEmpty":
+            return {
+              _and: [
+                { [filterOn2]: { _neq: "" } },
+                { [filterOn2]: { _is_null: false } }
+              ]
+            };
+          case "inList":
+            return { [filterOn2]: { _in: filterValue } };
+          case "notInList":
+            return { [filterOn2]: { _nin: filterValue } };
+          case "true":
+            return { [filterOn2]: { _eq: true } };
+          case "false":
+            return { [filterOn2]: { _eq: false } };
+          case "dateIs":
+            return { [filterOn2]: { _eq: filterValue } };
+          case "notBetween":
+            return {
+              _or: [
+                {
+                  [filterOn2]: {
+                    _lt: new Date(arrayFilterValue[0])
+                  }
+                },
+                {
+                  [filterOn2]: {
+                    _gt: new Date(
+                      new Date(arrayFilterValue[1]).setHours(23, 59)
+                    )
+                  }
                 }
+              ]
+            };
+          case "isBetween":
+            return {
+              [filterOn2]: {
+                _gte: new Date(arrayFilterValue[0]),
+                _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
               }
-            ]
-          };
-        case "isBetween":
-          return {
-            [filterOn]: {
-              _gte: new Date(arrayFilterValue[0]),
-              _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
-            }
-          };
-        case "isBefore":
-          return { [filterOn]: { _lt: new Date(filterValue) } };
-        case "isAfter":
-          return { [filterOn]: { _gt: new Date(filterValue) } };
-        case "greaterThan":
-          return { [filterOn]: { _gt: parseFloat(filterValue) } };
-        case "lessThan":
-          return { [filterOn]: { _lt: parseFloat(filterValue) } };
-        case "inRange":
-          return {
-            [filterOn]: {
-              _gte: parseFloat(arrayFilterValue[0]),
-              _lte: parseFloat(arrayFilterValue[1])
-            }
-          };
-        case "outsideRange":
-          return {
-            _or: [
-              {
-                [filterOn]: {
-                  _lt: parseFloat(arrayFilterValue[0])
-                }
-              },
-              {
-                [filterOn]: {
-                  _gt: parseFloat(arrayFilterValue[1])
+            };
+          case "isBefore":
+            return { [filterOn2]: { _lt: new Date(filterValue) } };
+          case "isAfter":
+            return { [filterOn2]: { _gt: new Date(filterValue) } };
+          case "greaterThan":
+            return { [filterOn2]: { _gt: parseFloat(filterValue) } };
+          case "lessThan":
+            return { [filterOn2]: { _lt: parseFloat(filterValue) } };
+          case "inRange":
+            return {
+              [filterOn2]: {
+                _gte: parseFloat(arrayFilterValue[0]),
+                _lte: parseFloat(arrayFilterValue[1])
+              }
+            };
+          case "outsideRange":
+            return {
+              _or: [
+                {
+                  [filterOn2]: {
+                    _lt: parseFloat(arrayFilterValue[0])
+                  }
+                },
+                {
+                  [filterOn2]: {
+                    _gt: parseFloat(arrayFilterValue[1])
+                  }
                 }
+              ]
+            };
+          case "equalTo":
+            return {
+              [filterOn2]: {
+                _eq: type2 === "number" || type2 === "integer" ? parseFloat(filterValue) : filterValue
               }
-            ]
-          };
-        case "equalTo":
-          return {
-            [filterOn]: {
-              _eq: type2 === "number" || type2 === "integer" ? parseFloat(filterValue) : filterValue
-            }
-          };
-        case "regex":
-          return { [filterOn]: { _regex: filterValue } };
-        default:
-          console.warn(`Unsupported filter type: ${selectedFilter}`);
-          return {};
+            };
+          case "regex":
+            return { [filterOn2]: { _regex: filterValue } };
+          default:
+            console.warn(`Unsupported filter type: ${selectedFilter}`);
+            return {};
+        }
       }
+      __name(addColumnFilters, "addColumnFilters");
     });
     if (filterClauses.length > 0) {
       if (Object.keys(where).length > 0) {
@@ -20259,10 +20363,15 @@ function getQueryParams({
         const ccDisplayName = orderVal.replace(/^-/gi, "");
         const schemaForField = ccFields[ccDisplayName];
         if (schemaForField) {
-          const { path: path2 } = schemaForField;
+          const { path: path2, additionalSearchPaths } = schemaForField;
           const reversed = ccDisplayName !== orderVal;
           const prefix2 = reversed ? "-" : "";
           cleanedOrder.push(prefix2 + path2);
+          if (additionalSearchPaths && additionalSearchPaths.length) {
+            additionalSearchPaths.forEach((additionalPath) => {
+              cleanedOrder.push(prefix2 + additionalPath);
+            });
+          }
         } else {
           !noOrderError && console.error(
             "No schema for field found!",
@@ -30315,19 +30424,19 @@ function dequal(foo, bar) {
 }
 __name(dequal, "dequal");
 function useDeepCompareMemoize(value) {
-  var ref2 = React.useRef(value);
-  var signalRef = React.useRef(0);
+  var ref2 = React$1.useRef(value);
+  var signalRef = React$1.useRef(0);
   if (!dequal(value, ref2.current)) {
     ref2.current = value;
     signalRef.current += 1;
   }
-  return React.useMemo(function() {
+  return React$1.useMemo(function() {
     return ref2.current;
   }, [signalRef.current]);
 }
 __name(useDeepCompareMemoize, "useDeepCompareMemoize");
 function useDeepCompareEffect(callback2, dependencies) {
-  return React.useEffect(callback2, useDeepCompareMemoize(dependencies));
+  return React$1.useEffect(callback2, useDeepCompareMemoize(dependencies));
 }
 __name(useDeepCompareEffect, "useDeepCompareEffect");
 var fuzzysearch_1;
@@ -32596,6 +32705,7 @@ const _TgSelect = class _TgSelect extends React__default.Component {
             }
           }, "onKeyDown"),
           inputProps: __spreadValues({
+            autoComplete: "off",
             name: "tg-multiselect-input",
             autoFocus: autoFocus || autoOpen,
             onBlur
@@ -34209,6 +34319,159 @@ const SearchBar = /* @__PURE__ */ __name(({
     })
   );
 }, "SearchBar");
+const restrictToHorizontalAxis = /* @__PURE__ */ __name((_ref) => {
+  let {
+    transform
+  } = _ref;
+  return __spreadProps(__spreadValues({}, transform), {
+    y: 0
+  });
+}, "restrictToHorizontalAxis");
+const restrictToVerticalAxis = /* @__PURE__ */ __name((_ref) => {
+  let {
+    transform
+  } = _ref;
+  return __spreadProps(__spreadValues({}, transform), {
+    x: 0
+  });
+}, "restrictToVerticalAxis");
+const DraggableColumnOption = /* @__PURE__ */ __name(({
+  field,
+  index: index2,
+  onVisibilityChange,
+  numVisible
+}) => {
+  const { displayName, isHidden, path: path2, subFrag, immovable, type: type2 } = field;
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: path2,
+    disabled: immovable === "true"
+  });
+  if (type2 === "action") {
+    return null;
+  }
+  const style2 = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    cursor: "grab",
+    marginBottom: 5
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    __spreadValues(__spreadValues({
+      ref: setNodeRef,
+      style: style2,
+      className: "SortableItem",
+      "data-path": path2
+    }, attributes), listeners),
+    /* @__PURE__ */ React__default.createElement(
+      Checkbox,
+      {
+        name: `${path2}-${index2}`,
+        key: index2,
+        onChange: /* @__PURE__ */ __name(() => {
+          if (numVisible <= 1 && !isHidden) {
+            return window.toastr.warning(
+              "We have to display at least one column :)"
+            );
+          }
+          onVisibilityChange({ shouldShow: isHidden, path: path2 });
+        }, "onChange"),
+        checked: !isHidden,
+        label: /* @__PURE__ */ React__default.createElement("span", { style: { display: "flex", marginTop: -17 } }, displayName, " ", field.fieldGroup && /* @__PURE__ */ React__default.createElement(
+          "span",
+          {
+            style: { fontSize: 10, marginLeft: 5, marginTop: 2 },
+            className: Classes.TEXT_MUTED
+          },
+          "(",
+          field.fieldGroup,
+          ")"
+        ), subFrag && /* @__PURE__ */ React__default.createElement(InfoHelper, { style: { marginLeft: 5 } }, "Note: Viewing this complex column may cause the table to load slower. Try hiding it for better performance."))
+      }
+    )
+  );
+}, "DraggableColumnOption");
+const DraggableColumnOptions = /* @__PURE__ */ __name(({
+  fields,
+  onVisibilityChange,
+  moveColumnPersist,
+  numVisible
+}) => {
+  const [sortedFields, setSortedFields] = useState(fields);
+  useEffect(() => {
+    setSortedFields(fields);
+  }, [fields]);
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  });
+  const sensors = useSensors(mouseSensor);
+  const handleDragStart = /* @__PURE__ */ __name((event) => {
+    document.body.classList.add("column-dragging");
+    const { active: active2 } = event;
+    if (active2) {
+      const activeNode = document.querySelector(`[data-path="${active2.id}"]`);
+      if (activeNode) {
+        activeNode.classList.add("dragging");
+      }
+    }
+  }, "handleDragStart");
+  const handleDragEnd = /* @__PURE__ */ __name((event) => {
+    document.body.classList.remove("column-dragging");
+    const draggingItem = document.querySelector(".SortableItem.dragging");
+    if (draggingItem) {
+      draggingItem.classList.remove("dragging");
+    }
+    const { active: active2, over } = event;
+    if (!over || !active2 || active2.id === over.id) {
+      return;
+    }
+    const oldIndex = sortedFields.findIndex((f2) => f2.path === active2.id);
+    const newIndex = sortedFields.findIndex((f2) => f2.path === over.id);
+    const newSortedFields = arrayMove(sortedFields, oldIndex, newIndex);
+    setSortedFields(newSortedFields);
+    moveColumnPersist({ oldIndex, newIndex });
+  }, "handleDragEnd");
+  return /* @__PURE__ */ React__default.createElement(
+    DndContext,
+    {
+      sensors,
+      modifiers: [restrictToVerticalAxis],
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd
+    },
+    /* @__PURE__ */ React__default.createElement(
+      SortableContext,
+      {
+        items: sortedFields.map((field) => field.path),
+        strategy: verticalListSortingStrategy
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, sortedFields.map((field, index2) => /* @__PURE__ */ React__default.createElement(
+        DraggableColumnOption,
+        {
+          key: field.path || index2,
+          field,
+          index: index2,
+          onVisibilityChange,
+          numVisible
+        }
+      )))
+    )
+  );
+}, "DraggableColumnOptions");
+const dragNoticeEl = /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: Classes.TEXT_MUTED,
+    style: {
+      padding: 10,
+      fontSize: "12px"
+    }
+  },
+  /* @__PURE__ */ React.createElement(Icon, { icon: "info-sign", size: 12 }),
+  " Drag columns to reorder them"
+);
 const DisplayOptions = /* @__PURE__ */ __name(({
   compact,
   extraCompact,
@@ -34218,13 +34481,13 @@ const DisplayOptions = /* @__PURE__ */ __name(({
   resetDefaultVisibility = noop$8,
   updateColumnVisibility = noop$8,
   updateTableDisplayDensity,
+  moveColumnPersist = noop$8,
   showForcedHiddenColumns,
   setShowForcedHidden,
   hasOptionForForcedHidden,
   schema: schema2
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [searchTerms, setSearchTerms] = useState({});
   const changeTableDensity = /* @__PURE__ */ __name((e) => {
     updateTableDisplayDensity(e.target.value);
     setIsOpen(false);
@@ -34234,85 +34497,10 @@ const DisplayOptions = /* @__PURE__ */ __name(({
     return null;
   }
   const { fields } = schema2;
-  const fieldGroups = {};
-  const mainFields = [];
+  let numVisible = 0;
   fields.forEach((field) => {
-    if (field.hideInMenu) return;
-    if (!field.fieldGroup) return mainFields.push(field);
-    if (!fieldGroups[field.fieldGroup]) fieldGroups[field.fieldGroup] = [];
-    fieldGroups[field.fieldGroup].push(field);
+    if (!field.isHidden && field.type !== "action") numVisible++;
   });
-  let numVisible = 0;
-  const getFieldCheckbox = /* @__PURE__ */ __name((field, i) => {
-    const { displayName, isHidden, isForcedHidden, path: path2, subFrag } = field;
-    if (isForcedHidden) return;
-    if (!isHidden) numVisible++;
-    return /* @__PURE__ */ React__default.createElement(
-      Checkbox,
-      {
-        name: `${path2}-${i}`,
-        key: path2 || i,
-        onChange: /* @__PURE__ */ __name(() => {
-          if (numVisible <= 1 && !isHidden) {
-            return window.toastr.warning(
-              "We have to display at least one column :)"
-            );
-          }
-          updateColumnVisibility({ shouldShow: isHidden, path: path2 });
-        }, "onChange"),
-        checked: !isHidden,
-        label: /* @__PURE__ */ React__default.createElement("span", { style: { display: "flex", marginTop: -17 } }, displayName, subFrag && /* @__PURE__ */ React__default.createElement(
-          InfoHelper,
-          {
-            icon: "warning-sign",
-            intent: "warning",
-            style: { marginLeft: 5 }
-          },
-          "Viewing this column may cause the table to load slower"
-        ))
-      }
-    );
-  }, "getFieldCheckbox");
-  let fieldGroupMenu;
-  if (!isEmpty$1(fieldGroups)) {
-    fieldGroupMenu = map$3(fieldGroups, (groupFields, groupName) => {
-      const searchTerm = searchTerms[groupName] || "";
-      const anyVisible = groupFields.some(
-        (field) => !field.isHidden && !field.isForcedHidden
-      );
-      const anyNotForcedHidden = groupFields.some(
-        (field) => !field.isForcedHidden
-      );
-      if (!anyNotForcedHidden) return;
-      return /* @__PURE__ */ React__default.createElement(MenuItem, { key: groupName, text: groupName }, /* @__PURE__ */ React__default.createElement(
-        InputGroup,
-        {
-          leftIcon: "search",
-          value: searchTerm,
-          onChange: /* @__PURE__ */ __name((e) => {
-            setSearchTerms((prev) => __spreadProps(__spreadValues({}, prev), {
-              [groupName]: e.target.value
-            }));
-          }, "onChange")
-        }
-      ), /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          className: Classes.MINIMAL,
-          text: (anyVisible ? "Hide" : "Show") + " All",
-          style: { margin: "10px 0" },
-          onClick: /* @__PURE__ */ __name(() => {
-            updateColumnVisibility({
-              shouldShow: !anyVisible,
-              paths: groupFields.map((field) => field.path)
-            });
-          }, "onClick")
-        }
-      ), groupFields.filter(
-        (field) => startCase(getCCDisplayName(field)).toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
-      ).map(getFieldCheckbox));
-    });
-  }
   return /* @__PURE__ */ React__default.createElement(
     Popover,
     {
@@ -34339,14 +34527,22 @@ const DisplayOptions = /* @__PURE__ */ __name(({
         {
           style: {
             fontWeight: "bold",
-            marginBottom: 10,
+            marginBottom: 0,
             marginTop: 10,
             display: "flex"
           }
         },
         "Displayed Columns:  ",
         doNotSearchHiddenColumns && /* @__PURE__ */ React__default.createElement(InfoHelper, null, "Note: Hidden columns will NOT be used when searching the datatable")
-      ), /* @__PURE__ */ React__default.createElement("div", { style: { maxHeight: 260, overflowY: "auto", padding: 2 } }, mainFields.map(getFieldCheckbox)), /* @__PURE__ */ React__default.createElement("div", null, fieldGroupMenu), hasOptionForForcedHidden && /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 15 } }, /* @__PURE__ */ React__default.createElement(
+      ), dragNoticeEl, /* @__PURE__ */ React__default.createElement("div", { style: { maxHeight: 360, overflowY: "auto", padding: 2 } }, /* @__PURE__ */ React__default.createElement(
+        DraggableColumnOptions,
+        {
+          fields,
+          onVisibilityChange: updateColumnVisibility,
+          moveColumnPersist,
+          numVisible
+        }
+      )), hasOptionForForcedHidden && /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 15 } }, /* @__PURE__ */ React__default.createElement(
         Switch,
         {
           label: "Show Empty Columns",
@@ -34354,24 +34550,15 @@ const DisplayOptions = /* @__PURE__ */ __name(({
           onChange: toggleForcedHidden
         }
       )), /* @__PURE__ */ React__default.createElement(
-        "div",
+        Button,
         {
-          style: {
-            width: "100%",
-            display: "flex",
-            justifyContent: "flex-end"
-          }
+          style: { marginTop: 5 },
+          onClick: resetDefaultVisibility,
+          title: "Display Options",
+          icon: "reset",
+          minimal: true
         },
-        /* @__PURE__ */ React__default.createElement(
-          Button,
-          {
-            onClick: resetDefaultVisibility,
-            title: "Display Options",
-            icon: "reset",
-            minimal: true
-          },
-          "Reset Column Visibilites"
-        )
+        "Reset Column Visibilites"
       )))
     },
     /* @__PURE__ */ React__default.createElement(
@@ -34398,22 +34585,22 @@ function DisabledLoadingComponent({ disabled, loading, loadingText }) {
   );
 }
 __name(DisabledLoadingComponent, "DisabledLoadingComponent");
-const restrictToHorizontalAxis = /* @__PURE__ */ __name((_ref) => {
-  let {
-    transform
-  } = _ref;
-  return __spreadProps(__spreadValues({}, transform), {
-    y: 0
-  });
-}, "restrictToHorizontalAxis");
 const CustomTheadComponent = /* @__PURE__ */ __name(({
   children: _children,
   className,
-  onSortEnd,
-  onSortStart,
+  moveColumn,
+  sortedItemsFull,
   style: style2
 }) => {
   const children = _children.props.children;
+  const [sortedItems, setSortedItems] = useState(
+    () => children.map((c2) => {
+      return c2.props.path || c2.key.split("-")[1];
+    })
+  );
+  useEffect(() => {
+    setSortedItems(children.map((c2) => c2.props.path || c2.key.split("-")[1]));
+  }, [children]);
   const mouseSensor = useSensor(MouseSensor, {
     activationConstraint: {
       distance: 10
@@ -34428,15 +34615,17 @@ const CustomTheadComponent = /* @__PURE__ */ __name(({
     if (active2.id === over.id) {
       return;
     }
-    onSortEnd({
-      oldIndex: parseInt(active2.id),
-      newIndex: parseInt(over.id)
-    });
+    const oldPath = active2.id;
+    const newPath = over.id;
+    const oldIndex = sortedItemsFull.indexOf(oldPath);
+    const newIndex = sortedItemsFull.indexOf(newPath);
+    const newSortedItems = arrayMove(sortedItemsFull, oldIndex, newIndex);
+    setSortedItems(newSortedItems);
+    moveColumn({ oldIndex, newIndex });
   }, "handleDragEnd");
   return /* @__PURE__ */ React__default.createElement(
     DndContext,
     {
-      onDragStart: onSortStart,
       onDragEnd: handleDragEnd,
       modifiers: [restrictToHorizontalAxis],
       sensors
@@ -34444,36 +34633,31 @@ const CustomTheadComponent = /* @__PURE__ */ __name(({
     /* @__PURE__ */ React__default.createElement("div", { className: "rt-thead " + className, style: style2 }, /* @__PURE__ */ React__default.createElement("div", { className: "rt-tr" }, /* @__PURE__ */ React__default.createElement(
       SortableContext,
       {
-        items: children.map((_2, index2) => `${index2}`),
+        items: sortedItems,
         strategy: horizontalListSortingStrategy
       },
       children
     )))
   );
 }, "CustomTheadComponent");
-const SortableColumns = /* @__PURE__ */ __name(({ className, style: style2, children, moveColumn }) => {
+const SortableColumns = /* @__PURE__ */ __name(({
+  className,
+  style: style2,
+  children,
+  moveColumn,
+  sortedItemsFull
+}) => {
   const shouldCancelStart = /* @__PURE__ */ __name((e) => {
     const className2 = e.target.className;
     return e.target instanceof SVGElement || className2.indexOf("rt-resizer") > -1;
   }, "shouldCancelStart");
-  const onSortEnd = /* @__PURE__ */ __name((...args) => {
-    const { oldIndex, newIndex } = args[0];
-    document.body.classList.remove("drag-active");
-    moveColumn({
-      oldIndex,
-      newIndex
-    });
-  }, "onSortEnd");
-  const onSortStart = /* @__PURE__ */ __name(() => {
-    document.body.classList.add("drag-active");
-  }, "onSortStart");
   return /* @__PURE__ */ React__default.createElement(
     CustomTheadComponent,
     {
       className,
       style: style2,
-      onSortStart,
-      onSortEnd,
+      sortedItemsFull,
+      moveColumn,
       helperClass: "above-dialog",
       shouldCancelStart
     },
@@ -36913,7 +37097,6 @@ __name(getTableConfigFromStorage, "getTableConfigFromStorage");
 const viewColumn = {
   width: 35,
   noEllipsis: true,
-  hideInMenu: true,
   immovable: true,
   type: "action",
   render: /* @__PURE__ */ __name(() => {
@@ -51427,6 +51610,7 @@ const RenderColumnHeader = /* @__PURE__ */ __name(({
         e.persist();
         showContextMenu(
           [
+            dragNoticeEl,
             {
               text: "Hide Column",
               disabled: onlyOneVisibleColumn,
@@ -52104,7 +52288,10 @@ const useColumns = /* @__PURE__ */ __name(({
       }, "getProps")
     });
   }
-  const tableColumns = columns.map((column) => {
+  const tableColumns = flatMap(columns, (column) => {
+    if (column.isHidden) {
+      return [];
+    }
     const tableColumn = __spreadProps(__spreadValues({}, column), {
       Header: RenderColumnHeader({
         onlyOneVisibleColumn: columns.length === 1,
@@ -52136,8 +52323,9 @@ const useColumns = /* @__PURE__ */ __name(({
       getHeaderProps: /* @__PURE__ */ __name(() => ({
         // needs to be a string because it is getting passed
         // to the dom
-        immovable: column.immovable ? "true" : "false",
-        columnindex: column.columnIndex
+        immovable: column.type === "action" || column.immovable ? "true" : "false",
+        columnindex: column.columnIndex,
+        path: column.path
       }), "getHeaderProps")
     });
     const noEllipsis = column.noEllipsis;
@@ -56345,7 +56533,6 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
     "anyTouched",
     "blur"
   ]);
-  var _a2;
   if (isTableParamsConnected && _tableParams && !_tableParams.entities) {
     throw new Error(
       `No entities array detected in tableParams object (<DataTable {...tableParams}/>). You need to call withQuery() after withTableParams() like: compose(withTableParams(), withQuery(something)).`
@@ -56425,12 +56612,11 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
   const {
     doNotCoercePageSize,
     isInfinite = isSimple && !withPaging,
-    syncDisplayOptionsToDb,
     urlConnected,
     withSelectedEntities: withSelectedEntities2
   } = props;
   const defaults2 = useMemo$1(() => {
-    var _a3;
+    var _a2;
     const _defaults = __spreadValues({
       pageSize: controlled_pageSize || 25,
       order: [],
@@ -56446,11 +56632,11 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
         // }
       ]
     }, props.defaults || {});
-    if (isLocalCall && orderByFirstColumn && !((_a3 = _defaults == null ? void 0 : _defaults.order) == null ? void 0 : _a3.length)) {
+    if (isLocalCall && orderByFirstColumn && !((_a2 = _defaults == null ? void 0 : _defaults.order) == null ? void 0 : _a2.length)) {
       const r2 = [getCCDisplayName(convertedSchema.fields[0])];
       _defaults.order = r2;
     }
-    if (!syncDisplayOptionsToDb && userSetPageSize) {
+    if (userSetPageSize) {
       _defaults.pageSize = userSetPageSize;
     }
     return _defaults;
@@ -56460,7 +56646,6 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
     isLocalCall,
     orderByFirstColumn,
     props.defaults,
-    syncDisplayOptionsToDb,
     userSetPageSize
   ]);
   const selectedEntities = withSelectedEntities2 ? getRecordsFromIdMap(reduxFormSelectedEntityIdMap) : void 0;
@@ -56558,8 +56743,6 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
     controlled_setPage,
     controlled_setPageSize,
     controlled_total,
-    currentUser,
-    deleteTableConfiguration,
     disabled = false,
     disableSetPageSize,
     doNotShowEmptyRows,
@@ -56629,15 +56812,13 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
     setPageSize = noop$8,
     setSearchTerm = noop$8,
     shouldShowSubComponent,
-    showCount = false,
+    showCount = true,
     style: style2 = {},
     SubComponent,
     subHeader,
     tableConfigurations,
     tableName,
     topLeftItems,
-    upsertFieldOption,
-    upsertTableConfiguration,
     variables,
     withCheckboxes = false,
     withDisplayOptions,
@@ -56694,11 +56875,7 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
   useEffect(() => {
     if (withDisplayOptions) {
       let newTableConfig = {};
-      if (syncDisplayOptionsToDb) {
-        newTableConfig = tableConfigurations && tableConfigurations[0];
-      } else {
-        newTableConfig = getTableConfigFromStorage(formName);
-      }
+      newTableConfig = getTableConfigFromStorage(formName);
       setTableConfig((prev) => {
         if (!newTableConfig) {
           newTableConfig = {
@@ -56719,7 +56896,6 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
     // If the schema changes we want to take into account the synced tableConfig again
     formName,
     setTableConfig,
-    syncDisplayOptionsToDb,
     tableConfigurations,
     withDisplayOptions,
     noExcessiveCheck
@@ -56767,8 +56943,7 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
         }
         if (noValsForField && entities.length) {
           return __spreadProps(__spreadValues({}, field), {
-            isHidden: true,
-            isForcedHidden: true
+            isHidden: true
           });
         } else if (fieldOpt) {
           return __spreadProps(__spreadValues({}, field), {
@@ -56822,6 +56997,7 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
     withDisplayOptions,
     recordIdToIsVisibleMap
   ]);
+  const [columns, setColumns] = useState([]);
   const {
     moveColumnPersist,
     persistPageSize,
@@ -56838,69 +57014,37 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
     let resizePersist2 = noop$8;
     if (withDisplayOptions) {
       const fieldOptsByPath = keyBy(tableConfig.fieldOptions, "path");
-      if (syncDisplayOptionsToDb) {
-        let tableConfigurationId;
-        resetDefaultVisibility2 = /* @__PURE__ */ __name(function() {
-          tableConfigurationId = tableConfig.id;
-          if (tableConfigurationId) {
-            deleteTableConfiguration(tableConfigurationId);
-          }
-        }, "resetDefaultVisibility2");
-        updateColumnVisibility2 = /* @__PURE__ */ __name(function({ shouldShow, path: path2 }) {
-          if (tableConfigurationId) {
-            const existingFieldOpt = fieldOptsByPath[path2] || {};
-            upsertFieldOption({
-              id: existingFieldOpt.id,
-              path: path2,
-              isHidden: !shouldShow,
-              tableConfigurationId
-            });
-          } else {
-            upsertTableConfiguration({
-              userId: currentUser.user.id,
-              formName,
-              fieldOptions: [
-                {
-                  path: path2,
-                  isHidden: !shouldShow
-                }
-              ]
-            });
-          }
-        }, "updateColumnVisibility2");
-      } else {
-        const syncStorage = /* @__PURE__ */ __name((newTableConfig) => {
-          setTableConfig(newTableConfig);
-          window.localStorage.setItem(formName, JSON.stringify(newTableConfig));
-        }, "syncStorage");
-        resetDefaultVisibility2 = /* @__PURE__ */ __name(function() {
-          setTableConfig({ fieldOptions: [] });
-          window.localStorage.removeItem(formName);
-        }, "resetDefaultVisibility2");
-        updateColumnVisibility2 = /* @__PURE__ */ __name(function({ path: path2, paths, shouldShow }) {
-          const newFieldOpts = __spreadValues({}, fieldOptsByPath);
-          const pathsToUse = paths ? paths : [path2];
-          pathsToUse.forEach((path22) => {
-            newFieldOpts[path22] = { path: path22, isHidden: !shouldShow };
-          });
-          syncStorage(__spreadProps(__spreadValues({}, tableConfig), { fieldOptions: toArray(newFieldOpts) }));
-        }, "updateColumnVisibility2");
-        updateTableDisplayDensity2 = /* @__PURE__ */ __name(function(density) {
-          syncStorage(__spreadProps(__spreadValues({}, tableConfig), { density }));
-        }, "updateTableDisplayDensity2");
-        persistPageSize2 = /* @__PURE__ */ __name(function(pageSize2) {
-          syncStorage(__spreadProps(__spreadValues({}, tableConfig), { userSetPageSize: pageSize2 }));
-        }, "persistPageSize2");
-        moveColumnPersist2 = /* @__PURE__ */ __name(function({ oldIndex, newIndex }) {
-          const columnOrderings = tableConfig.columnOrderings || schema2.fields.map(({ path: path2 }) => path2);
-          syncStorage(__spreadProps(__spreadValues({}, tableConfig), {
-            columnOrderings: arrayMove(columnOrderings, oldIndex, newIndex)
-          }));
-        }, "moveColumnPersist2");
-        resizePersist2 = /* @__PURE__ */ __name(function(newResized) {
-          syncStorage(__spreadProps(__spreadValues({}, tableConfig), { resized: newResized }));
-        }, "resizePersist2");
-      }
+      const syncStorage = /* @__PURE__ */ __name((newTableConfig) => {
+        setTableConfig(newTableConfig);
+        window.localStorage.setItem(formName, JSON.stringify(newTableConfig));
+      }, "syncStorage");
+      resetDefaultVisibility2 = /* @__PURE__ */ __name(function() {
+        setTableConfig({ fieldOptions: [] });
+        window.localStorage.removeItem(formName);
+      }, "resetDefaultVisibility2");
+      updateColumnVisibility2 = /* @__PURE__ */ __name(function({ path: path2, paths, shouldShow }) {
+        const newFieldOpts = __spreadValues({}, fieldOptsByPath);
+        const pathsToUse = paths ? paths : [path2];
+        pathsToUse.forEach((path22) => {
+          newFieldOpts[path22] = { path: path22, isHidden: !shouldShow };
+        });
+        syncStorage(__spreadProps(__spreadValues({}, tableConfig), { fieldOptions: toArray(newFieldOpts) }));
+      }, "updateColumnVisibility2");
+      updateTableDisplayDensity2 = /* @__PURE__ */ __name(function(density) {
+        syncStorage(__spreadProps(__spreadValues({}, tableConfig), { density }));
+      }, "updateTableDisplayDensity2");
+      persistPageSize2 = /* @__PURE__ */ __name(function(pageSize2) {
+        syncStorage(__spreadProps(__spreadValues({}, tableConfig), { userSetPageSize: pageSize2 }));
+      }, "persistPageSize2");
+      moveColumnPersist2 = /* @__PURE__ */ __name(function({ oldIndex, newIndex }) {
+        const columnOrderings = tableConfig.columnOrderings || columns.map(({ path: path2 }) => path2);
+        syncStorage(__spreadProps(__spreadValues({}, tableConfig), {
+          columnOrderings: arrayMove(columnOrderings, oldIndex, newIndex)
+        }));
+      }, "moveColumnPersist2");
+      resizePersist2 = /* @__PURE__ */ __name(function(newResized) {
+        syncStorage(__spreadProps(__spreadValues({}, tableConfig), { resized: newResized }));
+      }, "resizePersist2");
     }
     return {
       moveColumnPersist: moveColumnPersist2,
@@ -56910,18 +57054,7 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
       updateColumnVisibility: updateColumnVisibility2,
       updateTableDisplayDensity: updateTableDisplayDensity2
     };
-  }, [
-    (_a2 = currentUser == null ? void 0 : currentUser.user) == null ? void 0 : _a2.id,
-    deleteTableConfiguration,
-    formName,
-    setTableConfig,
-    schema2.fields,
-    syncDisplayOptionsToDb,
-    tableConfig,
-    upsertFieldOption,
-    upsertTableConfiguration,
-    withDisplayOptions
-  ]);
+  }, [formName, setTableConfig, columns, tableConfig, withDisplayOptions]);
   let compact = _compact;
   let extraCompact = _extraCompact;
   if (withDisplayOptions && tableConfig.density) {
@@ -57227,8 +57360,8 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
   const waitUntilAllRowsAreRendered = useCallback$1(() => {
     return new Promise((resolve) => {
       const interval = setInterval(() => {
-        var _a3, _b2;
-        const allRowEls = (_b2 = (_a3 = tableRef.current) == null ? void 0 : _a3.tableRef) == null ? void 0 : _b2.querySelectorAll(".rt-tr-group");
+        var _a2, _b2;
+        const allRowEls = (_b2 = (_a2 = tableRef.current) == null ? void 0 : _a2.tableRef) == null ? void 0 : _b2.querySelectorAll(".rt-tr-group");
         if ((allRowEls == null ? void 0 : allRowEls.length) === entities.length) {
           clearInterval(interval);
           resolve();
@@ -57545,7 +57678,6 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
     ]
   );
   const { handleKeyDown, handleKeyUp } = useHotkeys(hotKeys);
-  const [columns, setColumns] = useState([]);
   const [fullscreen, setFullscreen] = useState(false);
   const [selectingAll, setSelectingAll] = useState(false);
   useEffect(() => {
@@ -57726,16 +57858,15 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
     addFilters(additionalFilters);
   }, [additionalFilters]);
   useEffect(() => {
-    setColumns(
-      schema2.fields ? schema2.fields.reduce((col, field, i) => {
-        if (field.isHidden) {
-          return col;
-        }
-        return col.concat(__spreadProps(__spreadValues({}, field), {
-          columnIndex: i
-        }));
-      }, []) : []
-    );
+    const newCols = schema2.fields ? schema2.fields.reduce((columns2, field, i) => {
+      if (field.isHidden) {
+        return columns2.concat(field);
+      }
+      return columns2.concat(__spreadProps(__spreadValues({}, field), {
+        columnIndex: i
+      }));
+    }, []) : [];
+    setColumns(newCols);
   }, [schema2 == null ? void 0 : schema2.fields]);
   const setSelectedIds = useCallback$1(
     (selectedIds2, scrollToFirst) => {
@@ -57804,25 +57935,19 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
   const TheadComponent = useCallback$1(
     ({ className: className2, style: style22, children: children2 }) => {
       const moveColumn = /* @__PURE__ */ __name(({ oldIndex, newIndex }) => {
-        let oldStateColumnIndex, newStateColumnIndex;
-        columns.forEach((column, i) => {
-          if (oldIndex === column.columnIndex) oldStateColumnIndex = i;
-          if (newIndex === column.columnIndex) newStateColumnIndex = i;
-        });
-        const newColumns = arrayMove(
-          columns,
-          oldStateColumnIndex,
-          newStateColumnIndex
-        ).map((column, i) => {
-          return __spreadProps(__spreadValues({}, column), {
-            columnIndex: i
-          });
-        });
+        const newColumns = arrayMove(columns, oldIndex, newIndex).map(
+          (column, i) => {
+            return __spreadProps(__spreadValues({}, column), {
+              columnIndex: i
+            });
+          }
+        );
         setColumns(newColumns);
       }, "moveColumn");
       return /* @__PURE__ */ React__default.createElement(
         SortableColumns,
         {
+          sortedItemsFull: columns.map((c2) => c2.path),
           className: className2,
           style: style22,
           moveColumn: moveColumnPersist || moveColumn
@@ -57855,8 +57980,8 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
     });
   }, "addEntitiesToSelection");
   const refocusTable = useCallback$1(() => {
-    var _a3, _b2;
-    const table2 = (_b2 = (_a3 = tableRef.current) == null ? void 0 : _a3.tableRef) == null ? void 0 : _b2.closest(
+    var _a2, _b2;
+    const table2 = (_b2 = (_a2 = tableRef.current) == null ? void 0 : _a2.tableRef) == null ? void 0 : _b2.closest(
       ".data-table-container>div"
     );
     table2 == null ? void 0 : table2.focus();
@@ -58690,8 +58815,8 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
   });
   const scrollToTop = useCallback$1(
     () => {
-      var _a3, _b2, _c, _d, _e, _f;
-      return (_f = (_e = (_d = (_c = (_b2 = (_a3 = tableRef.current) == null ? void 0 : _a3.tableRef) == null ? void 0 : _b2.children) == null ? void 0 : _c[0]) == null ? void 0 : _d.children) == null ? void 0 : _e[0]) == null ? void 0 : _f.scrollIntoView();
+      var _a2, _b2, _c, _d, _e, _f;
+      return (_f = (_e = (_d = (_c = (_b2 = (_a2 = tableRef.current) == null ? void 0 : _a2.tableRef) == null ? void 0 : _b2.children) == null ? void 0 : _c[0]) == null ? void 0 : _d.children) == null ? void 0 : _e[0]) == null ? void 0 : _f.scrollIntoView();
     },
     []
   );
@@ -58704,7 +58829,7 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
         noVirtual,
         className: classNames({
           isCellEditable,
-          "loading": isLoading,
+          loading: isLoading,
           "tg-table-loading": isLoading,
           "tg-table-disabled": disabled
         }),
@@ -58808,10 +58933,10 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
         }, isCellEditable && {
           tabIndex: -1,
           onKeyDown: /* @__PURE__ */ __name((e) => {
-            var _a3, _b2, _c, _d, _e, _f, _g, _h;
+            var _a2, _b2, _c, _d, _e, _f, _g, _h;
             const isTabKey = e.key === "Tab";
             const isArrowKey = e.key.startsWith("Arrow");
-            if (isArrowKey && ((_a3 = e.target) == null ? void 0 : _a3.tagName) !== "INPUT" || isTabKey) {
+            if (isArrowKey && ((_a2 = e.target) == null ? void 0 : _a2.tagName) !== "INPUT" || isTabKey) {
               const left2 = e.key === "ArrowLeft";
               const up = e.key === "ArrowUp";
               const down = e.key === "ArrowDown" || e.key === "Enter";
@@ -59090,6 +59215,7 @@ const DataTable = /* @__PURE__ */ __name((_w) => {
               resetDefaultVisibility,
               updateColumnVisibility,
               updateTableDisplayDensity,
+              moveColumnPersist,
               showForcedHiddenColumns,
               setShowForcedHidden,
               hasOptionForForcedHidden: withDisplayOptions && (isSimple || isInfinite),
@@ -68731,10 +68857,10 @@ var Resizer = (
     }
     __name(Resizer2, "Resizer");
     Resizer2.prototype.render = function() {
-      return React.createElement("div", { className: this.props.className || "", style: __assign$2(__assign$2({ position: "absolute", userSelect: "none" }, styles[this.props.direction]), this.props.replaceStyles || {}), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children);
+      return React$1.createElement("div", { className: this.props.className || "", style: __assign$2(__assign$2({ position: "absolute", userSelect: "none" }, styles[this.props.direction]), this.props.replaceStyles || {}), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children);
     };
     return Resizer2;
-  }(React.PureComponent)
+  }(React$1.PureComponent)
 );
 var src = { exports: {} };
 var hasRequiredSrc;
@@ -69511,11 +69637,11 @@ var Resizable = (
       }
       var resizers = Object.keys(enable).map(function(dir) {
         if (enable[dir] !== false) {
-          return React.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null);
+          return React$1.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null);
         }
         return null;
       });
-      return React.createElement("div", { className: handleWrapperClass, style: handleWrapperStyle }, resizers);
+      return React$1.createElement("div", { className: handleWrapperClass, style: handleWrapperStyle }, resizers);
     };
     Resizable2.prototype.render = function() {
       var _this = this;
@@ -69531,10 +69657,10 @@ var Resizable = (
         style2.flexBasis = this.state.flexBasis;
       }
       var Wrapper = this.props.as || "div";
-      return React.createElement(
+      return React$1.createElement(
         Wrapper,
         __assign$1({ ref: this.ref, style: style2, className: this.props.className }, extendsProps),
-        this.state.isResizing && React.createElement("div", { style: this.state.backgroundStyle }),
+        this.state.isResizing && React$1.createElement("div", { style: this.state.backgroundStyle }),
         this.props.children,
         this.renderResizer()
       );
@@ -69567,7 +69693,7 @@ var Resizable = (
       snapGap: 0
     };
     return Resizable2;
-  }(React.PureComponent)
+  }(React$1.PureComponent)
 );
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -97444,7 +97570,8 @@ function getSelectionMessage({
   //these are only passed in for the status bar
   GCDecimalDigits,
   //these are only passed in for the status bar
-  isProtein: isProtein2
+  isProtein: isProtein2,
+  showAminoAcidUnitAsCodon
 }) {
   let _selectionLayer = selectionLayer2;
   const isSelecting = selectionLayer2.start > -1;
@@ -97455,7 +97582,7 @@ function getSelectionMessage({
       getSequenceWithinRange(_selectionLayer, sequenceData2.sequence)
     ).toFixed(numDecimalDigits), "GCContent");
     const seqLen = divideBy3(length, isProtein2);
-    return `${customTitle || "Selecting"} ${seqLen} ${(isProtein2 ? "AA" : "bp") + (seqLen === 1 ? "" : "s")} from ${divideBy3(_selectionLayer.start, isProtein2) + 1} to ${divideBy3(
+    return `${customTitle || "Selecting"} ${seqLen} ${(isProtein2 ? `${showAminoAcidUnitAsCodon ? "codon" : "AA"}` : "bp") + (seqLen === 1 ? "" : "s")} from ${divideBy3(_selectionLayer.start, isProtein2) + 1} to ${divideBy3(
       _selectionLayer.end + 1,
       isProtein2
     )}${showGCContent2 && !isProtein2 ? ` (${GCContent(GCDecimalDigits)}% GC)` : ""}`;
@@ -97465,7 +97592,7 @@ function getSelectionMessage({
       _selectionLayer,
       sequenceLength
     );
-    return `Caret Between ` + (isProtein2 ? `AAs ${divideBy3(insertBetween[0], true)} and ${divideBy3(
+    return `Caret Between ` + (isProtein2 ? `${showAminoAcidUnitAsCodon ? "codons" : "AAs"} ${divideBy3(insertBetween[0], true)} and ${divideBy3(
       insertBetween[1] + 2,
       true
     )}` : `Bases ${insertBetween[0]} and ${insertBetween[1]}`);
@@ -108582,7 +108709,8 @@ function Caret$2({
   onRightClick,
   style: style2,
   selectionMessage,
-  className = ""
+  className = "",
+  showAminoAcidUnitAsCodon
 }) {
   if (row.start <= caretPosition2 && row.end + 1 >= caretPosition2 || row.end === sequenceLength - 1 && row.end < caretPosition2) {
     const cursorEl = /* @__PURE__ */ React__default.createElement(
@@ -108592,7 +108720,12 @@ function Caret$2({
         onContextMenu: onRightClick ? (e) => {
           onRightClick(e);
         } : void 0,
-        title: selectionMessage || getSelectionMessage({ caretPosition: caretPosition2, isProtein: isProtein2, sequenceLength }),
+        title: selectionMessage || getSelectionMessage({
+          caretPosition: caretPosition2,
+          isProtein: isProtein2,
+          sequenceLength,
+          showAminoAcidUnitAsCodon
+        }),
         className: classNames(
           {
             notClickable: !isDraggable
@@ -108640,6 +108773,7 @@ function SelectionLayer$2(props) {
     regions,
     leftMargin = 0,
     isProtein: isProtein2,
+    showAminoAcidUnitAsCodon,
     getGaps: getGaps2,
     hideTitle: topLevelHideTitle,
     customTitle: topLevelCustomTitle,
@@ -108673,7 +108807,8 @@ function SelectionLayer$2(props) {
       selectionLayer: selectionLayer2,
       customTitle: customTitle || topLevelCustomTitle,
       sequenceLength,
-      isProtein: isProtein2
+      isProtein: isProtein2,
+      showAminoAcidUnitAsCodon
     });
     const onSelectionContextMenu = /* @__PURE__ */ __name(function(event) {
       selectionLayerRightClicked && selectionLayerRightClicked({
@@ -108714,6 +108849,7 @@ function SelectionLayer$2(props) {
                 key: key + "caret1"
               }, {
                 isProtein: isProtein2,
+                showAminoAcidUnitAsCodon,
                 leftMargin,
                 onClick: _onClick || preventDefaultStopPropagation,
                 onRightClick: onSelectionContextMenu,
@@ -108734,6 +108870,7 @@ function SelectionLayer$2(props) {
                 key: key + "caret2"
               }, {
                 isProtein: isProtein2,
+                showAminoAcidUnitAsCodon,
                 leftMargin,
                 onClick: _onClick || preventDefaultStopPropagation,
                 onRightClick: onSelectionContextMenu,
@@ -108822,6 +108959,183 @@ function getDnaColor(char, isReverse) {
   return dnaToColor[isReverse ? DNAComplementMap[char.toLowerCase()] : char.toLowerCase()] || "lightgrey";
 }
 __name(getDnaColor, "getDnaColor");
+const serineThreonineToColor = {
+  s: "#FF69B4",
+  t: "#FF69B4"
+};
+const hydrophobicityColor = {
+  i: "#F84C52",
+  // isoleucine
+  v: "#F84C52",
+  // valine
+  l: "#F84C52",
+  // leucine
+  f: "#F84C52",
+  // phenylalanine
+  c: "#F84C52",
+  // cysteine
+  m: "#C44C86",
+  // methionine
+  a: "#C44C86",
+  // alanine
+  g: "#8D4CBD",
+  // glycine
+  t: "#8D4CBD",
+  // threonine
+  s: "#8D4CBD",
+  // serine
+  w: "#8D4CBD",
+  // tryptophan
+  y: "#8D4CBD",
+  // tyrosine
+  p: "#8D4CBD",
+  // proline
+  h: "#544CF7",
+  // histidine
+  q: "#544CF7",
+  // glutamine
+  n: "#544CF7",
+  // asparagine
+  e: "#544CF7",
+  // glutamate
+  d: "#544CF7",
+  // aspartate
+  k: "#4B4CFF",
+  // lysine
+  r: "#4B4CFF"
+  // arginine
+};
+const mainHighlighter = "#4B91B8";
+const polarColors = {
+  s: mainHighlighter,
+  t: mainHighlighter,
+  n: mainHighlighter,
+  c: mainHighlighter,
+  q: mainHighlighter,
+  y: mainHighlighter
+};
+const negativeColors = {
+  e: mainHighlighter,
+  d: mainHighlighter
+};
+const positiveColors = {
+  k: mainHighlighter,
+  r: mainHighlighter,
+  h: mainHighlighter
+};
+const chargedColors = __spreadValues(__spreadValues({}, negativeColors), positiveColors);
+const aliphaticColors = {
+  g: mainHighlighter,
+  a: mainHighlighter,
+  v: mainHighlighter,
+  l: mainHighlighter,
+  i: mainHighlighter,
+  p: mainHighlighter,
+  m: mainHighlighter
+};
+const aromaticColors = {
+  f: mainHighlighter,
+  y: mainHighlighter,
+  w: mainHighlighter,
+  h: mainHighlighter
+};
+const colorScheme = {
+  a: "#C8C8C8",
+  // alanine
+  r: "#145AFF",
+  // arginine
+  n: "#00DCDC",
+  // asparagine
+  d: "#E60A0A",
+  // aspartate
+  c: "#E6E600",
+  // cysteine
+  q: "#00DCDC",
+  // glutamine
+  e: "#E60A0A",
+  // glutamate
+  g: "#EBEBEB",
+  // glycine
+  h: "#8282D2",
+  // histidine
+  i: "#0F820F",
+  // isoleucine
+  l: "#0F820F",
+  // leucine
+  k: "#145AFF",
+  // lysine
+  m: "#E6E600",
+  // methionine
+  f: "#3232AA",
+  // phenylalanine
+  p: "#DC9682",
+  // proline
+  s: "#FA9600",
+  // serine
+  t: "#FA9600",
+  // threonine
+  w: "#B45AB4",
+  // tryptophan
+  y: "#3232AA",
+  // tyrosine
+  v: "#0F820F",
+  // valine
+  x: "#BEA06E"
+};
+function hexToRgba(hex) {
+  const alpha = 0.6;
+  if (hex === "transparent") return hex;
+  hex = hex.replace(/^#/, "");
+  const bigint = parseInt(hex, 16);
+  let r2, g2, b3;
+  if (hex.length === 6) {
+    r2 = bigint >> 16 & 255;
+    g2 = bigint >> 8 & 255;
+    b3 = bigint & 255;
+  } else {
+    r2 = (bigint >> 8 & 15) * 17;
+    g2 = (bigint >> 4 & 15) * 17;
+    b3 = (bigint & 15) * 17;
+  }
+  return `rgba(${r2}, ${g2}, ${b3}, ${alpha})`;
+}
+__name(hexToRgba, "hexToRgba");
+function getAliphaticColor(char) {
+  return hexToRgba(aliphaticColors[char.toLowerCase()] || "transparent");
+}
+__name(getAliphaticColor, "getAliphaticColor");
+function getAromaticColor(char) {
+  return hexToRgba(aromaticColors[char.toLowerCase()] || "transparent");
+}
+__name(getAromaticColor, "getAromaticColor");
+function getNegativeColor(char) {
+  return hexToRgba(negativeColors[char.toLowerCase()] || "transparent");
+}
+__name(getNegativeColor, "getNegativeColor");
+function getPositiveColor(char) {
+  return hexToRgba(positiveColors[char.toLowerCase()] || "transparent");
+}
+__name(getPositiveColor, "getPositiveColor");
+function getChargedColor(char) {
+  return hexToRgba(chargedColors[char.toLowerCase()] || "transparent");
+}
+__name(getChargedColor, "getChargedColor");
+function getPolarColor(char) {
+  return hexToRgba(polarColors[char.toLowerCase()] || "transparent");
+}
+__name(getPolarColor, "getPolarColor");
+function getSerineThreonineColor(char) {
+  return hexToRgba(serineThreonineToColor[char.toLowerCase()] || "transparent");
+}
+__name(getSerineThreonineColor, "getSerineThreonineColor");
+function getHydrophobicity(char) {
+  return hexToRgba(hydrophobicityColor[char.toLowerCase()] || "transparent");
+}
+__name(getHydrophobicity, "getHydrophobicity");
+function getColorScheme(char) {
+  return hexToRgba(colorScheme[char.toLowerCase()] || "transparent");
+}
+__name(getColorScheme, "getColorScheme");
 const HoveredIdContext = React__default.createContext({
   hoveredId: ""
   // default value
@@ -108912,6 +109226,30 @@ const partOverhangs = [
   "threePrimeUnderhang"
 ];
 const getChunk = /* @__PURE__ */ __name((sequence2, chunkSize, chunkNumber) => sequence2.slice(chunkSize * chunkNumber, chunkSize * (chunkNumber + 1)), "getChunk");
+function renderColoredLayer(props, fudge, width, toColor) {
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      style: {
+        left: props.startOffset * props.charWidth,
+        height: props.height,
+        width,
+        position: "absolute"
+      },
+      className: "rowViewTextContainer",
+      height: Math.max(0, Number(props.height))
+    },
+    /* @__PURE__ */ React__default.createElement(
+      ColoredSequence,
+      __spreadProps(__spreadValues({}, props), {
+        fudge,
+        totalWidth: width,
+        toColor
+      })
+    )
+  );
+}
+__name(renderColoredLayer, "renderColoredLayer");
 const _Sequence = class _Sequence extends React__default.Component {
   render() {
     const {
@@ -108928,6 +109266,15 @@ const _Sequence = class _Sequence extends React__default.Component {
       chunkSize = 100,
       scrollData,
       showDnaColors,
+      showSerineThreonine,
+      showHydrophobicity,
+      showPolar,
+      showNegative,
+      showPositive,
+      showCharged,
+      showAliphatic,
+      showAromatic,
+      showColorScheme,
       fivePrimeThreePrimeHints,
       alignmentData,
       sequenceLength,
@@ -108970,6 +109317,17 @@ const _Sequence = class _Sequence extends React__default.Component {
         ) : void 0;
       }
     });
+    const colorLayers = [
+      { show: showSerineThreonine, toColor: "serineThreonine" },
+      { show: showHydrophobicity, toColor: "hydrophobicity" },
+      { show: showPolar, toColor: "polar" },
+      { show: showNegative, toColor: "negative" },
+      { show: showPositive, toColor: "positive" },
+      { show: showCharged, toColor: "charged" },
+      { show: showAliphatic, toColor: "aliphatic" },
+      { show: showAromatic, toColor: "aromatic" },
+      { show: showColorScheme, toColor: "colorScheme" }
+    ];
     const style2 = __spreadValues({
       position: "relative",
       height,
@@ -109047,6 +109405,9 @@ const _Sequence = class _Sequence extends React__default.Component {
         },
         "5'"
       ),
+      colorLayers.map(
+        ({ show, toColor }) => show && renderColoredLayer(this.props, fudge, width, toColor)
+      ),
       !hideBps && /* @__PURE__ */ React__default.createElement(
         "svg",
         {
@@ -109063,7 +109424,8 @@ const _Sequence = class _Sequence extends React__default.Component {
           ColoredSequence,
           __spreadValues({}, __spreadProps(__spreadValues({}, this.props), {
             fudge,
-            totalWidth: width
+            totalWidth: width,
+            toColor: "dnaColor"
           }))
         ),
         inner2
@@ -109087,19 +109449,44 @@ const _ColoredSequence = class _ColoredSequence extends React__default.Component
         alignmentData,
         getGaps: getGaps2,
         fudge,
-        totalWidth
+        totalWidth,
+        toColor
       } = this.props;
       if (alignmentData) {
         sequence2 = sequence2.replace(/^-+/g, "").replace(/-+$/g, "");
       }
-      const colorPaths = Object.values(dnaToColor).reduce((acc, color2) => {
+      const colorMap = {
+        dnaColor: dnaToColor,
+        serineThreonine: serineThreonineToColor,
+        hydrophobicity: hydrophobicityColor,
+        polar: polarColors,
+        negative: negativeColors,
+        positive: positiveColors,
+        charged: chargedColors,
+        aliphatic: aliphaticColors,
+        aromatic: aromaticColors,
+        colorScheme
+      };
+      const colorMethods = {
+        dnaColor: getDnaColor,
+        serineThreonine: getSerineThreonineColor,
+        hydrophobicity: getHydrophobicity,
+        polar: getPolarColor,
+        negative: getNegativeColor,
+        positive: getPositiveColor,
+        charged: getChargedColor,
+        aliphatic: getAliphaticColor,
+        aromatic: getAromaticColor,
+        colorScheme: getColorScheme
+      };
+      const colorPaths = Object.values(colorMap[toColor]).reduce((acc, color2) => {
         acc[color2] = "";
         return acc;
       }, {});
       const gapsBefore = getGaps2 ? getGaps2({ start: 0, end: 0 }).gapsBefore : 0;
       sequence2.split("").forEach((char, i) => {
         const width = Number(charWidth2);
-        const color2 = getDnaColor(char, isReverse);
+        const color2 = colorMethods[toColor](char, isReverse);
         const x = (i + gapsBefore) * charWidth2;
         const y2 = 0;
         colorPaths[color2] = (colorPaths[color2] || "") + `M${x},${y2} L${x + width},${y2} L${x + width},${y2 + height} L${x},${y2 + height}`;
@@ -111175,6 +111562,7 @@ const _Translation = class _Translation extends React__default.Component {
       annotationRange,
       height,
       showAminoAcidNumbers,
+      showAminoAcidUnitAsCodon,
       charWidth: charWidth2,
       aminoAcidNumbersHeight,
       onClick,
@@ -111277,8 +111665,8 @@ const _Translation = class _Translation extends React__default.Component {
               });
             }, "onContextMenu"),
             title: `${aminoAcid.name} -- Index: ${aminoAcidSliver.aminoAcidIndex + 1} -- Hydrophobicity: ${aminoAcid.hydrophobicity} -- Mass: ${aminoAcid.mass}
- 
-Part of ${annotation.translationType} Translation from BPs ${annotation.start + 1} to ${annotation.end + 1} (${aminoAcids.length / 3} AAs)`,
+
+Part of ${annotation.translationType} Translation from BPs ${annotation.start + 1} to ${annotation.end + 1} (${aminoAcids.length / 3} ${showAminoAcidUnitAsCodon ? "codons" : "AAs"})`,
             showAminoAcidNumbers,
             aminoAcidIndex: aminoAcidSliver.aminoAcidIndex,
             onDoubleClick: /* @__PURE__ */ __name(function(event) {
@@ -111305,6 +111693,7 @@ let Translation = _Translation;
 const Translation$1 = pure(Translation);
 function getExtraInnerCompProps(annotationRange, {
   showAminoAcidNumbers,
+  showAminoAcidUnitAsCodon,
   getGaps: getGaps2,
   isProtein: isProtein2,
   colorType,
@@ -111316,6 +111705,7 @@ function getExtraInnerCompProps(annotationRange, {
   const anotationHeightNoSpace = annotationHeight - spaceBetweenAnnotations;
   return {
     showAminoAcidNumbers,
+    showAminoAcidUnitAsCodon,
     getGaps: getGaps2,
     height: anotationHeightNoSpace,
     aminoAcidNumbersHeight,
@@ -114112,7 +114502,7 @@ const CutsiteSelectionLayers = connectToEditor(
     );
   });
 }, "CutsiteSelectionLayersInner"));
-function filterRanges(ranges, extraProps = {}) {
+function filterRanges(ranges, isProteinAlignmentView, extraProps = {}) {
   if (!ranges) return ranges;
   if (extraProps.onlyForward) {
     ranges = filter(ranges, (a2) => a2.annotation.forward);
@@ -114120,12 +114510,30 @@ function filterRanges(ranges, extraProps = {}) {
   if (extraProps.onlyReverse) {
     ranges = filter(ranges, (a2) => !a2.annotation.forward);
   }
+  if (isProteinAlignmentView) {
+    ranges = map$3(ranges, (range2) => {
+      const start2 = (range2.start + 3) / 3 - 1;
+      const end2 = (range2.end + 1) / 3 - 1;
+      return __spreadProps(__spreadValues({}, range2), {
+        start: start2,
+        end: end2,
+        annotation: __spreadProps(__spreadValues({}, range2.annotation), {
+          start: start2,
+          end: end2
+        })
+      });
+    });
+  }
   return ranges;
 }
 __name(filterRanges, "filterRanges");
-function getPropsForType(props, type2, pluralType, extraProps) {
+function getPropsForType(props, isProteinAlignmentView, type2, pluralType, extraProps) {
   const upperPluralType = startCase(pluralType);
-  const annotationRanges = filterRanges(props.row[pluralType], extraProps);
+  const annotationRanges = filterRanges(
+    props.row[pluralType],
+    isProteinAlignmentView,
+    extraProps
+  );
   const toRet = {
     annotationColor: props[pluralType + "Color"],
     annotationHeight: props[pluralType + "Height"] || rowHeights[pluralType].height,
@@ -114141,7 +114549,7 @@ function getPropsForType(props, type2, pluralType, extraProps) {
   return toRet;
 }
 __name(getPropsForType, "getPropsForType");
-function RowItem(props) {
+function RowItem$1(props) {
   let {
     noRedux,
     charWidth: charWidth2 = defaultCharWidth,
@@ -114198,7 +114606,8 @@ function RowItem(props) {
     isLinearView,
     scalePct,
     setScalePct,
-    extraAnnotationProps = {}
+    extraAnnotationProps = {},
+    showAminoAcidUnitAsCodon
   } = props;
   const {
     chromatogram: showChromatogram,
@@ -114210,6 +114619,15 @@ function RowItem(props) {
     // yellowAxis: showYellowAxis,
     aminoAcidNumbers: showAminoAcidNumbers,
     dnaColors: showDnaColors,
+    serineThreonine: showSerineThreonine,
+    hydrophobicity: showHydrophobicity,
+    polar: showPolar,
+    negative: showNegative,
+    positive: showPositive,
+    charged: showCharged,
+    aliphatic: showAliphatic,
+    aromatic: showAromatic,
+    colorScheme: showColorScheme,
     fivePrimeThreePrimeHints,
     reverseSequence: showReverseSequence,
     sequence: showSequence,
@@ -114256,17 +114674,21 @@ function RowItem(props) {
     height,
     width: width + "px"
   };
+  const isProteinAlignmentView = !!(props.isProtein && props.alignmentData);
   const annotationCommonProps = {
     noRedux,
     editorName,
     charWidth: charWidth2,
     bpsPerRow,
     getGaps: getGaps2,
-    isProtein: isProtein2,
+    isProtein: isProteinAlignmentView ? false : isProtein2,
     readOnly: readOnly2,
     sequenceLength,
     isRowView,
-    row: { start: row.start, end: row.end }
+    row: {
+      start: row.start,
+      end: isProteinAlignmentView ? sequenceLength - 1 : row.end
+    }
   };
   const drawLabels = /* @__PURE__ */ __name((type2, noDraw, _a2 = {}) => {
     var _b2 = _a2, { filterOpts } = _b2, extraProps = __objRest(_b2, ["filterOpts"]);
@@ -114283,6 +114705,7 @@ function RowItem(props) {
           onDoubleClick: props[type2 + "DoubleClicked"]
         })
       ) : [],
+      isProteinAlignmentView,
       filterOpts
     );
     if (!ranges.length) return null;
@@ -114317,6 +114740,13 @@ function RowItem(props) {
     if (shouldShow !== void 0 ? !shouldShow : !annotationVisibility2[pluralType] || Object.keys(row[pluralType] || {}).length <= 0) {
       return null;
     }
+    const propsForType = getPropsForType(
+      props,
+      isProteinAlignmentView,
+      type2,
+      pluralType,
+      extraProps
+    );
     const CompToUse = CompOverride || StackedAnnotations;
     return /* @__PURE__ */ React__default.createElement(
       CompToUse,
@@ -114327,7 +114757,7 @@ function RowItem(props) {
         fullSequence,
         containerClassName: camelCase("veRowView-" + pluralType + "Container"),
         alignmentType: alignmentType2
-      }, annotationCommonProps), getPropsForType(props, type2, pluralType, extraProps)), otherExtraProps)
+      }, annotationCommonProps), propsForType), otherExtraProps)
     );
   }, "drawAnnotations");
   const deletionLayersToDisplay = flatMap(
@@ -114366,6 +114796,7 @@ function RowItem(props) {
   const translationCommonProps = {
     CompOverride: Translations,
     showAminoAcidNumbers,
+    showAminoAcidUnitAsCodon,
     sequenceLength,
     aminoAcidNumbersHeight
   };
@@ -114401,6 +114832,7 @@ function RowItem(props) {
         customTitleStart: "Search match",
         regions: searchLayers
       }, annotationCommonProps), {
+        showAminoAcidUnitAsCodon,
         selectionLayerRightClicked: searchLayerRightClicked,
         row: alignmentData ? { start: 0, end: alignmentData.sequence.length - 1 } : row,
         onClick: searchLayerClicked
@@ -114415,7 +114847,8 @@ function RowItem(props) {
         regions: getAllSelectionLayers({
           additionalSelectionLayers,
           selectionLayer: selectionLayer2
-        })
+        }),
+        showAminoAcidUnitAsCodon
       })
     ), drawAnnotations2("warning"), drawAnnotations2("assemblyPiece"), drawAnnotations2("lineageAnnotation"), drawLabels("part"), drawAnnotations2("part", partProps), drawAnnotations2("orf", {
       CompOverride: Orfs
@@ -114448,6 +114881,16 @@ function RowItem(props) {
           sequenceLength,
           cutsites,
           showDnaColors,
+          showSerineThreonine,
+          showHydrophobicity,
+          showPolar,
+          showNegative,
+          showPositive,
+          showCharged,
+          showAliphatic,
+          showAromatic,
+          showColorScheme,
+          showPhysicalProperties: isProteinAlignmentView,
           fivePrimeThreePrimeHints,
           scrollData,
           hideBps: charWidth2 < 7,
@@ -114569,7 +115012,8 @@ function RowItem(props) {
               style: {
                 left: startOffset * charWidth2,
                 height: sequenceHeight,
-                position: "absolute"
+                position: "absolute",
+                userSelect: "none"
               },
               onClick: /* @__PURE__ */ __name(function(event) {
                 replacementLayerClicked({
@@ -114616,7 +115060,8 @@ function RowItem(props) {
       Caret$2,
       __spreadProps(__spreadValues({
         caretPosition: caretPosition2,
-        isProtein: isProtein2
+        isProtein: isProtein2,
+        showAminoAcidUnitAsCodon
       }, __spreadValues(__spreadValues({}, annotationCommonProps), { getGaps: void 0 })), {
         row: alignmentData ? { start: 0, end: alignmentData.sequence.length - 1 } : row
       })
@@ -114624,7 +115069,7 @@ function RowItem(props) {
     rowBottomComp && rowBottomComp
   );
 }
-__name(RowItem, "RowItem");
+__name(RowItem$1, "RowItem$1");
 function getGapMap$1(sequence2) {
   const gapMap = [0];
   sequence2.split("").forEach((char) => {
@@ -116141,7 +116586,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.8.2";
+const version = "0.8.4";
 const packageJson = {
   version
 };
@@ -119869,7 +120314,8 @@ const _SequenceInputNoHotkeys = class _SequenceInputNoHotkeys extends React__def
       isProtein: isProtein2,
       caretPosition: caretPosition2,
       sequenceData: sequenceData2,
-      maxInsertSize
+      maxInsertSize,
+      showAminoAcidUnitAsCodon
     } = this.props;
     const { charsToInsert, hasTempError } = this.state;
     let message;
@@ -119879,9 +120325,9 @@ const _SequenceInputNoHotkeys = class _SequenceInputNoHotkeys extends React__def
         selectionLayer2,
         sequenceLength
       );
-      message = /* @__PURE__ */ React__default.createElement("span", null, "Press ", /* @__PURE__ */ React__default.createElement("span", { style: { fontWeight: "bolder" } }, "ENTER"), " to replace", " ", divideBy3(getRangeLength(selectionLayer2, sequenceLength), isProtein2), " ", isProtein2 ? "AAs" : "base pairs", " between", " ", isProtein2 ? convertDnaCaretPositionOrRangeToAA(betweenVals[0]) : betweenVals[0], " ", "and", " ", isProtein2 ? convertDnaCaretPositionOrRangeToAA(betweenVals[1] + 2) : betweenVals[1]);
+      message = /* @__PURE__ */ React__default.createElement("span", null, "Press ", /* @__PURE__ */ React__default.createElement("span", { style: { fontWeight: "bolder" } }, "ENTER"), " to replace", " ", divideBy3(getRangeLength(selectionLayer2, sequenceLength), isProtein2), " ", isProtein2 ? showAminoAcidUnitAsCodon ? "codons" : "AAs" : "base pairs", " ", "between", " ", isProtein2 ? convertDnaCaretPositionOrRangeToAA(betweenVals[0]) : betweenVals[0], " ", "and", " ", isProtein2 ? convertDnaCaretPositionOrRangeToAA(betweenVals[1] + 2) : betweenVals[1]);
     } else {
-      message = /* @__PURE__ */ React__default.createElement("span", null, "Press ", /* @__PURE__ */ React__default.createElement("span", { style: { fontWeight: "bolder" } }, "ENTER"), " to insert", " ", charsToInsert.length, " ", isProtein2 ? "AAs" : "base pairs", " after", " ", isProtein2 ? "AA" : "base", " ", isProtein2 ? convertDnaCaretPositionOrRangeToAA(caretPosition2) : caretPosition2);
+      message = /* @__PURE__ */ React__default.createElement("span", null, "Press ", /* @__PURE__ */ React__default.createElement("span", { style: { fontWeight: "bolder" } }, "ENTER"), " to insert", " ", charsToInsert.length, " ", isProtein2 ? `${showAminoAcidUnitAsCodon ? "codons" : "AAs"}` : "base pairs", " ", "after", " ", isProtein2 ? `${showAminoAcidUnitAsCodon ? "codon" : "AA"}` : "base", " ", isProtein2 ? convertDnaCaretPositionOrRangeToAA(caretPosition2) : caretPosition2);
     }
     return /* @__PURE__ */ React__default.createElement("div", { className: "sequenceInputBubble" }, /* @__PURE__ */ React__default.createElement(
       "input",
@@ -120933,7 +121379,8 @@ function VectorInteractionHOC(Component2) {
           sequenceData: sequenceData2 = { sequence: "" },
           readOnly: readOnly2,
           disableBpEditing,
-          maxInsertSize
+          maxInsertSize,
+          showAminoAcidUnitAsCodon
           // updateSequenceData,
           // wrappedInsertSequenceDataAtPositionOrRange
           // handleInsert
@@ -120955,6 +121402,7 @@ function VectorInteractionHOC(Component2) {
             sequenceLength,
             caretPosition: caretPosition2,
             maxInsertSize,
+            showAminoAcidUnitAsCodon,
             handleInsert: /* @__PURE__ */ __name((seqDataToInsert) => __async(this, null, function* () {
               yield insertAndSelectHelper({
                 props: this.props,
@@ -121877,8 +122325,14 @@ function getEditDeleteHandlers(type2, annotation) {
   ];
 }
 __name(getEditDeleteHandlers, "getEditDeleteHandlers");
-function SequenceName({ sequenceName, sequenceLength, isProtein: isProtein2 }) {
-  return /* @__PURE__ */ React__default.createElement("div", { key: "sequenceNameText", className: "sequenceNameText" }, /* @__PURE__ */ React__default.createElement("span", null, sequenceName, " "), /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__default.createElement("span", null, isProtein2 ? `${Math.floor(sequenceLength / 3)} AAs` : `${sequenceLength} bps`));
+function SequenceName({
+  sequenceName,
+  sequenceLength,
+  isProtein: isProtein2,
+  showAminoAcidUnitAsCodon
+}) {
+  const proteinUnits = showAminoAcidUnitAsCodon ? "codons" : "AAs";
+  return /* @__PURE__ */ React__default.createElement("div", { key: "sequenceNameText", className: "sequenceNameText" }, /* @__PURE__ */ React__default.createElement("span", null, sequenceName, " "), /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__default.createElement("span", null, isProtein2 ? `${Math.floor(sequenceLength / 3)} ${proteinUnits}` : `${sequenceLength} bps`));
 }
 __name(SequenceName, "SequenceName");
 function massageTickSpacing(spacing) {
@@ -123153,7 +123607,15 @@ function PinchHelper({ children, onPinch }) {
       target
     }
   );
-  return /* @__PURE__ */ React__default.createElement("div", { ref: target, className: "tg-pinch-helper" }, children);
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ref: target,
+      style: { overflowX: "hidden" },
+      className: "tg-pinch-helper"
+    },
+    children
+  );
 }
 __name(PinchHelper, "PinchHelper");
 function isElWithinAnotherEl(el, container) {
@@ -123416,6 +123878,78 @@ function ZoomLinearView({
   ));
 }
 __name(ZoomLinearView, "ZoomLinearView");
+function BarPlot({
+  data,
+  width = 300,
+  height = 30,
+  barColors,
+  className
+}) {
+  if (!data || data.length === 0) return null;
+  const maxVal = Math.max(...data);
+  const barWidth = width / data.length;
+  return /* @__PURE__ */ React.createElement("svg", { width, height, className }, data.map((val2, i) => {
+    const barHeight = val2 / maxVal * (height - 2);
+    return /* @__PURE__ */ React.createElement(
+      "rect",
+      {
+        "data-tip": `${val2 == null ? void 0 : val2.toFixed(1)}%`,
+        key: i,
+        x: i * barWidth + 1,
+        y: height - barHeight,
+        width: barWidth - 2,
+        height: barHeight,
+        fill: barColors ? barColors[i % barColors.length] : "#3498db",
+        rx: 2
+      }
+    );
+  }), /* @__PURE__ */ React.createElement(
+    "line",
+    {
+      x1: 1,
+      y1: height - 0.5 * (height - 2),
+      x2: width,
+      y2: height - 0.5 * (height - 2),
+      stroke: "white",
+      strokeDasharray: "4,2",
+      strokeWidth: 1
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "line",
+    {
+      x1: 0,
+      y1: height,
+      x2: width,
+      y2: height,
+      stroke: "#333",
+      strokeWidth: 1
+    }
+  ));
+}
+__name(BarPlot, "BarPlot");
+function AminoAcidCirclePlot({ data, width, className }) {
+  const n2 = data.length;
+  if (n2 === 0) return null;
+  const padding = 5;
+  const availableWidth = width - 3 * padding;
+  const spacing = n2 > 1 ? availableWidth / (n2 - 1) : 0;
+  const maxRadius = spacing / 2 - 2 > 0 ? spacing / 2 - 2 : 8;
+  const radius = Math.max(8, Math.min(maxRadius, 20));
+  const svgHeight = radius * 2 + 10;
+  return /* @__PURE__ */ React.createElement("svg", { width, height: svgHeight, className }, data.map((d2, idx) => /* @__PURE__ */ React.createElement("g", { key: idx }, /* @__PURE__ */ React.createElement(
+    "circle",
+    {
+      "data-tip": d2.group,
+      cx: idx * spacing + radius,
+      cy: radius + 2,
+      r: radius,
+      fill: d2.color,
+      stroke: "#333",
+      strokeWidth: 1
+    }
+  ))));
+}
+__name(AminoAcidCirclePlot, "AminoAcidCirclePlot");
 const defaultMarginWidth = 10;
 const __LinearView = class __LinearView extends React__default.Component {
   constructor() {
@@ -123522,6 +124056,7 @@ const __LinearView = class __LinearView extends React__default.Component {
     callback2(callbackVals);
   }
   render() {
+    var _b2, _c;
     const _a2 = this.props, {
       sequenceData: sequenceData2 = { sequence: "" },
       alignmentData,
@@ -123544,7 +124079,8 @@ const __LinearView = class __LinearView extends React__default.Component {
       linearViewCharWidth,
       annotationVisibilityOverrides,
       isProtein: isProtein2,
-      noWarnings
+      noWarnings,
+      showAminoAcidUnitAsCodon
     } = _a2, rest = __objRest(_a2, [
       //currently found in props
       "sequenceData",
@@ -123568,7 +124104,8 @@ const __LinearView = class __LinearView extends React__default.Component {
       "linearViewCharWidth",
       "annotationVisibilityOverrides",
       "isProtein",
-      "noWarnings"
+      "noWarnings",
+      "showAminoAcidUnitAsCodon"
     ]);
     const bpsPerRow = this.getMaxLength();
     let innerWidth = Math.max(width - marginWidth - 20, 0);
@@ -123680,13 +124217,28 @@ const __LinearView = class __LinearView extends React__default.Component {
           SequenceName,
           __spreadValues({}, {
             isProtein: isProtein2,
+            showAminoAcidUnitAsCodon,
             sequenceName,
             sequenceLength: sequenceData2.sequence ? sequenceData2.sequence.length : 0
           })
         ),
         !noWarnings && /* @__PURE__ */ React__default.createElement(VeTopRightContainer, null, this.paredDownMessages),
-        /* @__PURE__ */ React__default.createElement(PinchHelperToUse, __spreadValues({}, linearZoomEnabled && pinchHandler), /* @__PURE__ */ React__default.createElement(
-          RowItem,
+        /* @__PURE__ */ React__default.createElement(PinchHelperToUse, __spreadValues({}, linearZoomEnabled && pinchHandler), sequenceData2.isProtein && sequenceData2.name === "Consensus" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, annotationVisibilityOverrides.conservation && /* @__PURE__ */ React__default.createElement(
+          BarPlot,
+          {
+            className: "ve-linear-view-conservation-plot",
+            data: (_b2 = sequenceData2 == null ? void 0 : sequenceData2.aminoAcidProperties) == null ? void 0 : _b2.frequencies,
+            width
+          }
+        ), annotationVisibilityOverrides.properties && /* @__PURE__ */ React__default.createElement(
+          AminoAcidCirclePlot,
+          {
+            className: "ve-linear-view-property-analysis-plot",
+            data: (_c = sequenceData2 == null ? void 0 : sequenceData2.aminoAcidProperties) == null ? void 0 : _c.propertyAnalysis,
+            width
+          }
+        )), /* @__PURE__ */ React__default.createElement(
+          RowItem$1,
           __spreadProps(__spreadValues({}, __spreadValues(__spreadProps(__spreadValues({}, rest), {
             editorName,
             onScroll: /* @__PURE__ */ __name(() => {
@@ -123890,7 +124442,8 @@ const _Minimap = class _Minimap extends React__default.Component {
         alignmentTracks = [],
         dimensions: { width = 200 },
         laneHeight,
-        laneSpacing = 1
+        laneSpacing = 1,
+        isTrackSelected = []
       } = this.props;
       const charWidth2 = this.getCharWidth();
       const {
@@ -123929,7 +124482,7 @@ const _Minimap = class _Minimap extends React__default.Component {
         "div",
         {
           key: i + "-lane",
-          className: "minimapLane",
+          className: `minimapLane ${isTrackSelected[i] ? "isTrackSelected" : ""}`,
           "data-lane-index": i,
           style: { height: laneHeight, maxHeight: laneHeight }
         },
@@ -123953,7 +124506,8 @@ const _Minimap = class _Minimap extends React__default.Component {
       "numBpsShownInLinearView",
       "scrollAlignmentView",
       "laneHeight",
-      "laneSpacing"
+      "laneSpacing",
+      "isTrackSelected"
     ].some((key) => props[key] !== newProps[key]))
       return true;
     return false;
@@ -124267,6 +124821,17 @@ function VisibilityOptions$2({
   } else {
     annotationCountToUse = annotationsWithCounts[0];
   }
+  const subMenuElements = ["physicalProperties", "plot"];
+  const physicalPropertyElements = [
+    "hydrophobicity",
+    "polar",
+    "negative",
+    "positive",
+    "charged",
+    "aliphatic",
+    "aromatic"
+  ];
+  const plotElements = ["conservation", "properties"];
   return /* @__PURE__ */ React__default.createElement(
     Menu,
     {
@@ -124274,36 +124839,107 @@ function VisibilityOptions$2({
       className: "alignmentAnnotationVisibilityToolInner"
     },
     map$3(togglableAlignmentAnnotationSettings, (visible, annotationName) => {
-      return /* @__PURE__ */ React__default.createElement(
-        MenuItem,
-        {
-          icon: visible ? "tick" : "",
-          onClick: /* @__PURE__ */ __name((e) => {
-            e.stopPropagation();
-            if (annotationName === "axis") {
-              return alignmentAnnotationVisibilityToggle({
-                axisNumbers: !visible,
-                axis: !visible
+      if (!physicalPropertyElements.includes(annotationName) && !plotElements.includes(annotationName)) {
+        return /* @__PURE__ */ React__default.createElement(
+          MenuItem,
+          {
+            icon: visible && !subMenuElements.includes(annotationName) ? "tick" : "",
+            onClick: /* @__PURE__ */ __name((e) => {
+              e.stopPropagation();
+              if (annotationName === "axis") {
+                return alignmentAnnotationVisibilityToggle({
+                  axisNumbers: !visible,
+                  axis: !visible
+                });
+              }
+              if (annotationName === "cdsFeatureTranslations" && !visible) {
+                return alignmentAnnotationVisibilityToggle({
+                  cdsFeatureTranslations: !visible,
+                  translations: !visible
+                });
+              }
+              alignmentAnnotationVisibilityToggle({
+                [annotationName]: !visible
               });
+            }, "onClick"),
+            text: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, startCase(annotationName).replace("Cds", "CDS").replace("Dna", "DNA"), annotationName in annotationCountToUse ? /* @__PURE__ */ React__default.createElement(Tag, { round: true, style: { marginLeft: 7 } }, annotationCountToUse[annotationName]) : ""),
+            key: annotationName
+          },
+          annotationName === "physicalProperties" ? map$3(
+            togglableAlignmentAnnotationSettings,
+            (_visible, _annotationName) => {
+              if (physicalPropertyElements.includes(_annotationName)) {
+                return /* @__PURE__ */ React__default.createElement(
+                  MenuItem,
+                  {
+                    icon: _visible ? "tick" : "",
+                    onClick: /* @__PURE__ */ __name((e) => {
+                      e.stopPropagation();
+                      alignmentAnnotationVisibilityToggle({
+                        [_annotationName]: !_visible
+                      });
+                    }, "onClick"),
+                    text: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, startCase(_annotationName)),
+                    key: _annotationName
+                  }
+                );
+              }
             }
-            if (annotationName === "cdsFeatureTranslations" && !visible) {
-              return alignmentAnnotationVisibilityToggle({
-                cdsFeatureTranslations: !visible,
-                translations: !visible
-              });
+          ).filter(Boolean) : annotationName === "plot" ? map$3(
+            togglableAlignmentAnnotationSettings,
+            (_visible, _annotationName) => {
+              if (plotElements.includes(_annotationName)) {
+                return /* @__PURE__ */ React__default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__default.createElement(
+                  MenuItem,
+                  {
+                    className: `plot-${_annotationName}`,
+                    icon: _visible ? "tick" : "",
+                    onClick: /* @__PURE__ */ __name((e) => {
+                      e.stopPropagation();
+                      alignmentAnnotationVisibilityToggle({
+                        [_annotationName]: !_visible
+                      });
+                    }, "onClick"),
+                    text: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, startCase(_annotationName)),
+                    key: _annotationName
+                  }
+                ), _annotationName === "properties" ? /* @__PURE__ */ React__default.createElement(
+                  Button,
+                  {
+                    icon: "info-sign",
+                    style: {
+                      position: "absolute",
+                      top: 3,
+                      right: 0
+                    },
+                    onClick: /* @__PURE__ */ __name(() => {
+                      showDialog({
+                        ModalComponent: PropertyDialog
+                      });
+                    }, "onClick"),
+                    minimal: true,
+                    small: true
+                  }
+                ) : null);
+              }
             }
-            alignmentAnnotationVisibilityToggle({
-              [annotationName]: !visible
-            });
-          }, "onClick"),
-          text: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, startCase(annotationName).replace("Cds", "CDS").replace("Dna", "DNA"), annotationName in annotationCountToUse ? /* @__PURE__ */ React__default.createElement(Tag, { round: true, style: { marginLeft: 7 } }, annotationCountToUse[annotationName]) : ""),
-          key: annotationName
-        }
-      );
+          ).filter(Boolean) : null
+        );
+      }
     })
   );
 }
 __name(VisibilityOptions$2, "VisibilityOptions$2");
+const PropertyDialog = compose$1(
+  wrapDialog({
+    title: "Amino Acid Properties",
+    style: {
+      width: 600
+    }
+  })
+)(function() {
+  return /* @__PURE__ */ React__default.createElement("div", { style: { width: "100%", padding: 10 } }, /* @__PURE__ */ React__default.createElement("img", { src: "/aaprops.svg", width: 580, alt: "Amino Acid Properties" }));
+});
 const _SimpleGenericDialogForm = class _SimpleGenericDialogForm extends React__default.Component {
   render() {
     const {
@@ -124474,7 +125110,8 @@ function Caret({
   innerRadius,
   outerRadius,
   isProtein: isProtein2,
-  selectionMessage
+  selectionMessage,
+  showAminoAcidUnitAsCodon
 }) {
   const { startAngle, endAngle } = getRangeAngles(
     { start: caretPosition2, end: caretPosition2 },
@@ -124495,7 +125132,12 @@ function Caret({
       transform,
       className: className + " veCaret " + draggableClassnames.caret
     },
-    /* @__PURE__ */ React__default.createElement("title", null, selectionMessage || getSelectionMessage({ caretPosition: caretPosition2, isProtein: isProtein2, sequenceLength })),
+    /* @__PURE__ */ React__default.createElement("title", null, selectionMessage || getSelectionMessage({
+      caretPosition: caretPosition2,
+      isProtein: isProtein2,
+      sequenceLength,
+      showAminoAcidUnitAsCodon
+    })),
     /* @__PURE__ */ React__default.createElement(
       "line",
       {
@@ -124792,7 +125434,8 @@ function SelectionLayer({
   onRightClicked,
   onClick,
   index: index2,
-  isProtein: isProtein2
+  isProtein: isProtein2,
+  showAminoAcidUnitAsCodon
 }) {
   const {
     color: color2,
@@ -124817,7 +125460,8 @@ function SelectionLayer({
   const selectionMessage = getSelectionMessage({
     sequenceLength,
     selectionLayer: selectionLayer2,
-    isProtein: isProtein2
+    isProtein: isProtein2,
+    showAminoAcidUnitAsCodon
   });
   const { transform } = PositionAnnotationOnCircle({
     sAngle: startAngle,
@@ -125454,6 +126098,7 @@ function CircularView(props) {
     readOnly: readOnly2,
     hideName = false,
     editorName,
+    showAminoAcidUnitAsCodon,
     smartCircViewLabelRender,
     showCicularViewInternalLabels,
     withRotateCircularView: _withRotateCircularView,
@@ -125833,6 +126478,7 @@ function CircularView(props) {
             key: "veCircularViewSelectionLayer" + index2
           }, {
             index: index2,
+            showAminoAcidUnitAsCodon,
             isDraggable: true,
             isProtein: isProtein2,
             selectionLayer: selectionLayer22,
@@ -125859,6 +126505,7 @@ function CircularView(props) {
           key: "veCircularViewCaret"
         }, {
           caretPosition: caretPosition2,
+          showAminoAcidUnitAsCodon,
           sequenceLength,
           isProtein: isProtein2,
           innerRadius,
@@ -125871,7 +126518,8 @@ function CircularView(props) {
   if (radius < 150) radius = 150;
   const widthToUse = Math.max(Number(width) || 300);
   const heightToUse = Math.max(Number(height) || 300);
-  const bpTitle = isProtein2 ? `${Math.floor(sequenceLength / 3)} AAs` : `${sequenceLength} bps`;
+  const proteinUnits = showAminoAcidUnitAsCodon ? "codons" : "AAs";
+  const bpTitle = isProtein2 ? `${Math.floor(sequenceLength / 3)} ${proteinUnits}` : `${sequenceLength} bps`;
   const nameEl = /* @__PURE__ */ React__default.createElement(
     "div",
     {
@@ -132845,7 +133493,7 @@ const __RowView = class __RowView extends React__default.Component {
       }
       if (rowData[index2]) {
         const rowItem = /* @__PURE__ */ React__default.createElement("div", { "data-row-number": index2, key: index2 }, /* @__PURE__ */ React__default.createElement("div", { className: "veRowItemSpacer" }), /* @__PURE__ */ React__default.createElement(
-          RowItem,
+          RowItem$1,
           __spreadProps(__spreadValues({}, __spreadValues(__spreadProps(__spreadValues({}, rest), {
             rowTopComp,
             truncateLabelsThatDoNotFit,
@@ -133490,7 +134138,8 @@ const SelectDialog = compose$1(
         extraProps,
         isProtein: isProtein2,
         invalid,
-        handleSubmit
+        handleSubmit,
+        showAminoAcidUnitAsCodon
       } = this.props;
       const selectionLength = getRangeLength(
         {
@@ -133561,7 +134210,7 @@ const SelectDialog = compose$1(
           {
             type: "submit",
             intent: Intent.PRIMARY,
-            text: `Select ${invalid ? 0 : selectionLength} ${isProtein2 ? "AA" : "BP"}${selectionLength === 1 ? "" : "s"}`,
+            text: `Select ${invalid ? 0 : selectionLength} ${isProtein2 ? `${showAminoAcidUnitAsCodon ? "codon" : "AA"}` : "BP"}${selectionLength === 1 ? "" : "s"}`,
             disabled: invalid
           }
         ))
@@ -133604,7 +134253,7 @@ const EnzymeViewer = /* @__PURE__ */ __name(({
       }
     ),
     /* @__PURE__ */ React__default.createElement(
-      RowItem,
+      RowItem$1,
       __spreadValues({}, {
         charWidth: charWidth2,
         tickSpacing: 1,
@@ -137089,61 +137738,50 @@ function getPairwiseOverviewLinearViewOptions({ isTemplate }) {
   }
 }
 __name(getPairwiseOverviewLinearViewOptions, "getPairwiseOverviewLinearViewOptions");
-const _PairwiseAlignmentView = class _PairwiseAlignmentView extends React__default.Component {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "state", {
-      currentPairwiseAlignmentIndex: void 0
-    });
-  }
-  render() {
-    const { pairwiseAlignments, pairwiseOverviewAlignmentTracks } = this.props;
-    const { currentPairwiseAlignmentIndex } = this.state;
-    if (currentPairwiseAlignmentIndex > -1) {
-      const alignmentTracks = pairwiseAlignments[currentPairwiseAlignmentIndex];
-      const templateLength = alignmentTracks[0].alignmentData.sequence.length;
-      return /* @__PURE__ */ React__default.createElement(
-        AlignmentView,
-        __spreadValues({}, __spreadProps(__spreadValues({}, this.props), {
-          sequenceData: {
-            //pass fake seq data in so editor interactions work
-            sequence: Array.from(templateLength).map(() => "a").join("")
-          },
-          allowTrackRearrange: false,
-          alignmentTracks,
-          hasTemplate: true,
-          isPairwise: true,
-          currentPairwiseAlignmentIndex,
-          handleBackButtonClicked: /* @__PURE__ */ __name(() => {
-            this.setState({
-              currentPairwiseAlignmentIndex: void 0
-            });
-          }, "handleBackButtonClicked")
-        }))
-      );
-    } else {
-      return /* @__PURE__ */ React__default.createElement(
-        AlignmentView,
-        __spreadValues({}, __spreadProps(__spreadValues({}, this.props), {
-          alignmentTracks: pairwiseOverviewAlignmentTracks,
-          allowTrackRearrange: false,
-          allowTrimming: false,
-          hasTemplate: true,
-          isPairwise: true,
-          isInPairwiseOverviewView: true,
-          isFullyZoomedOut: true,
-          noClickDragHandlers: true,
-          linearViewOptions: getPairwiseOverviewLinearViewOptions,
-          handleSelectTrack: /* @__PURE__ */ __name((trackIndex) => {
-            this.setState({ currentPairwiseAlignmentIndex: trackIndex - 1 });
-          }, "handleSelectTrack")
-        }))
-      );
-    }
+function PairwiseAlignmentView(props) {
+  const [currentPairwiseAlignmentIndex, setCurrentPairwiseAlignmentIndex] = useState(void 0);
+  const { pairwiseAlignments, pairwiseOverviewAlignmentTracks } = props;
+  if (currentPairwiseAlignmentIndex > -1) {
+    const alignmentTracks = pairwiseAlignments[currentPairwiseAlignmentIndex];
+    const templateLength = alignmentTracks[0].alignmentData.sequence.length;
+    return /* @__PURE__ */ React__default.createElement(
+      AlignmentView,
+      __spreadValues({}, __spreadProps(__spreadValues({}, props), {
+        sequenceData: {
+          //pass fake seq data in so editor interactions work
+          sequence: Array.from(templateLength).map(() => "a").join("")
+        },
+        allowTrackRearrange: false,
+        alignmentTracks,
+        hasTemplate: true,
+        isPairwise: true,
+        currentPairwiseAlignmentIndex,
+        handleBackButtonClicked: /* @__PURE__ */ __name(() => {
+          setCurrentPairwiseAlignmentIndex(void 0);
+        }, "handleBackButtonClicked")
+      }))
+    );
+  } else {
+    return /* @__PURE__ */ React__default.createElement(
+      AlignmentView,
+      __spreadValues({}, __spreadProps(__spreadValues({}, props), {
+        alignmentTracks: pairwiseOverviewAlignmentTracks,
+        allowTrackRearrange: false,
+        allowTrimming: false,
+        hasTemplate: true,
+        isPairwise: true,
+        isInPairwiseOverviewView: true,
+        isFullyZoomedOut: true,
+        noClickDragHandlers: true,
+        linearViewOptions: getPairwiseOverviewLinearViewOptions,
+        handleSelectTrack: /* @__PURE__ */ __name((trackIndex) => {
+          setCurrentPairwiseAlignmentIndex(trackIndex - 1);
+        }, "handleSelectTrack")
+      }))
+    );
   }
-};
-__name(_PairwiseAlignmentView, "PairwiseAlignmentView");
-let PairwiseAlignmentView = _PairwiseAlignmentView;
+}
+__name(PairwiseAlignmentView, "PairwiseAlignmentView");
 function updateTrackHelper({
   currentPairwiseAlignmentIndex,
   pairwiseAlignments,
@@ -137221,6 +137859,551 @@ function coerceInitialValue({ initialValue, minCharWidth }) {
 }
 __name(coerceInitialValue, "coerceInitialValue");
 const tabHeight = 34;
+const LabileSitesLayer = /* @__PURE__ */ __name(({ leftMargin, charWidth: charWidth2, positionsToMark = [] }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "veLabileSites" }, positionsToMark == null ? void 0 : positionsToMark.map((pos, i) => {
+    const x = leftMargin + (pos - 1.2) * charWidth2 + charWidth2 / 2;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: "veAlignmentViewLabileSiteLine",
+        key: i,
+        style: {
+          left: x
+        }
+      }
+    );
+  }));
+}, "LabileSitesLayer");
+function calculateAminoAcidFrequency(sequence2, isProtein2) {
+  if (!sequence2 || typeof sequence2 !== "string") {
+    console.warn("Invalid or empty amino acid sequence provided.");
+  }
+  const standards = isProtein2 ? "ACDEFGHIKLMNPQRSTVWY-".split("") : "ATCG-".split("");
+  const frequencies = {};
+  standards.forEach((a2) => {
+    frequencies[a2] = { count: 0, percentage: 0 };
+  });
+  const nonStandard = {};
+  let totalCount = 0;
+  for (const char of sequence2.toUpperCase()) {
+    if (frequencies[char]) {
+      frequencies[char].count++;
+      totalCount++;
+    } else {
+      nonStandard[char] = (nonStandard[char] || 0) + 1;
+    }
+  }
+  if (totalCount > 0) {
+    for (const a2 of standards) {
+      frequencies[a2].percentage = frequencies[a2].count / totalCount * 100;
+    }
+  }
+  return {
+    totalStandards: totalCount,
+    // Total count of elements
+    totalLength: sequence2.length,
+    // Total length including non-standard
+    frequencies,
+    nonStandard
+  };
+}
+__name(calculateAminoAcidFrequency, "calculateAminoAcidFrequency");
+const aminoAcidShortNames = {
+  A: "Ala",
+  C: "Cys",
+  D: "Asp",
+  E: "Glu",
+  F: "Phe",
+  G: "Gly",
+  H: "His",
+  I: "Ile",
+  K: "Lys",
+  L: "Leu",
+  M: "Met",
+  N: "Asn",
+  P: "Pro",
+  Q: "Gln",
+  R: "Arg",
+  S: "Ser",
+  T: "Thr",
+  V: "Val",
+  W: "Trp",
+  Y: "Tyr",
+  "-": "Gaps"
+};
+const PropertySidePanel = /* @__PURE__ */ __name(({ properties: properties2, setProperties, style: style2 }) => {
+  const sidebarRef = React__default.useRef(null);
+  const [mismatchesCount, setMismatchesCount] = React__default.useState(0);
+  const [mismatchesInRange, setMismatchesInRange] = React__default.useState(0);
+  const { track, isOpen, selection, isPairwise } = properties2;
+  const getSequenceInRegion = useCallback$1(() => {
+    var _a2, _b2;
+    const seq = (_b2 = (_a2 = track == null ? void 0 : track.alignmentData) == null ? void 0 : _a2.sequence) != null ? _b2 : "";
+    if (!selection || selection.start === -1 || selection.end === -1) {
+      return seq;
+    }
+    const start2 = Math.max(0, selection.start);
+    const end2 = Math.min(seq.length - 1, selection.end);
+    if (start2 > end2) return "";
+    return seq.slice(start2, end2 + 1);
+  }, [track, selection]);
+  const mismatchKey = isPairwise ? "additionalSelectionLayers" : "mismatches";
+  const trackMismatches = useMemo$1(() => {
+    const tr = track == null ? void 0 : track[mismatchKey];
+    if (!Array.isArray(tr)) return [];
+    return isPairwise ? tr.filter((m2) => (m2 == null ? void 0 : m2.color) === "red") : tr;
+  }, [track, mismatchKey, isPairwise]);
+  useEffect(() => {
+    if (!isOpen || sidebarRef.current === null || !track) {
+      return;
+    }
+    sidebarRef.current.focus();
+    let mismatchCount = 0;
+    trackMismatches == null ? void 0 : trackMismatches.forEach((tm) => {
+      if (tm === null || tm.start === null || tm.end === null) {
+        return;
+      }
+      const overlapStart = tm.start;
+      const overlapEnd = tm.end;
+      if (overlapEnd >= overlapStart) {
+        mismatchCount += overlapEnd - overlapStart + 1;
+      }
+    });
+    setMismatchesCount(mismatchCount);
+    setMismatchesInRange(mismatchCount);
+    if (selection && selection.start > -1 && selection.end > -1) {
+      let count2 = 0;
+      trackMismatches == null ? void 0 : trackMismatches.forEach((tm) => {
+        if (tm === null || tm.start === null || tm.end === null) {
+          return;
+        }
+        const overlapStart = Math.max(tm.start, selection.start);
+        const overlapEnd = Math.min(tm.end, selection.end);
+        if (overlapEnd >= overlapStart) {
+          count2 += overlapEnd - overlapStart + 1;
+        }
+      });
+      setMismatchesInRange(count2);
+    }
+  }, [isOpen, track, selection, trackMismatches]);
+  const aminoFreq = useMemo$1(() => {
+    var _a2, _b2;
+    const seq = getSequenceInRegion();
+    return calculateAminoAcidFrequency(
+      seq,
+      (_b2 = (_a2 = track == null ? void 0 : track.sequenceData) == null ? void 0 : _a2.isProtein) != null ? _b2 : false
+    );
+  }, [getSequenceInRegion, track]);
+  if (!isOpen) {
+    return null;
+  }
+  let trackInner;
+  if (track) {
+    const {
+      name: name2,
+      isProtein: isProtein2,
+      proteinSize,
+      size,
+      molecularWeight,
+      isoPoint,
+      extinctionCoefficient
+    } = track.sequenceData;
+    const frequencyEntries = Object.entries(aminoFreq.frequencies);
+    trackInner = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          padding: 4,
+          paddingTop: 11,
+          paddingBottom: 11,
+          width: "100%"
+        }
+      }
+    ), /* @__PURE__ */ React__default.createElement("h5", null, "Track Properties"), /* @__PURE__ */ React__default.createElement("div", { className: "bp3-tab-panel" }, /* @__PURE__ */ React__default.createElement(RowItem, { item: name2, title: "Name" }), /* @__PURE__ */ React__default.createElement(RowItem, { item: isProtein2 ? proteinSize : size, title: "Length" }), /* @__PURE__ */ React__default.createElement(
+      RowItem,
+      {
+        item: molecularWeight == null ? void 0 : molecularWeight.toFixed(2),
+        title: "Molecular Weight",
+        units: isProtein2 ? "Da" : "g/mol"
+      }
+    ), name2 !== "Consensus" && isProtein2 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RowItem, { item: isoPoint, title: "Isoelectric Point" }), /* @__PURE__ */ React__default.createElement(
+      RowItem,
+      {
+        item: extinctionCoefficient,
+        title: "Extinction Coefficient"
+      }
+    )), /* @__PURE__ */ React__default.createElement(
+      RowItem,
+      {
+        item: `${mismatchesInRange}/${mismatchesCount}`,
+        title: "Mismatches"
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      RowItem,
+      {
+        item: selection && selection.start > -1 ? /* @__PURE__ */ React__default.createElement("span", null, selection.start + 1, " - ", selection.end + 1) : /* @__PURE__ */ React__default.createElement("span", null, "1 - ", isProtein2 ? proteinSize : size),
+        title: "Region"
+      }
+    )), /* @__PURE__ */ React__default.createElement("h5", null, isProtein2 ? "Amino Acid" : "Base Pair", " Frequencies"), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-table" }, /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-row" }, /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, "Amino Acid"), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, "Count"), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, "Percentage")), frequencyEntries.map(([aa, data], idx) => {
+      return /* @__PURE__ */ React__default.createElement("div", { className: `sidebar-row property-amino-acid-${idx}` }, /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, aa, " ", isProtein2 ? `(${aminoAcidShortNames[aa]})` : ""), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, data.count), /* @__PURE__ */ React__default.createElement("div", { className: "sidebar-cell" }, data.percentage.toFixed(1), "%"));
+    })));
+  } else {
+    trackInner = /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          marginTop: 20,
+          fontStyle: "italic",
+          fontSize: 16
+        }
+      },
+      "Click on a track to view its properties"
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ref: sidebarRef,
+      style: __spreadValues({
+        width: isOpen ? 350 : 0,
+        minWidth: isOpen ? 350 : 0,
+        maxWidth: isOpen ? 350 : 0,
+        paddingLeft: 20,
+        paddingRight: 20
+      }, style2),
+      className: "ove-sidebar-container",
+      tabIndex: 0,
+      onKeyDown: /* @__PURE__ */ __name((e) => {
+        if (e.key === "Escape") {
+          setProperties({ isOpen: false });
+        }
+      }, "onKeyDown")
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        style: {
+          position: "absolute",
+          top: 5,
+          right: 10,
+          zIndex: 1,
+          cursor: "pointer"
+        },
+        minimal: true,
+        intent: "primary",
+        "data-tip": "Hide Track Properties",
+        icon: "cross",
+        onClick: /* @__PURE__ */ __name(() => setProperties({ isOpen: false }), "onClick")
+      }
+    ),
+    trackInner
+  );
+}, "PropertySidePanel");
+function RowItem({ item, title, units }) {
+  if (!item) return;
+  const propertyClass = title.split(" ").join("-").toLowerCase();
+  return /* @__PURE__ */ React__default.createElement("div", { className: `ve-flex-row property-${propertyClass}` }, /* @__PURE__ */ React__default.createElement("div", { className: "ve-column-left" }, title), /* @__PURE__ */ React__default.createElement("div", { className: "ve-column-right" }, item, " ", units != null ? units : ""));
+}
+__name(RowItem, "RowItem");
+function calculatePairwiseIdentity(seq1, seq2, excludeGaps = true) {
+  if (seq1.length !== seq2.length) {
+    throw new Error("Sequences must be aligned (same length)");
+  }
+  let identicalPositions = 0;
+  let validPositions = 0;
+  for (let i = 0; i < seq1.length; i++) {
+    const aa1 = seq1[i].toUpperCase();
+    const aa2 = seq2[i].toUpperCase();
+    if (excludeGaps && aa1 === "-" && aa2 === "-") {
+      continue;
+    }
+    validPositions++;
+    if (aa1 === aa2) {
+      identicalPositions++;
+    }
+  }
+  return { validPositions, identicalPositions };
+}
+__name(calculatePairwiseIdentity, "calculatePairwiseIdentity");
+function calculateIdentityMatrix(alignedSequences) {
+  const n2 = Object.keys(alignedSequences).length;
+  const identityMatrix = Array(n2).fill(n2).map(() => Array(n2).fill(0));
+  const sequenceNames = Object.keys(alignedSequences);
+  const _identicalPositions = [];
+  for (let i = 0; i < n2; i++) {
+    for (let j2 = i; j2 < n2; j2++) {
+      if (i === j2) {
+        identityMatrix[i][j2] = 100;
+      } else {
+        const seq1 = alignedSequences[sequenceNames[i]];
+        const seq2 = alignedSequences[sequenceNames[j2]];
+        const { validPositions, identicalPositions } = calculatePairwiseIdentity(seq1, seq2, true);
+        const identityPercentage = validPositions > 0 ? identicalPositions / validPositions * 100 : 0;
+        _identicalPositions.push({
+          identicalPositions,
+          seqs: [sequenceNames[i], sequenceNames[j2]]
+        });
+        identityMatrix[i][j2] = identityPercentage;
+        identityMatrix[j2][i] = identityPercentage;
+      }
+    }
+  }
+  return {
+    matrix: identityMatrix,
+    sequenceNames,
+    identicalPositions: _identicalPositions
+  };
+}
+__name(calculateIdentityMatrix, "calculateIdentityMatrix");
+function getPropertyAnalysis(alignedSequences) {
+  const sequences = Object.values(alignedSequences).slice(1);
+  function getResidueProperties(residue, map3) {
+    return Object.keys(map3).filter((key) => map3[key].includes(residue));
+  }
+  __name(getResidueProperties, "getResidueProperties");
+  function intersectHelper(arrays) {
+    if (arrays.length === 0) return [];
+    return arrays.reduce((a2, b3) => a2.filter((x) => b3.includes(x)));
+  }
+  __name(intersectHelper, "intersectHelper");
+  const seqLength = sequences[0].length;
+  return Array.from({ length: seqLength }, (_2, pos) => {
+    const residues = sequences.map((seq) => seq[pos]).filter((r2) => r2 !== "-");
+    const sizeProps = residues.map(
+      (r2) => getResidueProperties(r2, residueSizeMap)
+    );
+    const polarityProps = residues.map(
+      (r2) => getResidueProperties(r2, polarityMap)
+    );
+    const specificGroupProps = residues.map(
+      (r2) => getResidueProperties(r2, specificGroupMap)
+    );
+    const shared = {
+      size: intersectHelper(sizeProps),
+      polarity: intersectHelper(polarityProps),
+      specificGroup: intersectHelper(specificGroupProps)
+    };
+    const group = shared.specificGroup.length > 0 ? shared.specificGroup[0] : `${shared.size.length ? shared.size[0] : ""} ${shared.polarity.length ? shared.polarity[0] : ""}`;
+    function mostFrequent(arr) {
+      const freq = {};
+      arr.forEach((val2) => {
+        if (val2 !== "none") freq[val2] = (freq[val2] || 0) + 1;
+      });
+      const max2 = Math.max(...Object.values(freq), 0);
+      const mostFrequentProps = Object.entries(freq).filter(([, count2]) => count2 === max2).map(([prop]) => prop);
+      return {
+        props: mostFrequentProps,
+        count: max2
+      };
+    }
+    __name(mostFrequent, "mostFrequent");
+    let mostFreqGroup;
+    if (group.trim() === "") {
+      const mostFreqResidueGroups = {
+        size: mostFrequent(sizeProps.flat()),
+        polarity: mostFrequent(polarityProps.flat()),
+        specificGroup: mostFrequent(specificGroupProps.flat())
+      };
+      const sortedGroups = Object.entries(mostFreqResidueGroups).sort(
+        (a2, b3) => b3[1].count - a2[1].count
+      );
+      const topCount = sortedGroups[0][1].count;
+      const topOrTiedGroups = sortedGroups.filter(
+        ([, val2]) => val2.count === topCount
+      );
+      const specificGroupEntry = topOrTiedGroups.find(
+        ([key]) => key === "specificGroup"
+      );
+      if (specificGroupEntry) {
+        mostFreqGroup = specificGroupEntry[1].props.join(" ");
+      } else {
+        const allProps = [
+          ...new Set(topOrTiedGroups.flatMap(([, val2]) => val2.props))
+        ];
+        mostFreqGroup = allProps.join(" ");
+      }
+    }
+    const aaGroup = group.trim() || mostFreqGroup.trim();
+    return {
+      position: pos,
+      residues,
+      group: aaGroup,
+      color: combineGroupColors(aaGroup.split(" "))
+    };
+  });
+}
+__name(getPropertyAnalysis, "getPropertyAnalysis");
+function getIdentityAndFrequencies(alignedSequences) {
+  const sequences = Object.values(alignedSequences).slice(1);
+  const alignmentLength = sequences[0].length;
+  let totalScore = 0;
+  let totalPositions = 0;
+  const identityPercentages = [];
+  for (let pos = 0; pos < alignmentLength; pos++) {
+    const column = sequences.map((seq) => seq[pos]);
+    const nonGapResidues = column;
+    const propertyCounts = {};
+    if (nonGapResidues.length === 0) identityPercentages.push(0);
+    if (nonGapResidues.length < 2) continue;
+    let totalProperties = 0;
+    const residueCounts = {};
+    nonGapResidues.forEach((aa) => {
+      residueCounts[aa] = (residueCounts[aa] || 0) + 1;
+      const props = residuePropertyMap[aa] || [];
+      props.forEach((prop) => {
+        propertyCounts[prop] = (propertyCounts[prop] || 0) + 1;
+      });
+      totalProperties++;
+    });
+    const propertyPercentages = {};
+    Object.entries(propertyCounts).forEach(([prop, count2]) => {
+      propertyPercentages[prop] = count2 / totalProperties * 100;
+    });
+    const maxCount = Math.max(...Object.values(residueCounts));
+    const positionScore = maxCount / nonGapResidues.length;
+    identityPercentages.push(maxCount / nonGapResidues.length * 100);
+    totalScore += positionScore;
+    totalPositions++;
+  }
+  const overallIdentity = totalPositions > 0 ? totalScore / totalPositions * 100 : 0;
+  return {
+    overallIdentity,
+    frequencies: identityPercentages
+  };
+}
+__name(getIdentityAndFrequencies, "getIdentityAndFrequencies");
+function getLabileSites(alignedSequences, threshold = 0.5) {
+  const sequences = Object.values(alignedSequences);
+  const alignmentLength = sequences[0].length;
+  const labileSites = [];
+  const conservationScores = [];
+  for (let pos = 0; pos < alignmentLength; pos++) {
+    const column = sequences.map((seq) => seq[pos]);
+    const nonGapResidues = column.filter((aa) => aa !== "-");
+    if (nonGapResidues.length < 2) {
+      conservationScores.push(null);
+      continue;
+    }
+    const counts = {};
+    nonGapResidues.forEach((aa) => {
+      counts[aa] = (counts[aa] || 0) + 1;
+    });
+    const maxCount = Math.max(...Object.values(counts));
+    const conservationScore = maxCount / nonGapResidues.length;
+    conservationScores.push(conservationScore);
+    if (conservationScore <= threshold) {
+      labileSites.push({
+        position: pos + 1,
+        // 1-based indexing
+        conservationScore,
+        residueVariation: Object.keys(counts),
+        frequencies: counts
+      });
+    }
+  }
+  return {
+    sites: labileSites,
+    conservationScores,
+    totalLabileSites: labileSites.length,
+    percentageLabile: labileSites.length / alignmentLength * 100
+  };
+}
+__name(getLabileSites, "getLabileSites");
+const getAlignedAminoAcidSequenceProps = /* @__PURE__ */ __name((tracks) => {
+  let sequences = {};
+  tracks.forEach((at) => {
+    sequences = __spreadProps(__spreadValues({}, sequences), {
+      [at.alignmentData.name]: at.alignmentData.sequence
+    });
+  });
+  const identity4 = calculateIdentityMatrix(sequences);
+  const { overallIdentity, frequencies } = getIdentityAndFrequencies(sequences);
+  const labileSites = getLabileSites(sequences, 0.5);
+  const propertyAnalysis = getPropertyAnalysis(sequences);
+  return __spreadProps(__spreadValues({}, identity4), {
+    overallIdentity,
+    frequencies,
+    labileSites,
+    propertyAnalysis
+  });
+}, "getAlignedAminoAcidSequenceProps");
+const residueSizeMap = {
+  tiny: ["A", "C", "G", "S"],
+  small: ["A", "C", "D", "G", "N", "P", "S", "T", "V"],
+  large: ["E", "F", "H", "I", "K", "L", "M", "Q", "R", "W", "Y"]
+};
+const polarityMap = {
+  hydrophobic: ["A", "C", "F", "I", "L", "M", "V", "W", "Y", "H", "K", "R"],
+  polar: ["D", "E", "H", "K", "N", "Q", "R", "S", "T", "Y"],
+  charged: ["D", "E", "H", "K", "R"]
+};
+const specificGroupMap = {
+  aliphatic: ["I", "L", "V"],
+  aromatic: ["F", "W", "Y", "H"],
+  positive: ["H", "K", "R"],
+  negative: ["D", "E"],
+  amidic: ["N", "Q"],
+  "sulphur-containing": ["C", "M"],
+  hydroxylic: ["S", "T"]
+};
+const residuePropertyMap = {
+  A: ["Small", "Tiny", "Hydrophobic"],
+  C: ["Small", "Tiny", "Hydrophobic", "Sulphur-Containing"],
+  D: ["Small", "Polar", "Charged", "Negative"],
+  E: ["Large", "Polar", "Charged", "Negative"],
+  F: ["Hydrophobic", "Aromatic"],
+  G: ["Small", "Tiny"],
+  H: ["Hydrophobic", "Polar", "Charged", "Aromatic", "Positive"],
+  I: ["Hydrophobic", "Aliphatic"],
+  K: ["Hydrophobic", "Polar", "Charged", "Positive"],
+  L: ["Hydrophobic", "Aliphatic"],
+  M: ["Hydrophobic", "Sulphur-Containing"],
+  N: ["Polar", "Small", "Amidic"],
+  P: ["Small"],
+  Q: ["Polar", "Amidic"],
+  R: ["Polar", "Charged", "Positive"],
+  S: ["Polar", "Small", "Tiny", "Hydroxylic"],
+  T: ["Polar", "Small", "Hydroxylic"],
+  V: ["Hydrophobic", "Small", "Aliphatic"],
+  W: ["Hydrophobic", "Polar", "Aromatic"],
+  Y: ["Hydrophobic", "Polar", "Aromatic"]
+};
+const propertiesColorMap = {
+  aliphatic: "#AE83A3",
+  aromatic: "#EC8BA0",
+  amidic: "#83C6C2",
+  hydroxylic: "#65A3AC",
+  "sulphur-containing": "#F8CD7F",
+  positive: "#A1838F",
+  negative: "#DC855C",
+  large: "#C1B87E",
+  small: "#B1DEF0",
+  tiny: "#74BDA8",
+  hydrophobic: "#F4B3A2",
+  polar: "#C1DCAE",
+  charged: "#D7AD7A",
+  none: "#888"
+};
+function combineGroupColors(colorKeys, colorMap = propertiesColorMap) {
+  if (!colorKeys.length || colorKeys[0] === "none") return "#000";
+  const toRGB = /* @__PURE__ */ __name((hex) => {
+    if (!hex) return [0, 0, 0];
+    const h2 = hex.replace("#", "");
+    return [
+      parseInt(h2.substring(0, 2), 16),
+      parseInt(h2.substring(2, 4), 16),
+      parseInt(h2.substring(4, 6), 16)
+    ];
+  }, "toRGB");
+  const rgbs = colorKeys.map((key) => toRGB(colorMap[key])).filter((rgb) => rgb.every(Number.isFinite));
+  if (rgbs.length === 0) return "#888";
+  const avg = [0, 1, 2].map(
+    (i) => Math.round(rgbs.reduce((sum2, rgb) => sum2 + rgb[i], 0) / rgbs.length)
+  );
+  return "#" + avg.map((val2) => val2.toString(16).padStart(2, "0")).join("").toUpperCase();
+}
+__name(combineGroupColors, "combineGroupColors");
 let charWidthInLinearViewDefault = 12;
 try {
   const newVal2 = JSON.parse(
@@ -137332,6 +138515,12 @@ const AlignmentView = /* @__PURE__ */ __name((props) => {
       verticalVisibleRange: { start: 0, end: 0 }
     })
   );
+  const [propertySidePanel, setPropertySidePanel] = useState({
+    isOpen: false,
+    selection: null,
+    track: null,
+    isPairwise: false
+  });
   const getAllAlignmentsFastaText = useCallback$1(() => {
     const selectionLayer22 = store2.getState().VectorEditor.__allEditorsOptions.alignments[id2].selectionLayer || {};
     const seqDataOfAllTracksToCopy = [];
@@ -137388,6 +138577,59 @@ ${seqDataToCopy}\r
       if (window.Cypress) delete window.Cypress.scrollAlignmentToPercent;
     };
   }, []);
+  const {
+    alignmentAnnotationVisibility,
+    togglableAlignmentAnnotationSettings
+  } = alignmentVisibilityToolOptions;
+  useEffect(() => {
+    const dnaAnnotations = [
+      "chromatogram",
+      "reverseSequence",
+      "cdsFeatureTranslations",
+      "dnaColors",
+      "translations",
+      "compactNames"
+    ];
+    const aminoAcidAnnotations = [
+      "physicalProperties",
+      "serineThreonine",
+      "labileSites",
+      "colorScheme",
+      "plot",
+      "conservation",
+      "properties",
+      "hydrophobicity",
+      "polar",
+      "negative",
+      "positive",
+      "charged",
+      "aliphatic",
+      "aromatic",
+      "compactNames"
+    ];
+    const noNeededAnnotationsForPairwise = ["plot", "labileSites"];
+    if (alignmentTracks[0].sequenceData.isProtein) {
+      dnaAnnotations.forEach((key) => {
+        delete alignmentAnnotationVisibility[key];
+        delete togglableAlignmentAnnotationSettings[key];
+      });
+      aminoAcidAnnotations.forEach((key) => {
+        alignmentAnnotationVisibility[key] = false;
+        togglableAlignmentAnnotationSettings[key] = false;
+      });
+      if (isPairwise) {
+        noNeededAnnotationsForPairwise.forEach((key) => {
+          delete alignmentAnnotationVisibility[key];
+          delete togglableAlignmentAnnotationSettings[key];
+        });
+      }
+    } else {
+      aminoAcidAnnotations.forEach((key) => {
+        delete alignmentAnnotationVisibility[key];
+        delete togglableAlignmentAnnotationSettings[key];
+      });
+    }
+  }, [alignmentTracks, isPairwise]);
   const maxLength = useMemo$1(() => {
     const { sequenceData: sequenceData22 = { sequence: "" }, alignmentData } = alignmentTracks[0];
     const data = alignmentData || sequenceData22;
@@ -137516,6 +138758,11 @@ ${seqDataToCopy}\r
         )
       };
       callback2(callbackVals);
+      setPropertySidePanel((prev) => {
+        return __spreadProps(__spreadValues({}, prev), {
+          selection: easyStore2.current.selectionLayer
+        });
+      });
     },
     [
       caretPositionUpdate2,
@@ -137687,7 +138934,12 @@ ${seqDataToCopy}\r
       annotationLabelVisibility: alignmentVisibilityToolOptions.alignmentAnnotationLabelVisibility
     });
   }, "estimateRowHeight");
-  const renderItem = /* @__PURE__ */ __name((_i, key, isTemplate, cloneProps) => {
+  const aminoAcidAlignmentProperties = useMemo$1(() => {
+    if (isPairwise || !alignmentTracks[0].sequenceData.isProtein) return;
+    return getAlignedAminoAcidSequenceProps(alignmentTracks);
+  }, [alignmentTracks, isPairwise]);
+  const renderItem = /* @__PURE__ */ __name((_i, _key, isTemplate, cloneProps) => {
+    var _a3, _b2, _c, _d, _e;
     const isDragDisabled = !allowTrackRearrange || isPairwise;
     let i;
     if (isTemplate) {
@@ -137726,22 +138978,44 @@ ${seqDataToCopy}\r
       className: "tg-trimmed-region",
       color: "gray"
     }));
+    const trackIdentifier = (track == null ? void 0 : track.sequenceData.id) ? "id" : "hash";
+    const selectedTrack = propertySidePanel == null ? void 0 : propertySidePanel.track;
+    const isTrackSelected = (selectedTrack == null ? void 0 : selectedTrack.sequenceData[trackIdentifier]) === (track == null ? void 0 : track.sequenceData[trackIdentifier]);
+    let aaIdentity;
+    let aaIdenticalPosition;
+    if (sequenceData22.isProtein && !isPairwise) {
+      aaIdentity = (_c = (_b2 = (_a3 = aminoAcidAlignmentProperties == null ? void 0 : aminoAcidAlignmentProperties.matrix) == null ? void 0 : _a3[0]) == null ? void 0 : _b2[i]) == null ? void 0 : _c.toFixed(1);
+      aaIdenticalPosition = (_e = (_d = aminoAcidAlignmentProperties == null ? void 0 : aminoAcidAlignmentProperties.identicalPositions) == null ? void 0 : _d[i - 1]) == null ? void 0 : _e.identicalPositions;
+      if (sequenceData22.name === "Consensus") {
+        sequenceData22.aminoAcidProperties = isPairwise || !sequenceData22.isProtein ? null : aminoAcidAlignmentProperties;
+      }
+    }
     const innerRenderItem = /* @__PURE__ */ __name((provided = {}, snapshot) => {
-      var _a3;
+      var _a4;
       return /* @__PURE__ */ React__default.createElement(
         "div",
         __spreadProps(__spreadValues({
           ref: provided == null ? void 0 : provided.innerRef
         }, provided == null ? void 0 : provided.draggableProps), {
           className: classNames("alignmentViewTrackContainer", {
-            isDragDisabled
+            isDragDisabled,
+            isTrackSelected
           }),
           "data-alignment-track-index": i,
           style: __spreadValues(__spreadValues({
             boxShadow: isTemplate ? "red 0px -1px 0px 0px inset, red 0px 1px 0px 0px inset" : "0px -1px 0px 0px inset",
             display: "flex"
-          }, (_a3 = provided == null ? void 0 : provided.draggableProps) == null ? void 0 : _a3.style), (snapshot == null ? void 0 : snapshot.isDragging) && { left: unset }),
-          key: i
+          }, (_a4 = provided == null ? void 0 : provided.draggableProps) == null ? void 0 : _a4.style), (snapshot == null ? void 0 : snapshot.isDragging) && { left: unset }),
+          key: i,
+          onClick: /* @__PURE__ */ __name(() => {
+            setPropertySidePanel((prev) => {
+              return __spreadProps(__spreadValues({}, prev), {
+                selection: easyStore2.current.selectionLayer,
+                track,
+                isPairwise
+              });
+            });
+          }, "onClick")
         }),
         /* @__PURE__ */ React__default.createElement(
           "div",
@@ -137862,7 +139136,7 @@ ${seqDataToCopy}\r
                 "data-tip": "This sequence was trimmed and resubmitted for alignment"
               },
               "TRIMMED"
-            ), sequenceData22.sequence.length, " bps")
+            ), sequenceData22.isProtein ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", null, sequenceData22.proteinSequence.length, " AAs"), !compactNames && i > 0 && !isPairwise && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__default.createElement("span", null, "Identical Positions: ", aaIdenticalPosition), /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__default.createElement("span", null, "Identity: ", aaIdentity, "%"))) : /* @__PURE__ */ React__default.createElement("span", null, sequenceData22.sequence.length, " bps"))
           ),
           /* @__PURE__ */ React__default.createElement(
             HorizontalPanelDragHandle,
@@ -138147,7 +139421,8 @@ ${seqDataToCopy}\r
     console.error("corrupted data!", props);
     return "corrupted data!";
   }
-  const getTrackVis = /* @__PURE__ */ __name((alignmentTracks2, isTemplate, allTracks) => {
+  const getTrackVis = /* @__PURE__ */ __name((alignmentTracks2, isTemplate, allTracks, aminoAcidAlignmentProperties2, labileSites2) => {
+    const labilePositions = (aminoAcidAlignmentProperties2 == null ? void 0 : aminoAcidAlignmentProperties2.labileSites.sites.map((ls) => ls.position)) || [];
     const rowData2 = {};
     const innerTrackVis = /* @__PURE__ */ __name((drop_provided, drop_snapshot) => {
       return /* @__PURE__ */ React__default.createElement(
@@ -138335,6 +139610,14 @@ ${seqDataToCopy}\r
                   easyStore: easyStore2.current
                 }
               ),
+              labileSites2 && labilePositions.length > 0 && /* @__PURE__ */ React__default.createElement(
+                LabileSitesLayer,
+                {
+                  leftMargin: nameDivWidth,
+                  charWidth: charWidth2,
+                  positionsToMark: labilePositions
+                }
+              ),
               isTemplate ? renderItem(0, 0, isTemplate) : /* @__PURE__ */ React__default.createElement(
                 ReactList,
                 {
@@ -138407,251 +139690,310 @@ ${seqDataToCopy}\r
       updateLabelsForInViewFeatures();
     }, "onPinch")
   };
-  return /* @__PURE__ */ React__default.createElement(PinchHelper, __spreadValues({}, pinchHandler), /* @__PURE__ */ React__default.createElement(ResizeSensor, { onResize: handleResize }, /* @__PURE__ */ React__default.createElement(
+  const { labileSites } = alignmentVisibilityToolOptions.alignmentAnnotationVisibility;
+  return /* @__PURE__ */ React__default.createElement(PinchHelper, __spreadValues({}, pinchHandler), /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      style: __spreadValues({
-        height: height || (isPairwise ? "auto" : viewportHeight * 0.88),
+      style: {
         display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        position: "relative",
-        overflowY: "auto"
-      }, style2),
-      className: "alignmentView"
+        flexDirection: "row"
+      }
     },
-    /* @__PURE__ */ React__default.createElement(
-      DragDropContext,
+    /* @__PURE__ */ React__default.createElement(ResizeSensor, { onResize: handleResize }, /* @__PURE__ */ React__default.createElement(
+      "div",
       {
-        onDragStart: onTrackDragStart,
-        onDragEnd: onTrackDragEnd
+        style: __spreadValues({
+          height: height || (isPairwise ? "auto" : viewportHeight * 0.88),
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          position: "relative",
+          overflowY: "auto"
+        }, style2),
+        className: "alignmentView"
       },
       /* @__PURE__ */ React__default.createElement(
-        "div",
+        DragDropContext,
         {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            position: "relative",
-            overflowY: "auto"
-          },
-          className: "alignmentView-top-container"
+          onDragStart: onTrackDragStart,
+          onDragEnd: onTrackDragEnd
         },
         /* @__PURE__ */ React__default.createElement(
           "div",
           {
             style: {
-              paddingTop: "3px",
-              paddingBottom: "5px",
-              borderBottom: "1px solid",
               display: "flex",
-              minHeight: "32px",
+              flexDirection: "column",
+              position: "relative",
               width: "100%",
-              flexWrap: "nowrap",
-              flexDirection: "row",
-              flex: "0 0 auto"
+              overflowY: "auto"
             },
-            className: "ve-alignment-top-bar"
+            className: "alignmentView-top-container"
           },
-          additionalTopLeftEl,
-          handleBackButtonClicked && /* @__PURE__ */ React__default.createElement(Tooltip, { content: "Back to Pairwise Alignment Overview" }, /* @__PURE__ */ React__default.createElement(
-            Button,
-            {
-              icon: "arrow-left",
-              onClick: /* @__PURE__ */ __name(() => {
-                handleBackButtonClicked();
-                caretPositionUpdate2(-1);
-              }, "onClick"),
-              small: true,
-              intent: Intent.PRIMARY,
-              minimal: true,
-              style: { marginRight: 10 },
-              className: "alignmentViewBackButton"
-            }
-          )),
-          /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React__default.createElement(
-            EditableText,
-            {
-              disabled: !handleAlignmentRename,
-              onChange: /* @__PURE__ */ __name((v2) => {
-                setAlignmentName(v2);
-              }, "onChange"),
-              maxLength: 399,
-              value: alignmentName,
-              onConfirm: /* @__PURE__ */ __name((v2) => __async(void 0, null, function* () {
-                if (!v2) {
-                  setAlignmentName(_alignmentName);
-                  return;
-                }
-                if (v2 === _alignmentName) {
-                  return;
-                }
-                setSaveMessage("Alignment Renaming..");
-                setSaveMessageLoading(true);
-                yield handleAlignmentRename(v2, props);
-                setSaveMessage("Rename Successful");
-                setSaveMessageLoading(false);
-                setTimeout(() => {
-                  setSaveMessage(void 0);
-                  setSaveMessageLoading(false);
-                }, 5e3);
-              }), "onConfirm"),
-              selectAllOnFocus: true,
-              className: "veAlignmentName"
-            }
-          ), "   ", /* @__PURE__ */ React__default.createElement(
+          /* @__PURE__ */ React__default.createElement(
             "div",
             {
-              className: "veAlignmentType",
               style: {
                 paddingTop: "3px",
-                fontSize: "14px",
-                color: "grey",
-                maxWidth: "300px",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
+                paddingBottom: "5px",
+                borderBottom: "1px solid",
+                display: "flex",
+                minHeight: "32px",
+                width: "100%",
+                flexWrap: "nowrap",
+                flexDirection: "row",
+                flex: "0 0 auto"
               },
-              "data-title": alignmentType || "Unknown Alignment Type"
+              className: "ve-alignment-top-bar"
             },
-            alignmentType || "Unknown Alignment Type"
-          )),
-          unmappedSeqs && /* @__PURE__ */ React__default.createElement(
-            InfoHelper,
-            {
-              size: 20,
-              content: /* @__PURE__ */ React__default.createElement("div", null, "This alignment had sequences that did not map to the template sequence:", unmappedSeqs.map(({ sequenceData: sequenceData22 }, i) => /* @__PURE__ */ React__default.createElement("div", { key: i }, sequenceData22.name))),
-              intent: "warning",
-              icon: "warning-sign"
-            }
-          ),
-          !isInPairwiseOverviewView && /* @__PURE__ */ React__default.createElement(
-            UncontrolledSliderWithPlusMinusBtns,
-            {
-              noWraparound: true,
-              bindOutsideChangeHelper: bindOutsideChangeHelper.current,
-              onClick: /* @__PURE__ */ __name(() => {
-                setTimeout(scrollToCaret2, 0);
-              }, "onClick"),
-              minCharWidth: getMinCharWidth(),
-              onChange: /* @__PURE__ */ __name((zoomLvl) => __async(void 0, null, function* () {
-                isZooming.current = true;
-                setTimeout(() => {
-                  isZooming.current = false;
-                }, 10);
-                const minCharWidth = getMinCharWidth();
-                const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
-                const newCharWidth = minCharWidth * Math.pow(scaleFactor, zoomLvl);
-                yield setCharWidthInLinearView({
-                  charWidthInLinearView: newCharWidth
-                });
-                yield scrollToCaret2();
-                yield updateLabelsForInViewFeatures({
-                  rectElement: ".alignmentHolder"
-                });
-              }), "onChange"),
-              coerceInitialValue,
-              title: "Adjust Zoom Level",
-              style: { paddingTop: "4px", width: 100 },
-              className: "veZoomAlignmentSlider ove-slider",
-              labelRenderer: false,
-              initialValue: charWidth2,
-              stepSize: 0.05,
-              max: 10,
-              min: 0,
-              clickStepSize: 0.5
-            }
-          ),
-          !noVisibilityOptions && !isInPairwiseOverviewView && /* @__PURE__ */ React__default.createElement(
-            AlignmentVisibilityTool,
-            __spreadValues({
-              currentPairwiseAlignmentIndex
-            }, alignmentVisibilityToolOptions)
+            additionalTopLeftEl,
+            handleBackButtonClicked && /* @__PURE__ */ React__default.createElement(Tooltip, { content: "Back to Pairwise Alignment Overview" }, /* @__PURE__ */ React__default.createElement(
+              Button,
+              {
+                icon: "arrow-left",
+                onClick: /* @__PURE__ */ __name(() => {
+                  handleBackButtonClicked();
+                  caretPositionUpdate2(-1);
+                }, "onClick"),
+                small: true,
+                intent: Intent.PRIMARY,
+                minimal: true,
+                style: { marginRight: 10 },
+                className: "alignmentViewBackButton"
+              }
+            )),
+            /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React__default.createElement(
+              EditableText,
+              {
+                disabled: !handleAlignmentRename,
+                onChange: /* @__PURE__ */ __name((v2) => {
+                  setAlignmentName(v2);
+                }, "onChange"),
+                maxLength: 399,
+                value: alignmentName,
+                onConfirm: /* @__PURE__ */ __name((v2) => __async(void 0, null, function* () {
+                  if (!v2) {
+                    setAlignmentName(_alignmentName);
+                    return;
+                  }
+                  if (v2 === _alignmentName) {
+                    return;
+                  }
+                  setSaveMessage("Alignment Renaming..");
+                  setSaveMessageLoading(true);
+                  yield handleAlignmentRename(v2, props);
+                  setSaveMessage("Rename Successful");
+                  setSaveMessageLoading(false);
+                  setTimeout(() => {
+                    setSaveMessage(void 0);
+                    setSaveMessageLoading(false);
+                  }, 5e3);
+                }), "onConfirm"),
+                selectAllOnFocus: true,
+                className: "veAlignmentName"
+              }
+            ), "   ", /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                className: "veAlignmentType",
+                style: {
+                  paddingTop: "3px",
+                  fontSize: "14px",
+                  color: "grey",
+                  maxWidth: "300px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                "data-title": alignmentType || "Unknown Alignment Type"
+              },
+              alignmentType || "Unknown Alignment Type"
+            )),
+            unmappedSeqs && /* @__PURE__ */ React__default.createElement(
+              InfoHelper,
+              {
+                size: 20,
+                content: /* @__PURE__ */ React__default.createElement("div", null, "This alignment had sequences that did not map to the template sequence:", unmappedSeqs.map(({ sequenceData: sequenceData22 }, i) => /* @__PURE__ */ React__default.createElement("div", { key: i }, sequenceData22.name))),
+                intent: "warning",
+                icon: "warning-sign"
+              }
+            ),
+            !isInPairwiseOverviewView && /* @__PURE__ */ React__default.createElement(
+              UncontrolledSliderWithPlusMinusBtns,
+              {
+                noWraparound: true,
+                bindOutsideChangeHelper: bindOutsideChangeHelper.current,
+                onClick: /* @__PURE__ */ __name(() => {
+                  setTimeout(scrollToCaret2, 0);
+                }, "onClick"),
+                minCharWidth: getMinCharWidth(),
+                onChange: /* @__PURE__ */ __name((zoomLvl) => __async(void 0, null, function* () {
+                  isZooming.current = true;
+                  setTimeout(() => {
+                    isZooming.current = false;
+                  }, 10);
+                  const minCharWidth = getMinCharWidth();
+                  const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
+                  const newCharWidth = minCharWidth * Math.pow(scaleFactor, zoomLvl);
+                  yield setCharWidthInLinearView({
+                    charWidthInLinearView: newCharWidth
+                  });
+                  yield scrollToCaret2();
+                  yield updateLabelsForInViewFeatures({
+                    rectElement: ".alignmentHolder"
+                  });
+                }), "onChange"),
+                coerceInitialValue,
+                title: "Adjust Zoom Level",
+                style: { paddingTop: "4px", width: 100 },
+                className: "veZoomAlignmentSlider ove-slider",
+                labelRenderer: false,
+                initialValue: charWidth2,
+                stepSize: 0.05,
+                max: 10,
+                min: 0,
+                clickStepSize: 0.5
+              }
+            ),
+            !noVisibilityOptions && !isInPairwiseOverviewView && /* @__PURE__ */ React__default.createElement(
+              AlignmentVisibilityTool,
+              __spreadValues({
+                currentPairwiseAlignmentIndex
+              }, alignmentVisibilityToolOptions)
+            ),
+            additionalTopEl,
+            saveMessage && /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                className: "ove-menu-toast",
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  marginLeft: "auto",
+                  marginRight: 10
+                }
+              },
+              saveMessageLoading ? /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Spinner, { size: 15 })) : /* @__PURE__ */ React__default.createElement(Icon, { icon: "tick-circle", intent: "success" }),
+              " ",
+              " ",
+              saveMessage
+            ),
+            !propertySidePanel.isOpen && /* @__PURE__ */ React__default.createElement(
+              Button,
+              {
+                small: true,
+                minimal: true,
+                className: "showTrackPropertiesBtn",
+                icon: "menu-closed",
+                intent: "primary",
+                style: { marginLeft: "auto" },
+                onClick: /* @__PURE__ */ __name(() => {
+                  setPropertySidePanel((prev) => {
+                    return __spreadProps(__spreadValues({}, prev), {
+                      isOpen: true
+                    });
+                  });
+                }, "onClick"),
+                "data-tip": "Show Track Properties"
+              }
+            )
           ),
-          additionalTopEl,
-          saveMessage && /* @__PURE__ */ React__default.createElement(
-            "div",
-            {
-              className: "ove-menu-toast",
-              style: {
-                display: "flex",
-                alignItems: "center",
-                marginLeft: "auto",
-                marginRight: 10
+          hasTemplate ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "alignmentTrackFixedToTop" }, getTrackVis(
+            [firstTrack],
+            true,
+            alignmentTracks,
+            aminoAcidAlignmentProperties,
+            labileSites
+          )), getTrackVis(
+            otherTracks,
+            false,
+            alignmentTracks,
+            aminoAcidAlignmentProperties,
+            labileSites
+          )) : getTrackVis(
+            alignmentTracks,
+            false,
+            alignmentTracks,
+            aminoAcidAlignmentProperties,
+            labileSites
+          )
+        )
+      ),
+      !isInPairwiseOverviewView && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "alignmentViewBottomBar",
+          style: {
+            // flexGrow: 1,
+            // minHeight: "-webkit-min-content", //https://stackoverflow.com/questions/28029736/how-to-prevent-a-flex-item-from-shrinking-smaller-than-its-content
+            maxHeight: 210,
+            marginTop: 4,
+            paddingTop: 4,
+            borderTop: "1px solid lightgrey",
+            display: "flex"
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          Minimap,
+          {
+            selectionLayerComp: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+              PerformantSelectionLayer,
+              {
+                is: true,
+                hideCarets: true,
+                className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
+                easyStore: easyStore2.current,
+                sequenceLength: maxLength,
+                charWidth: getMinCharWidth(true),
+                row: { start: 0, end: maxLength - 1 }
+              }
+            ), /* @__PURE__ */ React__default.createElement(
+              PerformantCaret,
+              {
+                style: {
+                  opacity: 0.2
+                },
+                className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
+                sequenceLength: maxLength,
+                charWidth: getMinCharWidth(true),
+                row: { start: 0, end: maxLength - 1 },
+                easyStore: easyStore2.current
               }
+            )),
+            alignmentTracks,
+            dimensions: {
+              width: Math.max(width, 10) || 10
             },
-            saveMessageLoading ? /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Spinner, { size: 15 })) : /* @__PURE__ */ React__default.createElement(Icon, { icon: "tick-circle", intent: "success" }),
-            " ",
-            " ",
-            saveMessage
-          )
-        ),
-        hasTemplate ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "alignmentTrackFixedToTop" }, getTrackVis([firstTrack], true, alignmentTracks)), getTrackVis(otherTracks, false, alignmentTracks)) : getTrackVis(alignmentTracks, false, alignmentTracks)
+            nameDivOffsetPercent: 0,
+            scrollYToTrack,
+            onSizeAdjust: onMinimapSizeAdjust,
+            minSliderSize,
+            laneHeight: minimapLaneHeight || (alignmentTracks.length > 5 ? 10 : 17),
+            laneSpacing: minimapLaneSpacing || (alignmentTracks.length > 5 ? 2 : 1),
+            easyStore: easyStore2.current,
+            numBpsShownInLinearView: getNumBpsShownInLinearView(),
+            scrollAlignmentView: false,
+            onMinimapScrollX: scrollAlignmentToPercent
+          }
+        )
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        GlobalDialog,
+        null
       )
-    ),
-    !isInPairwiseOverviewView && /* @__PURE__ */ React__default.createElement(
-      "div",
+    )),
+    propertySidePanel.isOpen && /* @__PURE__ */ React__default.createElement(
+      PropertySidePanel,
       {
-        className: "alignmentViewBottomBar",
+        properties: propertySidePanel,
+        setProperties: setPropertySidePanel,
         style: {
-          // flexGrow: 1,
-          // minHeight: "-webkit-min-content", //https://stackoverflow.com/questions/28029736/how-to-prevent-a-flex-item-from-shrinking-smaller-than-its-content
-          maxHeight: 210,
-          marginTop: 4,
-          paddingTop: 4,
-          borderTop: "1px solid lightgrey",
-          display: "flex"
+          height: viewportHeight * 0.88
         }
-      },
-      /* @__PURE__ */ React__default.createElement(
-        Minimap,
-        {
-          selectionLayerComp: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-            PerformantSelectionLayer,
-            {
-              is: true,
-              hideCarets: true,
-              className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
-              easyStore: easyStore2.current,
-              sequenceLength: maxLength,
-              charWidth: getMinCharWidth(true),
-              row: { start: 0, end: maxLength - 1 }
-            }
-          ), /* @__PURE__ */ React__default.createElement(
-            PerformantCaret,
-            {
-              style: {
-                opacity: 0.2
-              },
-              className: "veAlignmentSelectionLayer veMinimapSelectionLayer",
-              sequenceLength: maxLength,
-              charWidth: getMinCharWidth(true),
-              row: { start: 0, end: maxLength - 1 },
-              easyStore: easyStore2.current
-            }
-          )),
-          alignmentTracks,
-          dimensions: {
-            width: Math.max(width, 10) || 10
-          },
-          nameDivOffsetPercent: 0,
-          scrollYToTrack,
-          onSizeAdjust: onMinimapSizeAdjust,
-          minSliderSize,
-          laneHeight: minimapLaneHeight || (alignmentTracks.length > 5 ? 10 : 17),
-          laneSpacing: minimapLaneSpacing || (alignmentTracks.length > 5 ? 2 : 1),
-          easyStore: easyStore2.current,
-          numBpsShownInLinearView: getNumBpsShownInLinearView(),
-          scrollAlignmentView: false,
-          onMinimapScrollX: scrollAlignmentToPercent
-        }
-      )
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      GlobalDialog,
-      null
+      }
     )
-  )));
+  ));
 }, "AlignmentView");
 const AlignmentView$1 = compose(
   withStore,
@@ -138700,6 +140042,20 @@ const AlignmentView$1 = compose(
         "cdsFeatureTranslations",
         "chromatogram",
         "dnaColors",
+        "physicalProperties",
+        "serineThreonine",
+        "labileSites",
+        "colorScheme",
+        "plot",
+        "conservation",
+        "properties",
+        "hydrophobicity",
+        "polar",
+        "negative",
+        "positive",
+        "charged",
+        "aliphatic",
+        "aromatic",
         "compactNames"
       ];
       const togglableAlignmentAnnotationSettings = {};
@@ -141039,7 +142395,8 @@ const userDefinedHandlersAndOpts = [
   "onCreateNewFromSubsequence",
   "onPreviewModeFullscreenClose",
   "onPaste",
-  "menuFilter"
+  "menuFilter",
+  "showAminoAcidUnitAsCodon"
 ];
 const cutsiteTool = connectToEditor(
   ({ readOnly: readOnly2, annotationVisibility: annotationVisibility2 = {}, toolBar: toolBar2 = {} }) => {
@@ -141433,9 +142790,8 @@ const _FindBar = class _FindBar extends React__default.Component {
           display: "flex",
           minWidth: 300
         } : {
-          position: "fixed",
-          top: 120,
-          right: 25,
+          position: "relative",
+          top: 100,
           padding: 10,
           display: "flex",
           alignItems: "start",
@@ -141912,6 +143268,7 @@ const ShowSelectionItem = compose(
   caretPosition: caretPosition2 = -1,
   sequenceLength = 0,
   isProtein: isProtein2,
+  showAminoAcidUnitAsCodon,
   sequenceData: sequenceData2 = { sequence: "" },
   showGCContent: showGCContent2,
   GCDecimalDigits,
@@ -141928,6 +143285,7 @@ const ShowSelectionItem = compose(
     sequenceLength,
     sequenceData: sequenceData2,
     showGCContent: showGCContent2,
+    showAminoAcidUnitAsCodon,
     GCDecimalDigits,
     isProtein: isProtein2
   }), /* @__PURE__ */ React__default.createElement(
@@ -141952,10 +143310,10 @@ const ShowLengthItem = connectToEditor(
   ({ sequenceData: sequenceData2 = { sequence: "" } }) => ({
     sequenceLength: sequenceData2.sequence.length
   })
-)(({ isProtein: isProtein2, sequenceLength = 0 }) => /* @__PURE__ */ React__default.createElement(StatusBarItem, { dataTest: "veStatusBar-length" }, `Length: ${divideBy3(
+)(({ isProtein: isProtein2, sequenceLength = 0, showAminoAcidUnitAsCodon }) => /* @__PURE__ */ React__default.createElement(StatusBarItem, { dataTest: "veStatusBar-length" }, `Length: ${divideBy3(
   sequenceLength,
   isProtein2
-)} ${isProtein2 ? "AAs" : "bps"}`));
+)} ${isProtein2 ? `${showAminoAcidUnitAsCodon ? "codons" : "AAs"}` : "bps"}`));
 const ShowTypeItem = connectToEditor(({ sequenceData: sequenceData2 }) => ({
   isProtein: sequenceData2.isProtein,
   isOligo: sequenceData2.isOligo,
@@ -142035,6 +143393,7 @@ function StatusBar({
   onSelectionOrCaretChanged,
   GCDecimalDigits = 1,
   isProtein: isProtein2,
+  showAminoAcidUnitAsCodon,
   beforeReadOnlyChange
 }) {
   return /* @__PURE__ */ React__default.createElement("div", { className: "veStatusBar" }, showMoleculeType && /* @__PURE__ */ React__default.createElement(ShowTypeItem, { editorName }), /* @__PURE__ */ React__default.createElement(
@@ -142062,13 +143421,21 @@ function StatusBar({
   ), /* @__PURE__ */ React__default.createElement(
     ShowSelectionItem,
     {
+      showAminoAcidUnitAsCodon,
       editorName,
       isProtein: isProtein2,
       showGCContentByDefault,
       onSelectionOrCaretChanged,
       GCDecimalDigits
     }
-  ), /* @__PURE__ */ React__default.createElement(ShowLengthItem, { isProtein: isProtein2, editorName }));
+  ), /* @__PURE__ */ React__default.createElement(
+    ShowLengthItem,
+    {
+      isProtein: isProtein2,
+      editorName,
+      showAminoAcidUnitAsCodon
+    }
+  ));
 }
 __name(StatusBar, "StatusBar");
 function StatusBarItem({ children, dataTest }) {
@@ -142987,8 +144354,8 @@ const PartProperties = genericAnnotationProperties({
   noType: true
 });
 const PropertiesContainer = /* @__PURE__ */ __name((Comp) => (props) => {
-  const _a2 = props, { additionalFooterEls, additionalHeaderEls } = _a2, rest = __objRest(_a2, ["additionalFooterEls", "additionalHeaderEls"]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, additionalHeaderEls, /* @__PURE__ */ React__default.createElement(Comp, __spreadValues({}, rest)), additionalFooterEls);
+  const _a2 = props, { additionalFooterEls, additionalHeaderEls, overrideEl } = _a2, rest = __objRest(_a2, ["additionalFooterEls", "additionalHeaderEls", "overrideEl"]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, additionalHeaderEls, overrideEl || /* @__PURE__ */ React__default.createElement(Comp, __spreadValues({}, rest)), additionalFooterEls);
 }, "PropertiesContainer");
 const allTabs = {
   general: PropertiesContainer(GeneralProperties$1),
@@ -144234,6 +145601,7 @@ const _Editor = class _Editor extends React__default.Component {
       hoveredId,
       isFullscreen,
       maxInsertSize,
+      showAminoAcidUnitAsCodon,
       maxAnnotationsToDisplay,
       minHeight = 400,
       onlyShowLabelsThatDoNotFit = true,
@@ -144422,6 +145790,7 @@ const _Editor = class _Editor extends React__default.Component {
         }), panelPropsToSpread), {
           editorName,
           maxInsertSize,
+          showAminoAcidUnitAsCodon,
           isProtein: sequenceData2.isProtein,
           onlyShowLabelsThatDoNotFit,
           tabHeight,
@@ -144775,7 +146144,8 @@ const _Editor = class _Editor extends React__default.Component {
         __spreadValues(__spreadProps(__spreadValues({}, pickedUserDefinedHandlersAndOpts), {
           isProtein: sequenceData2.isProtein,
           showCircularity: !!(showCircularity && !sequenceData2.isProtein && !sequenceData2.isOligo && !sequenceData2.isRna),
-          editorName
+          editorName,
+          showAminoAcidUnitAsCodon
         }), StatusBarProps)
       )
     ), /* @__PURE__ */ React__default.createElement(
@@ -146895,7 +148265,7 @@ export {
   LinearView$1 as LinearView,
   LinearView as LinearViewUnconnected,
   PositionAnnotationOnCircle,
-  RowItem,
+  RowItem$1 as RowItem,
   RowView$1 as RowView,
   RowView as RowViewUnconnected,
   SimpleCircularOrLinearView,