wip

src/components/Graph/EdgeColorSettings.vue

@@ -0,0 +1,137 @@
+<template>
+  <Field label="Color">
+    <RadioBlocks
+      :options="edgeColorTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateColorType"
+    />
+    <Field v-if="modelValue.type === 'constant'">
+      <ColorPicker
+        :selectedColor="modelValue.value"
+        @color-change="updateSettings('value', $event)"
+      />
+    </Field>
+    <template v-else>
+      <Field>
+        <Dropdown
+          v-if="modelValue.type === 'variable'"
+          :options="keyOptions"
+          :value="modelValue.source"
+          @change="updateSettings('source', $event)"
+        />
+      </Field>
+
+      <Field>
+        <RadioBlocks
+          :options="colorSourceUsageOptions"
+          :activeOption="modelValue.sourceUsage"
+          @option-change="updateSettings('sourceUsage', $event)"
+        />
+      </Field>
+
+      <Field v-if="modelValue.sourceUsage === 'map_to'">
+        <ColorscalePicker
+          :selected="modelValue.colorscale"
+          className="colorscale-picker"
+          @colorscale-change="updateSettings('colorscale', $event)"
+        />
+      </Field>
+    </template>
+  </Field>
+
+  <Field v-if="modelValue.type !== 'constant'" label="Color as">
+    <RadioBlocks
+      :options="сolorAsOptions"
+      :activeOption="modelValue.mode"
+      @option-change="updateSettings('mode', $event)"
+    />
+  </Field>
+
+  <Field v-if="modelValue.type !== 'constant'" label="Colorscale direction">
+    <RadioBlocks
+      :options="сolorscaleDirections"
+      :activeOption="modelValue.colorscaleDirection"
+      @option-change="updateSettings('colorscaleDirection', $event)"
+    />
+  </Field>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { applyPureReactInVue } from 'veaury'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
+import ColorscalePicker from 'react-chart-editor/lib/components/widgets/ColorscalePicker'
+import ColorPicker from 'react-chart-editor/lib/components/widgets/ColorPicker'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Dropdown: applyPureReactInVue(Dropdown),
+    RadioBlocks: applyPureReactInVue(RadioBlocks),
+    Field: applyPureReactInVue(Field),
+    ColorscalePicker: applyPureReactInVue(ColorscalePicker),
+    ColorPicker: applyPureReactInVue(ColorPicker)
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      edgeColorTypeOptions: markRaw([
+        { label: 'Constant', value: 'constant' },
+        { label: 'Variable', value: 'variable' }
+      ]),
+      сolorAsOptions: markRaw([
+        { label: 'Continious', value: 'continious' },
+        { label: 'Categorical', value: 'categorical' }
+      ]),
+      сolorscaleDirections: markRaw([
+        { label: 'Normal', value: 'normal' },
+        { label: 'Recersed', value: 'reversed' }
+      ]),
+      colorSourceUsageOptions: markRaw([
+        { label: 'Direct', value: 'direct' },
+        { label: 'Map to', value: 'map_to' }
+      ]),
+      defaultColorSettings: {
+        constant: { value: '#1F77B4' },
+        variable: {
+          source: null,
+          sourceUsage: 'map_to',
+          colorscale: null,
+          mode: 'categorical',
+          colorscaleDirection: 'normal'
+        }
+      }
+    }
+  },
+
+  methods: {
+    updateColorType(newColorType) {
+      const currentColorType = this.modelValue.type
+      this.defaultColorSettings[currentColorType] = this.modelValue
+
+      this.$emit('update:modelValue', {
+        type: newColorType,
+        ...this.defaultColorSettings[newColorType]
+      })
+    },
+    updateSettings(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+:deep(.customPickerContainer) {
+  float: right;
+}
+</style>

src/components/Graph/EdgeSizeSettings.vue

@@ -0,0 +1,93 @@
+<template>
+  <Field label="Size">
+    <RadioBlocks
+      :options="edgeSizeTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateSizeType"
+    />
+
+    <Field>
+      <NumericInput
+        v-if="modelValue.type === 'constant'"
+        :value="modelValue.value"
+        :min="1"
+        @update="updateSettings('value', $event)"
+      />
+      <Dropdown
+        v-if="modelValue.type === 'variable'"
+        :options="keyOptions"
+        :value="modelValue.source"
+        @change="updateSettings('source', $event)"
+      />
+    </Field>
+  </Field>
+
+  <template v-if="modelValue.type !== 'constant'">
+    <Field label="Size scale">
+      <NumericInput
+        :value="modelValue.scale"
+        @update="updateSettings('scale', $event)"
+      />
+    </Field>
+
+    <Field label="Minimum size">
+      <NumericInput
+        :value="modelValue.min"
+        @update="updateSettings('min', $event)"
+      />
+    </Field>
+  </template>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { applyPureReactInVue } from 'veaury'
+import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Dropdown: applyPureReactInVue(Dropdown),
+    NumericInput: applyPureReactInVue(NumericInput),
+    RadioBlocks: applyPureReactInVue(RadioBlocks),
+    Field: applyPureReactInVue(Field)
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      edgeSizeTypeOptions: markRaw([
+        { label: 'Constant', value: 'constant' },
+        { label: 'Variable', value: 'variable' }
+      ]),
+      defaultSizeSettings: {
+        constant: { value: 4 },
+        variable: { source: null, scale: 1, min: 1 }
+      }
+    }
+  },
+  methods: {
+    updateSizeType(newSizeType) {
+      const currentSizeType = this.modelValue.type
+      this.defaultSizeSettings[currentSizeType] = this.modelValue
+
+      this.$emit('update:modelValue', {
+        type: newSizeType,
+        ...this.defaultSizeSettings[newSizeType]
+      })
+    },
+    updateSettings(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>

src/components/Graph/NodeColorSettings.vue

@@ -0,0 +1,155 @@
+<template>
+  <Field label="Color">
+    <RadioBlocks
+      :options="nodeColorTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateColorType"
+    />
+    <Field v-if="modelValue.type === 'constant'">
+      <ColorPicker
+        :selectedColor="modelValue.value"
+        @color-change="updateSettings('value', $event)"
+      />
+    </Field>
+    <template v-else>
+      <Field>
+        <Dropdown
+          v-if="modelValue.type === 'variable'"
+          :options="keyOptions"
+          :value="modelValue.source"
+          @change="updateSettings('source', $event)"
+        />
+        <Dropdown
+          v-if="modelValue.type === 'calculated'"
+          :options="nodeCalculatedColorMethodOptions"
+          :value="modelValue.method"
+          @change="updateSettings('method', $event)"
+        />
+      </Field>
+
+      <Field>
+        <RadioBlocks
+          :options="colorSourceUsageOptions"
+          :activeOption="modelValue.sourceUsage"
+          @option-change="updateSettings('sourceUsage', $event)"
+        />
+      </Field>
+
+      <Field v-if="modelValue.sourceUsage === 'map_to'">
+        <ColorscalePicker
+          :selected="modelValue.colorscale"
+          className="colorscale-picker"
+          @colorscale-change="updateSettings('colorscale', $event)"
+        />
+      </Field>
+    </template>
+  </Field>
+
+  <Field v-if="modelValue.type !== 'constant'" label="Color as">
+    <RadioBlocks
+      :options="сolorAsOptions"
+      :activeOption="modelValue.mode"
+      @option-change="updateSettings('mode', $event)"
+    />
+  </Field>
+
+  <Field v-if="modelValue.type !== 'constant'" label="Colorscale direction">
+    <RadioBlocks
+      :options="сolorscaleDirections"
+      :activeOption="modelValue.colorscaleDirection"
+      @option-change="updateSettings('colorscaleDirection', $event)"
+    />
+  </Field>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { applyPureReactInVue } from 'veaury'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
+import ColorscalePicker from 'react-chart-editor/lib/components/widgets/ColorscalePicker'
+import ColorPicker from 'react-chart-editor/lib/components/widgets/ColorPicker'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Dropdown: applyPureReactInVue(Dropdown),
+    RadioBlocks: applyPureReactInVue(RadioBlocks),
+    Field: applyPureReactInVue(Field),
+    ColorscalePicker: applyPureReactInVue(ColorscalePicker),
+    ColorPicker: applyPureReactInVue(ColorPicker)
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      nodeColorTypeOptions: markRaw([
+        { label: 'Constant', value: 'constant' },
+        { label: 'Variable', value: 'variable' },
+        { label: 'Calculated', value: 'calculated' }
+      ]),
+      nodeCalculatedColorMethodOptions: markRaw([
+        { label: 'Degree', value: 'degree' },
+        { label: 'In degree', value: 'inDegree' },
+        { label: 'Out degree', value: 'outDegree' }
+      ]),
+      сolorAsOptions: markRaw([
+        { label: 'Continious', value: 'continious' },
+        { label: 'Categorical', value: 'categorical' }
+      ]),
+      сolorscaleDirections: markRaw([
+        { label: 'Normal', value: 'normal' },
+        { label: 'Recersed', value: 'reversed' }
+      ]),
+      colorSourceUsageOptions: markRaw([
+        { label: 'Direct', value: 'direct' },
+        { label: 'Map to', value: 'map_to' }
+      ]),
+      defaultColorSettings: {
+        constant: { value: '#1F77B4' },
+        variable: {
+          source: null,
+          sourceUsage: 'map_to',
+          colorscale: null,
+          mode: 'categorical',
+          colorscaleDirection: 'normal'
+        },
+        calculated: {
+          method: 'degree',
+          sourceUsage: 'map_to',
+          colorscale: null,
+          mode: 'continious',
+          colorscaleDirection: 'normal'
+        }
+      }
+    }
+  },
+  methods: {
+    updateColorType(newColorType) {
+      const currentColorType = this.modelValue.type
+      this.defaultColorSettings[currentColorType] = this.modelValue
+
+      this.$emit('update:modelValue', {
+        type: newColorType,
+        ...this.defaultColorSettings[newColorType]
+      })
+    },
+    updateSettings(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+:deep(.customPickerContainer) {
+  float: right;
+}
+</style>

src/components/Graph/NodeSizeSettings.vue

@@ -0,0 +1,118 @@
+<template>
+  <Field label="Size">
+    <RadioBlocks
+      :options="nodeSizeTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateSizeType"
+    />
+
+    <Field>
+      <NumericInput
+        v-if="modelValue.type === 'constant'"
+        :value="modelValue.value"
+        :min="1"
+        @update="updateSettings('value', $event)"
+      />
+      <Dropdown
+        v-if="modelValue.type === 'variable'"
+        :options="keyOptions"
+        :value="modelValue.source"
+        @change="updateSettings('source', $event)"
+      />
+      <Dropdown
+        v-if="modelValue.type === 'calculated'"
+        :options="nodeCalculatedSizeMethodOptions"
+        :value="modelValue.method"
+        @change="updateSettings('method', $event)"
+      />
+    </Field>
+  </Field>
+
+  <template v-if="modelValue.type !== 'constant'">
+    <Field label="Size scale">
+      <NumericInput
+        :value="modelValue.scale"
+        @update="updateSettings('scale', $event)"
+      />
+    </Field>
+
+    <Field label="Size mode">
+      <RadioBlocks
+        :options="nodeSizeModeOptions"
+        :activeOption="modelValue.mode"
+        @option-change="updateSettings('mode', $event)"
+      />
+    </Field>
+
+    <Field label="Minimum size">
+      <NumericInput
+        :value="modelValue.min"
+        @update="updateSettings('min', $event)"
+      />
+    </Field>
+  </template>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { applyPureReactInVue } from 'veaury'
+import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Dropdown: applyPureReactInVue(Dropdown),
+    NumericInput: applyPureReactInVue(NumericInput),
+    RadioBlocks: applyPureReactInVue(RadioBlocks),
+    Field: applyPureReactInVue(Field)
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      nodeSizeTypeOptions: markRaw([
+        { label: 'Constant', value: 'constant' },
+        { label: 'Variable', value: 'variable' },
+        { label: 'Calculated', value: 'calculated' }
+      ]),
+      nodeCalculatedSizeMethodOptions: markRaw([
+        { label: 'Degree', value: 'degree' },
+        { label: 'In degree', value: 'inDegree' },
+        { label: 'Out degree', value: 'outDegree' }
+      ]),
+      nodeSizeModeOptions: markRaw([
+        { label: 'Area', value: 'area' },
+        { label: 'Diameter', value: 'diameter' }
+      ]),
+      defaultSizeSettings: {
+        constant: { value: 4 },
+        variable: { source: null, scale: 1, mode: 'diameter', min: 1 },
+        calculated: { method: 'degree', scale: 1, mode: 'diameter', min: 1 }
+      }
+    }
+  },
+  methods: {
+    updateSizeType(newSizeType) {
+      const currentSizeType = this.modelValue.type
+      this.defaultSizeSettings[currentSizeType] = this.modelValue
+
+      this.$emit('update:modelValue', {
+        type: newSizeType,
+        ...this.defaultSizeSettings[newSizeType]
+      })
+    },
+    updateSettings(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>

src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/GraphEditor.vue

@@ -49,130 +49,16 @@
               />
             </Field>
 
-            <Field label="Size">
+            <NodeSizeSettings
-              <RadioBlocks
+              v-model="settings.style.nodes.size"
-                :options="nodeSizeTypeOptions"
+              :keyOptions="keysOptions"
-                :activeOption="settings.style.nodes.size.type"
+              @update:model-value="updateNodes('size', $event)"
-                @option-change="updateNodes('size.type', $event)"
+            />
-              />
+            <NodeColorSettings
-
+              v-model="settings.style.nodes.color"
-              <Field>
+              :keyOptions="keysOptions"
-                <NumericInput
+              @update:model-value="updateNodes('color', $event)"
-                  v-if="settings.style.nodes.size.type === 'constant'"
+            />
-                  :value="settings.style.nodes.size.value"
-                  :min="1"
-                  @update="updateNodes('size.value', $event)"
-                />
-                <Dropdown
-                  v-if="settings.style.nodes.size.type === 'variable'"
-                  :options="keysOptions"
-                  :value="settings.style.nodes.size.source"
-                  @change="updateNodes('size.source', $event)"
-                />
-                <Dropdown
-                  v-if="settings.style.nodes.size.type === 'calculated'"
-                  :options="nodeCalculatedSizeMethodOptions"
-                  :value="settings.style.nodes.size.method"
-                  @change="updateNodes('size.method', $event)"
-                />
-              </Field>
-            </Field>
-
-            <template v-if="settings.style.nodes.size.type !== 'constant'">
-              <Field label="Size scale">
-                <NumericInput
-                  :value="settings.style.nodes.size.scale"
-                  @update="updateNodes('size.scale', $event)"
-                />
-              </Field>
-
-              <Field label="Size mode">
-                <RadioBlocks
-                  :options="nodeSizeModeOptions"
-                  :activeOption="settings.style.nodes.size.mode"
-                  @option-change="updateNodes('size.mode', $event)"
-                />
-              </Field>
-
-              <Field label="Minimum size">
-                <NumericInput
-                  :value="settings.style.nodes.size.min"
-                  @update="updateNodes('size.min', $event)"
-                />
-              </Field>
-            </template>
-
-            <Field label="Color">
-              <RadioBlocks
-                :options="nodeColorTypeOptions"
-                :activeOption="settings.style.nodes.color.type"
-                @option-change="updateNodes('color.type', $event)"
-              />
-              <Field v-if="settings.style.nodes.color.type === 'constant'">
-                <ColorPicker
-                  :selectedColor="settings.style.nodes.color.value"
-                  @color-change="updateNodes('color.value', $event)"
-                />
-              </Field>
-              <template v-else>
-                <Field>
-                  <Dropdown
-                    v-if="settings.style.nodes.color.type === 'variable'"
-                    :options="keysOptions"
-                    :value="settings.style.nodes.color.source"
-                    @change="updateNodes('color.source', $event)"
-                  />
-                  <Dropdown
-                    v-if="settings.style.nodes.color.type === 'calculated'"
-                    :options="nodeCalculatedColorMethodOptions"
-                    :value="settings.style.nodes.color.method"
-                    @change="updateNodes('color.method', $event)"
-                  />
-                </Field>
-
-                <Field>
-                  <RadioBlocks
-                    :options="colorSourceUsageOptions"
-                    :activeOption="settings.style.nodes.color.sourceUsage"
-                    @option-change="updateNodes('color.sourceUsage', $event)"
-                  />
-                </Field>
-
-                <Field
-                  v-if="settings.style.nodes.color.sourceUsage === 'map_to'"
-                >
-                  <ColorscalePicker
-                    :selected="settings.style.nodes.color.colorscale"
-                    className="colorscale-picker"
-                    @colorscale-change="updateNodes('color.colorscale', $event)"
-                  />
-                </Field>
-              </template>
-            </Field>
-
-            <Field
-              v-if="settings.style.nodes.color.type !== 'constant'"
-              label="Color as"
-            >
-              <RadioBlocks
-                :options="сolorAsOptions"
-                :activeOption="settings.style.nodes.color.mode"
-                @option-change="updateNodes('color.mode', $event)"
-              />
-            </Field>
-
-            <Field
-              v-if="settings.style.nodes.color.type !== 'constant'"
-              label="Colorscale direction"
-            >
-              <RadioBlocks
-                :options="сolorscaleDirections"
-                :activeOption="settings.style.nodes.color.colorscaleDirection"
-                @option-change="
-                  updateNodes('color.colorscaleDirection', $event)
-                "
-              />
-            </Field>
           </Fold>
         </Panel>
 
@@ -194,110 +80,17 @@
               />
             </Field>
 
-            <Field label="Size">
+            <EdgeSizeSettings
-              <RadioBlocks
+              v-model="settings.style.edges.size"
-                :options="edgeSizeTypeOptions"
+              :keyOptions="keysOptions"
-                :activeOption="settings.style.edges.size.type"
+              @update:model-value="updateEdges('size', $event)"
-                @option-change="updateEdges('size.type', $event)"
+            />
-              />
 
-              <Field>
+            <EdgeColorSettings
-                <NumericInput
+              v-model="settings.style.edges.color"
-                  v-if="settings.style.edges.size.type === 'constant'"
+              :keyOptions="keysOptions"
-                  :value="settings.style.edges.size.value"
+              @update:model-value="updateEdges('color', $event)"
-                  :min="1"
+            />
-                  @update="updateEdges('size.value', $event)"
-                />
-                <Dropdown
-                  v-if="settings.style.edges.size.type === 'variable'"
-                  :options="keysOptions"
-                  :value="settings.style.edges.size.source"
-                  @change="updateEdges('size.source', $event)"
-                />
-              </Field>
-            </Field>
-
-            <template v-if="settings.style.edges.size.type !== 'constant'">
-              <Field label="Size scale">
-                <NumericInput
-                  :value="settings.style.edges.size.scale"
-                  @update="updateEdges('size.scale', $event)"
-                />
-              </Field>
-
-              <Field label="Minimum size">
-                <NumericInput
-                  :value="settings.style.edges.size.min"
-                  @update="updateEdges('size.min', $event)"
-                />
-              </Field>
-            </template>
-
-            <Field label="Color">
-              <RadioBlocks
-                :options="edgeColorTypeOptions"
-                :activeOption="settings.style.edges.color.type"
-                @option-change="updateEdges('color.type', $event)"
-              />
-              <Field v-if="settings.style.edges.color.type === 'constant'">
-                <ColorPicker
-                  :selectedColor="settings.style.edges.color.value"
-                  @color-change="updateEdges('color.value', $event)"
-                />
-              </Field>
-              <template v-else>
-                <Field>
-                  <Dropdown
-                    v-if="settings.style.edges.color.type === 'variable'"
-                    :options="keysOptions"
-                    :value="settings.style.edges.color.source"
-                    @change="updateEdges('color.source', $event)"
-                  />
-                </Field>
-
-                <Field>
-                  <RadioBlocks
-                    :options="colorSourceUsageOptions"
-                    :activeOption="settings.style.edges.color.sourceUsage"
-                    @option-change="updateEdges('color.sourceUsage', $event)"
-                  />
-                </Field>
-
-                <Field
-                  v-if="settings.style.edges.color.sourceUsage === 'map_to'"
-                >
-                  <ColorscalePicker
-                    :selected="settings.style.edges.color.colorscale"
-                    className="colorscale-picker"
-                    @colorscale-change="updateEdges('color.colorscale', $event)"
-                  />
-                </Field>
-              </template>
-            </Field>
-
-            <Field
-              v-if="settings.style.edges.color.type !== 'constant'"
-              label="Color as"
-            >
-              <RadioBlocks
-                :options="сolorAsOptions"
-                :activeOption="settings.style.edges.color.mode"
-                @option-change="updateEdges('color.mode', $event)"
-              />
-            </Field>
-
-            <Field
-              v-if="settings.style.edges.color.type !== 'constant'"
-              label="Colorscale direction"
-            >
-              <RadioBlocks
-                :options="сolorscaleDirections"
-                :activeOption="settings.style.edges.color.colorscaleDirection"
-                @option-change="
-                  updateEdges('color.colorscaleDirection', $event)
-                "
-              />
-            </Field>
           </Fold>
         </Panel>
         <Panel group="Style" name="Layout">
@@ -350,17 +143,14 @@ import { markRaw } from 'vue'
 import { applyPureReactInVue } from 'veaury'
 import GraphEditorControls from '@/lib/GraphEditorControls.jsx'
 import { PanelMenuWrapper, Panel, Fold, Section } from 'react-chart-editor'
-import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import 'react-chart-editor/lib/react-chart-editor.css'
 import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
 import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
 import Button from 'react-chart-editor/lib/components/widgets/Button'
-import ColorscalePicker from 'react-chart-editor/lib/components/widgets/ColorscalePicker'
-import ColorPicker from 'react-chart-editor/lib/components/widgets/ColorPicker'
 import Field from 'react-chart-editor/lib/components/fields/Field'
 import RandomLayoutSettings from '@/components/Graph/RandomLayoutSettings.vue'
 import ForceAtlasLayoutSettings from '@/components/Graph/ForceAtlasLayoutSettings.vue'
 import CirclePackLayoutSettings from '@/components/Graph/CirclePackLayoutSettings.vue'
-import 'react-chart-editor/lib/react-chart-editor.css'
 import FA2Layout from 'graphology-layout-forceatlas2/worker'
 import forceAtlas2 from 'graphology-layout-forceatlas2'
 import RunIcon from '@/components/svg/run.vue'
@@ -375,6 +165,10 @@ import Graph from 'graphology'
 import { circular, random, circlepack } from 'graphology-layout'
 import Sigma from 'sigma'
 import seedrandom from 'seedrandom'
+import NodeColorSettings from '@/components/Graph/NodeColorSettings.vue'
+import NodeSizeSettings from '@/components/Graph/NodeSizeSettings.vue'
+import EdgeSizeSettings from '@/components/Graph/EdgeSizeSettings.vue'
+import EdgeColorSettings from '@/components/Graph/EdgeColorSettings.vue'
 
 export default {
   components: {
@@ -383,17 +177,18 @@ export default {
     Panel: applyPureReactInVue(Panel),
     PanelSection: applyPureReactInVue(Section),
     Dropdown: applyPureReactInVue(Dropdown),
-    NumericInput: applyPureReactInVue(NumericInput),
     RadioBlocks: applyPureReactInVue(RadioBlocks),
     Field: applyPureReactInVue(Field),
     Fold: applyPureReactInVue(Fold),
-    ColorscalePicker: applyPureReactInVue(ColorscalePicker),
-    ColorPicker: applyPureReactInVue(ColorPicker),
     Button: applyPureReactInVue(Button),
     RunIcon,
     StopIcon,
     RandomLayoutSettings,
-    CirclePackLayoutSettings
+    CirclePackLayoutSettings,
+    NodeColorSettings,
+    NodeSizeSettings,
+    EdgeSizeSettings,
+    EdgeColorSettings
   },
   props: {
     dataSources: Object
@@ -404,50 +199,6 @@ export default {
       renderer: null,
       fa2Layout: null,
       fa2Running: false,
-      nodeSizeTypeOptions: markRaw([
-        { label: 'Constant', value: 'constant' },
-        { label: 'Variable', value: 'variable' },
-        { label: 'Calculated', value: 'calculated' }
-      ]),
-      edgeSizeTypeOptions: markRaw([
-        { label: 'Constant', value: 'constant' },
-        { label: 'Variable', value: 'variable' }
-      ]),
-      nodeCalculatedSizeMethodOptions: markRaw([
-        { label: 'Degree', value: 'degree' },
-        { label: 'In degree', value: 'inDegree' },
-        { label: 'Out degree', value: 'outDegree' }
-      ]),
-      nodeSizeModeOptions: markRaw([
-        { label: 'Area', value: 'area' },
-        { label: 'Diameter', value: 'diameter' }
-      ]),
-      nodeColorTypeOptions: markRaw([
-        { label: 'Constant', value: 'constant' },
-        { label: 'Variable', value: 'variable' },
-        { label: 'Calculated', value: 'calculated' }
-      ]),
-      edgeColorTypeOptions: markRaw([
-        { label: 'Constant', value: 'constant' },
-        { label: 'Variable', value: 'variable' }
-      ]),
-      nodeCalculatedColorMethodOptions: markRaw([
-        { label: 'Degree', value: 'degree' },
-        { label: 'In degree', value: 'inDegree' },
-        { label: 'Out degree', value: 'outDegree' }
-      ]),
-      сolorAsOptions: markRaw([
-        { label: 'Continious', value: 'continious' },
-        { label: 'Categorical', value: 'categorical' }
-      ]),
-      сolorscaleDirections: markRaw([
-        { label: 'Normal', value: 'normal' },
-        { label: 'Recersed', value: 'reversed' }
-      ]),
-      colorSourceUsageOptions: markRaw([
-        { label: 'Direct', value: 'direct' },
-        { label: 'Map to', value: 'map_to' }
-      ]),
       visibilityOptions: markRaw([
         { label: 'Show', value: true },
         { label: 'Hide', value: false }