lhasa-ligand-builder 0.1.0

package/src/index.scss

@@ -0,0 +1,352 @@
+@use 'sass:color';
+
+$lhasa_background_color: rgba(119, 119, 119, 0.076);
+$lhasa_background_color_dark: rgb(53, 53, 53);
+$lhasa_text_color: black;
+$lhasa_text_color_dark: white;
+$lhasa_qed_value_color: color.adjust($lhasa_text_color, $saturation: +50%, $lightness: +50%, $hue: 196);
+$lhasa_qed_value_color_dark: color.adjust($lhasa_text_color, $saturation: +75%, $lightness: +65%, $hue: 310);
+$lhasa_border_color: rgba(0, 0, 0, 0.24);
+$lhasa_border_color_dark: rgba(255, 255, 255, 0.24);
+$lhasa_toolbar_border_color: rgba(184, 0, 0, 0.181);
+$lhasa_toolbar_border_color_dark: rgba(250, 85, 85, 0.281);
+$lhasa_base_padding: 3px;
+$lhasa_padding_minor: 2px;
+$lhasa_font_size: 0.65rem;
+
+.editor_canvas_container {
+    border: $lhasa_border_color 1px solid;
+    /* Padding here breaks relative coords */
+    /* padding: 5px; */
+    cursor: default;
+    user-select: none;
+    overflow: auto;
+    width: 480px;
+    height: 270px;
+    // max-width: 700px;
+    // min-width: 300px;
+    // max-height: 500px;
+    // min-height: 320px;
+}
+
+.editor_canvas_container.lhasa_dark_mode {
+    border-color: $lhasa_border_color_dark;
+}
+
+.lhasa_drawing {
+    background-color: white;
+    /* Removes weird, empty margin-like area */
+    margin-bottom: -$lhasa_base_padding;
+    // Disable default scroll on touch behaviour
+    touch-action: none;
+}
+
+.lhasa_editor {
+    font-family: sans-serif;
+    background-color: $lhasa_background_color;
+    color: $lhasa_text_color;
+    font-size: $lhasa_font_size;
+    padding: 2 * $lhasa_base_padding;
+    width: fit-content;
+    text-align: left;
+}
+
+.lhasa_editor.lhasa_dark_mode {
+    background-color: $lhasa_background_color_dark;
+    color: $lhasa_text_color_dark;
+}
+
+// For the menus
+.keybind_hint {
+    color: color.adjust($lhasa_text_color, $saturation: -50%, $lightness: +40%);
+    background-color: $lhasa_background_color;
+    margin-left: $lhasa_base_padding;
+    border-radius: $lhasa_padding_minor;
+    padding: $lhasa_padding_minor;
+    // font-family: monospace;
+}
+
+.lhasa_dark_mode .keybind_hint {
+    background-color: $lhasa_background_color_dark;
+    color: color.adjust($lhasa_text_color_dark, $saturation: -20%, $lightness: -40%);
+    // color: pink;
+}
+
+.lhasa_tooltip_keybind_infoblock {
+    padding: $lhasa_base_padding * 2;
+    margin-top: $lhasa_base_padding;
+    border-radius: 3px;
+    // This border color works well in both modes
+    border: rgba(255, 255, 255, 0.405) 1px solid;
+}
+
+.lhasa_tooltip_keybind_info {
+    margin: $lhasa_base_padding;
+    // font-size: medium;
+    // margin-top: $lhasa_base_padding * 8;
+    border-radius: 3px;
+    color: lightblue;
+    background-color: color.adjust(lightblue, $alpha: -0.8);
+    padding: $lhasa_base_padding;
+}
+
+.lhasa_tooltip {
+    font-size: small;
+    font-family: sans-serif;
+    margin: $lhasa_base_padding * 2;
+    // color: red !important;
+}
+
+@mixin toolbar {
+    border: $lhasa_toolbar_border_color 1px solid;
+    border-radius: 3px;
+    padding: $lhasa_base_padding;
+    /* align-items: center; */
+}
+
+@mixin toolbar_dark {
+    border-color: $lhasa_toolbar_border_color_dark;
+}
+
+@mixin panel {
+    border: $lhasa_border_color 1px solid;
+    border-radius: 3px;
+    padding: $lhasa_base_padding;
+}
+
+@mixin panel_dark {
+    border-color: $lhasa_border_color_dark;
+}
+
+.scale_panel {
+    flex-grow: 1;
+}
+
+.invalid_molecules_panel,   
+.display_mode_panel,
+.status_display_panel {
+    margin-bottom: $lhasa_base_padding;
+}
+
+.x_element_panel {
+    margin-bottom: $lhasa_base_padding;
+    /* display: none; */
+}
+
+
+@mixin horizontal_flex {
+    display: flex;
+    flex-direction: row;
+}
+
+@mixin vertical_flex {
+    display: flex;
+    flex-direction: column;
+}
+
+@mixin lhasa_disable_MUI_swelling {
+    font-size: $lhasa_font_size;
+    line-height: normal;
+    letter-spacing: 0em;
+}
+
+@mixin center_flex {
+    text-align: center;
+    justify-content: center;
+    /* CSS is weird */
+    align-items: center;
+}
+
+@mixin horizontal_container {
+    @include horizontal_flex;
+    gap: $lhasa_base_padding;
+}
+
+.horizontal_container {
+    @include horizontal_container;
+}
+
+.horizontal_container_centered {
+    @include horizontal_container;
+    @include center_flex;
+}
+
+.children_expanded > * {
+    flex-grow: 1;
+}
+
+@mixin vertical_container {
+    @include vertical_flex;
+    gap: $lhasa_base_padding;
+}
+
+.horizontal_toolbar {
+    @include toolbar;
+    @include horizontal_container;
+    margin-bottom: $lhasa_padding_minor;
+    margin-top: $lhasa_padding_minor;
+}
+
+.lhasa_dark_mode .horizontal_toolbar {
+    @include toolbar_dark;
+}
+
+.vertical_toolbar {
+    @include toolbar;
+    @include vertical_container;
+    /* margin-right: 2px;
+    margin-left: 2px; */
+    align-items: normal;
+}
+
+.lhasa_dark_mode .vertical_toolbar {
+    @include toolbar_dark;
+}
+
+.vertical_panel {
+    @include vertical_container;
+    @include panel;
+}
+
+.lhasa_dark_mode .vertical_panel {
+    @include panel_dark;
+}
+
+.horizontal_panel {
+    @include horizontal_container;
+    @include panel;
+}
+
+.lhasa_dark_mode .horizontal_panel {
+    @include panel_dark;
+}
+
+.lhasa_icon {
+    width: 18px;
+}
+
+.tool_button {
+    @include vertical_container;
+    @include center_flex;
+    @include lhasa_disable_MUI_swelling;
+    gap: $lhasa_padding_minor;
+    padding: $lhasa_base_padding;
+}
+
+.vertical_popup {
+    @include vertical_container;
+    @include center_flex;
+    gap: $lhasa_padding_minor * 4;
+    padding: $lhasa_base_padding * 4;
+}
+
+.vertical_popup_title {
+    @include horizontal_container;
+    font-size: larger;
+    font-weight: bold;
+    // todo: dark_theme
+    border-bottom: color.adjust($lhasa_toolbar_border_color, $saturation: +90%, $lightness: -0%, $alpha: +0.7) 2px solid;
+    margin-bottom: $lhasa_base_padding;
+    // border-radius: 4px;
+    // padding: $lhasa_base_padding;
+    flex-grow: 1;
+    justify-content: center;
+    align-self: normal;
+}
+
+.lhasa_dark_mode .vertical_popup_title {
+    border-color: color.adjust($lhasa_toolbar_border_color_dark, $saturation: +90%, $lightness: -0%, $alpha: +0.7);
+}
+
+.smiles_display {
+    padding: $lhasa_base_padding;
+    font-family: monospace;
+    margin-bottom: $lhasa_base_padding * 2;
+}
+
+.scale_display {
+    flex-grow: 1;
+    margin-left: $lhasa_base_padding * 4;
+}
+
+.status_display_panel,
+.qed_panel {
+    padding: 2 * $lhasa_base_padding;
+    margin-top: $lhasa_base_padding;
+}
+
+.qed_property_value {
+    color: $lhasa_qed_value_color;
+    margin-left: $lhasa_padding_minor;
+    font-weight: bold;
+}
+
+.lhasa_dark_mode .qed_property_value {
+    color: $lhasa_qed_value_color_dark;
+}
+
+.qed_property_label {
+    font-weight: bolder;
+}
+
+.lhasa_editor input {
+    font-family: sans-serif;
+    background-color: $lhasa_background_color;
+    color: $lhasa_text_color;
+    font-size: $lhasa_font_size;
+    border-style: ridge;
+}
+
+.lhasa_editor.lhasa_dark_mode input {
+    background-color: $lhasa_background_color_dark;
+    // border-color: $lhasa_toolbar_border_color_dark;
+    color: $lhasa_text_color_dark;
+    // this is broken
+    // /* Apply infinite transition to block autofill styles */
+    // // transition: background-color 9999s, color 9999s;
+}
+
+//Fix 'internal-autofill-selected' whitish background in Chrome
+.lhasa_editor.lhasa_dark_mode input:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px $lhasa_background_color inset !important;
+    box-shadow: 0 0 0px 1000px $lhasa_background_color_dark inset !important;
+    -webkit-text-fill-color: $lhasa_text_color_dark !important;
+}
+
+.smiles_input {
+    flex-grow: 1;
+}
+
+.lhasa_footer {
+    margin-top: 4 * $lhasa_base_padding;
+}
+
+.pre_render_message {
+    color: $lhasa_text_color;
+    font-weight: bold;
+    font-size: 200%;
+    background-color: $lhasa_background_color;
+}
+
+.lhasa_dark_mode .pre_render_message{
+    color: $lhasa_text_color_dark;
+}
+
+.warning_box {
+    color: darkred;
+    background-color: color.adjust(darkorange, $alpha: -0.90);
+    border: red 1px solid;
+    border-radius: 3px;
+    padding: $lhasa_base_padding;
+}
+
+.lhasa_dark_mode .warning_box {
+    color: red;
+    // background-color: ;
+}
+
+.text_measurement_worker_div {
+    /* Cancels out the gap in the owning container 
+    so that we get nice alignment */
+    margin-left: -$lhasa_base_padding;
+}

package/src/main.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { useState, useCallback, useEffect } from 'react'
+
+import ReactDOM from 'react-dom/client'
+import { LhasaComponent } from './Lhasa.tsx'
+import './index.scss'
+// Type definitions for TS linter, auto-generated by Embind
+import { MainModule } from './types'
+// import { Window } from './index';
+import { FormControl, FormControlLabel, Switch } from '@mui/material'
+
+// const lhasa_module : MainModule = await Module();
+
+
+
+
+
+export function App() {
+  const [showLhasa, setShowLhasa] = useState(true);
+  const [darkMode, setDarkMode] = useState(false);
+  const [isLhasaAttached, setLhasaAttached] = useState(window.LhasaModule !== undefined);
+
+  const handleLhasaAttached = useCallback(() => {
+      if (window.LhasaModule !== undefined) {
+          setLhasaAttached(true);
+      } else {
+          console.warn("Lhasa module not available... Cannot start Lhasa.")
+      }
+  }, []);
+
+  useEffect(() => {
+      document.addEventListener('lhasaModuleAttached', handleLhasaAttached);
+      return () => {
+          document.removeEventListener('lhasaModuleAttached', handleLhasaAttached)
+      };
+  }, [handleLhasaAttached]);
+
+
+  let MaybeLhasaComponent = isLhasaAttached ?
+  <LhasaComponent 
+    Lhasa={window.LhasaModule} 
+    show_top_panel={true}
+    // show_footer={true}
+    icons_path_prefix='icons'
+    smiles_callback={(internal_id, id_from_prop, smiles) => console.log("ID=", internal_id," SMILES=", smiles, "Id-From-Prop", id_from_prop)}
+    // Works when using `npx vite server --port 5174`
+    // Inside `vite.config.js` there is a proxy setup to redirect this to an actual bansu instance.
+    // CORS stuff is broken for localhost connections, it seems.
+    // bansu_endpoint='http://localhost:5174'
+
+    bansu_endpoint='https://www.ccp4.ac.uk/bansu'
+    data_path_prefix=''
+    dark_mode={darkMode}
+  /> : <div>
+    Lhasa module not loaded yet
+  </div>;
+
+  return (
+    <>
+    <FormControl>
+      <FormControlLabel
+        control={<Switch checked={showLhasa} onChange={(event) => setShowLhasa(event.target.checked)} />}
+        label={"Show Lhasa"} 
+      />
+      <FormControlLabel
+        control={<Switch checked={darkMode} onChange={(event) => setDarkMode(event.target.checked)} />}
+        label={"Dark Mode"} 
+      />
+    </FormControl>
+     {showLhasa ? MaybeLhasaComponent : null}
+    </>
+  )
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/src/qed_property_infobox.tsx

@@ -0,0 +1,14 @@
+import { LinearProgress } from '@mui/material';
+class QedPropertyInfoboxProps {
+    property_name!: string;
+    display_value: string | number | undefined;
+    progressbar_value: number | undefined;
+}
+
+export function QedPropertyInfobox(props: QedPropertyInfoboxProps) {
+    return <span className="qed_property_field">
+        <span className="qed_property_label">{props.property_name}</span>
+        <span className="qed_property_value">{props.display_value}</span>
+        {props.progressbar_value && <LinearProgress variant="determinate" value={props.progressbar_value * 100} />}
+    </span>;
+}